// 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) // Audioオブジェクト var audioObj = new Audio(); var playFlag = false; // 再生するプレイリストを表示 var playList = '<table>'; playList += '<tr>'; playList += '<th>' +fileList[0].name+ '</th>'; playList += '<th>' +fileList[0].hint+ '</th>'; playList += '</tr>' for(var i=1; i<fileList.length; i++){ playList += '<tr>' playList += '<td onclick=start_music("audio/'+fileList[i].url+'")>' +fileList[i].name+ '</td>' ; playList += '<td>' +fileList[i].hint + '</td>'; playList += '</tr>' } playList += '</table>'; document.getElementById('playListArea').innerHTML = playList; // 再生開始 function start_music(url){ 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; // 再生フラグ:再生中にする } // イベント設定 var crtTime = document.getElementById('ctime'); var pButton = document.getElementById('playButton'); // 再生ボタンのイベントを設定 pButton.addEventListener('click', function(){ if (playFlag == false){ playFlag = true; // 再生フラグ:再生中にする audioObj.play(); pButton.src = 'images/off.png'; }else{ playFlag = false; // 再生フラグ:停止中にする audioObj.pause(); pButton.src = 'images/on.png'; } }, true);