Newer
Older
2020_intr / public / js / start.js
@mamadoka mamadoka on 21 Aug 2020 3 KB 音楽ファイル変更
// 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();
}