// 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/music_list.csv");
// 連想配列のkeyを指定
var keys = ['name', 'url', 'answer']
// 曲リストを連想配列にする
var fileList = arrayToMap(values, keys);
// 曲リストの連想配列確認用Log
// console.log(JSON.stringify(fileList));

// 参考文献 : https://ascii.jp/elem/000/000/525/525808/index-6.html
// 操作の対象となる曲
var audioObj = new Audio();
var playFlag = "select";
// 再生するプレイリストを表示
var playList = '<ul class="list-group">';
for(var i=0; i<fileList.length; i++){
playList += '<li class="list-group-item" onclick=startMusic("'+fileList[i].name+'","/music/'+fileList[i].url+'","'+fileList[i].answer+'")>';
playList += fileList[i].name + '</li>';
}
playList += '</ul>';
document.getElementById('playListArea').innerHTML = playList;

// 再生開始
function startMusic(name, url, answer){
  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;
  document.getElementById('answer').outerHTML='<button type="button" id="answer" class="btn btn-success mt-2" onclick=answerMusic('+answer+')>ANSWER</button>';
}

// イベント設定
var crtTime = document.getElementById('ctime');
// 曲の再生
function start(){
  playFlag = true;
  audioObj.play();
}
// 曲の停止
function stop(){
  playFlag = false;
  audioObj.pause();
}
// 曲の秒数のリセット
function reset(){
  playFlag = false;
  audioObj.pause();
  audioObj.currentTime = 0;
}
// サビから流す(答え合わせ)
function answerMusic(time){
  playFlag = false;
  audioObj.pause();
  audioObj.currentTime=time;
};
// 出題者が効果音を鳴らす用
function musicPlayer(music){
  audioObj.pause();
  document.getElementById(music).play();
}