// 再生するファイルリスト
var fileList = [
{ name : 'Cat_Life', url : 'cat_life.mp3' },
{ name : 'Ray_at_midsummer', url : 'Ray_at_midsummer.mp3' }
];
// Audioオブジェクト
var audioObj = new Audio();
var playFlag = "select";
// 再生するプレイリストを表示
var playList = '<ul>';
for(var i=0; i<fileList.length; i++){
playList += '<li><button type="button" onclick=start_music("/music/'+fileList[i].url+'","'+fileList[i].name+'")>';
playList += fileList[i].name + '</button></li>';
}
playList += '</ul>';
document.getElementById('playListArea').innerHTML = playList;
// 再生開始
function start_music(url, name){
  playFlag = false;
  audioObj.pause(); // 以前の音楽を停止させる
  audioObj = new Audio(url);
  audioObj.addEventListener('loadedmetadata', function() {
    var sec = '0' + Math.floor(audioObj.currentTime % 60);  // 秒数
    var min = '0' + Math.floor(audioObj.currentTime / 60);  // 分数
    sec = sec.substr(sec.length-2, 2);
    min = min.substr(min.length-2, 2);
    var totalSec = '0' + Math.floor(audioObj.duration % 60);    // 秒数
    var totalMin = '0' + Math.floor(audioObj.duration / 60);    // 分数
    totalSec = totalSec.substr(totalSec.length-2, 2);
    totalMin = totalMin.substr(totalMin.length-2, 2);
    crtTime.innerHTML = min+":"+sec+' ['+ totalMin+':'+totalSec +']';
  }, true);

  audioObj.addEventListener('timeupdate', function(){
    var sec = '0' + Math.floor(audioObj.currentTime % 60);  // 秒数
    var min = '0' + Math.floor(audioObj.currentTime / 60);  // 分数
    sec = sec.substr(sec.length-2, 2);
    min = min.substr(min.length-2, 2);
    var totalSec = '0' + Math.floor(audioObj.duration % 60);    // 秒数
    var totalMin = '0' + Math.floor(audioObj.duration / 60);    // 分数
    totalSec = totalSec.substr(totalSec.length-2, 2);
    totalMin = totalMin.substr(totalMin.length-2, 2);
    crtTime.innerHTML = min+":"+sec+' ['+ totalMin+':'+totalSec +']';
  }, true);

  document.getElementById('name').innerHTML=name;
  pButton.innerHTML = 'START';
}
// イベント設定
var crtTime = document.getElementById('ctime');
var pButton = document.getElementById('playButton');
// 再生ボタンのイベントを設定
pButton.addEventListener('click', function(){
  if (playFlag == false){
    playFlag = true;    // 再生フラグ：再生中にする
    audioObj.play();
    pButton.innerHTML = 'STOP';
  } else if (playFlag == true){
    playFlag = false; // 再生フラグ：停止中にする
    audioObj.pause();
    pButton.innerHTML = 'PLAY';
  } else {
    alert("曲をセットしてね！");
  }
}, true);