HTML5オーディオは、ローカルマシンからの曲を再生するオーディオタグを作成する方法についてしばらく検索した後ローカルのmp3ファイル

Question

のプレイリストを再生するために、私は、このソリューション（Play audio local file with html）を見つけ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="file"> 
<audio controls id="myAudio" autoplay></audio> 

上記のコードは1つのファイルに適しています。質問は、FileReaderの複数のインスタンスを同時に作成せずに、オーディオをプレイリストのように再生するために複数のファイルを入力からロードするための良い方法があるかどうかです。まずファイルを配列に格納してから、その配列からsrcまたはオーディオを供給するようなものです。

Answer 1

createObjectURL代わりのnew FileReader()

var songs = document.getElementById("songs"), 
 
    myAudio = document.getElementById("myAudio"); 
 
function next(n){ 
 
    var url = URL.createObjectURL(files[n]); 
 
    myAudio.setAttribute('src', url); 
 
    myAudio.play(); 
 
} 
 
var _next = 0, 
 
    files, 
 
    len; 
 
songs.addEventListener('change', function() { 
 
    files = songs.files; 
 
    len = files.length; 
 
    if(len){ 
 
    next(_next); 
 
    } 
 
}); 
 
myAudio.addEventListener("ended", function(){ 
 
    _next += 1; 
 
    next(_next); 
 
    console.log(len, _next); 
 
    if((len-1)==_next){ 
 
    _next=-1; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="songs" multiple> 
 
<audio controls id="myAudio" autoplay></audio>