HTML5音頻播放本地mp3文件

-1

播放列表搜索一段時間如何使音頻標籤打從本地機器上一首歌曲之後，我發現這個解決方案（Play audio local file with html）：HTML5音頻播放本地mp3文件

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或音頻一樣。

來源

2017-05-24 Lamar

輸入元件可允許的多個文件的選擇。你爲什麼想要這樣做？如果文件保存在本地機器上，用戶可以使用他們喜歡的任何媒體播放器播放它們，並擁有完全控制權 – ADyson

這是一個在瀏覽器中創建播放器的有趣項目。我知道我可以從文件輸入中選擇多個文件，但是如何將這些文件添加到播放列表中？ – Lamar

我想你會得到一個數組中的選定文件的列表，並將音頻控制的來源更改爲下一個完成最後一個？有事件告訴你什麼時候發生https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events – ADyson

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>

來源

2017-05-24 20:43:09 AvrilAlejandro

哇！這比FileReader容易得多。只是爲了我的信息，我們是否仍然可以用FileReader來做到這一點，因爲每次綁定目標結果時都會給我：音頻標籤中的src（未知）？ – Lamar

@Lamar它也可以。但也許它給你未知，因爲它不能識別音頻名稱 – AvrilAlejandro

謝謝，無論如何，我將它標記爲解決方案，因爲它看起來比FileReader輕。 – Lamar

HTML5音頻播放本地mp3文件

回答

相關問題