HTML5音频播放本地mp3文件

Question

播放列表搜索一段时间如何使音频标签打从本地机器上一首歌曲之后，我发现这个解决方案（Play audio local file with html）：

var $audio = $('#myAudio'); 
$('input').on('change', function(e) { 
    var target = e.currentTarget; 
    var file = target.files[0]; 
    var reader = new FileReader(); 

    console.log($audio[0]); 
    if (target.files && file) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $audio.attr('src', e.target.result); 
      $audio.play(); 
     } 
     reader.readAsDataURL(file); 
    } 
}); 

和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> 

上面的代码对于一个文件来说看起来不错。问题是，是否有一种很好的方法可以从输入中加载多个文件，使音频像播放列表一样播放，而无需同时创建多个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>