HTML5音頻播放本地mp3文件的播放列表

Question

搜索了一會兒如何制作音頻標簽以播放本地機器上的歌曲后，我找到了此解決方案（ 使用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>