// 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" 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(); }