// CSVファイル読み込み 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; } 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 data = csvToArray("audio/music.csv"); var keys = ['name','url','hint','singer','answer'] var fileList = arrayToMap(data, keys); // 曲リストの連想配列確認用Log console.log(JSON.stringify(fileList)); //console.log(fileList.length) var audioObj = new Audio(); var playFlag = false; var playList = '<table>' + '<tr>' +'<th>' +fileList[0].name+ '</th>'+ '<th>' +fileList[0].hint+ '</th>'+ '</tr>'; for(var i=1; i<fileList.length; ++i){ playList += '<tr>'; playList += '<td onclick=start_music("audio/'+fileList[i].url+'","'+fileList[i].answer+'")>'; playList += fileList[i].name + '</td>'; playList += '<td>' +fileList[i].hint + '</td>'; playList += '</tr>' }; playList += '</table>'; document.getElementById('playListArea').innerHTML = playList; // 再生開始 function start_music(url, answer){ console.log(url); console.log(answer); audioObj.pause(); // これがないと以前の音楽は停止しない audioObj = new Audio(url); audioObj.play(); 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); playFlag = true; // 再生フラグ:再生中にする document.getElementById('answer').outerHTML='<button type="button" id="answer" class="answer" onclick=answerMusic('+answer+')></button>'; } // イベント設定 var crtTime = document.getElementById('ctime'); // 曲の再生 function start(){ playFlag = true; audioObj.play(); } // 曲の停止 function stop(){ playFlag = false; audioObj.pause(); } // サビから流す(答え合わせ) function answerMusic(time){ playFlag = false; audioObj.pause(); audioObj.currentTime=time; audioObj.play(); //console.log(audioObj.currentTime); }; var m = document.getElementById("music"); m.setAttribute("src", "audio/3月9日.mp3"); function playmusic(){ m.load(); m.play(); }