Newer
Older
2020_intr / public / js / start.js
@mamadoka mamadoka on 17 Aug 2020 3 KB create intr
// 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);