// CSVファイル読み込み
// 引用 : https://algorithm.joho.info/programming/javascript/csv-to-array/
function csvToArray(path) {
        var csvData = new Array();
        var data = new XMLHttpRequest();

        data.open("GET", path, false);
        data.send(null);
        var LF = String.fromCharCode(10);
        var lines = data.responseText.split(LF);
        for (var i = 0; i < lines.length;++i) {
                var cells = lines[i].split(",");
                if( cells.length != 1 ) {
                        csvData.push(cells);
                }
        }
        return csvData;
}

// 二次元配列を一つの連想配列にする
// 引用 : https://teratail.com/questions/54502
var arrayToMap = (function () {
  function mapfn (values) {
    for (var i = 0, l = this.length, obj = Object.create(null); i < l; ++i) {
      if (values.hasOwnProperty(i)) {
        obj[this[i]] = values[i];
      }
    }

    return obj;
  }

  return function arrayToMap (array, keys) {
    return array.map(mapfn, keys);
  }
}());

// 再生するファイルリスト
var values = csvToArray("music_list.csv");
// 連想配列のkeyを指定
var keys = ['name', 'url']
// 曲リストを連想配列にする
var fileList = arrayToMap(values, keys);
console.log(JSON.stringify(fileList));

// 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);