HTML5音頻播放列表 - 如何在第一個結束後播放第二個音頻文件？

在另一個完成後，我們如何在html5中播放一些音頻？HTML5音頻播放列表 - 如何在第一個結束後播放第二個音頻文件？

我試過用jquery delay()函數，但它不會工作，是否有可能在html5音頻中使用pause()而不是定時器？例如，pause('500',function(){});？

2012-02-17 Khairu Aqsara

你有沒有嘗試過這樣的： http://stackoverflow.com/questions/7652031/how-to-find-audio-is-paused-or-track-finished-in-jquery-html5-audio – Laszlo 2012-02-17 10:35:32

是，那不是延遲（），我的意思是第二個音頻文件如何在第一個音頻文件播放完之後完成， – 2012-02-17 10:48:44

這是JSLinted，不顯眼的Javascript 示例演示如何處理和使用endedmediaevent。在您的特定情況下，您將觸發ended事件處理程序中第二個音頻文件的播放。

您可以使用下面的代碼或run the test fiddle。

單擊播放列表中的項目開始播放。一個音頻結束後，下一個將開始。

標記：（注意空白的<li>元素之間的刻意迴避 - 這是簡化與nextSibling遍歷DOM）。

<audio id="player"></audio> 

<ul id="playlist"><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%201%20by%20Lionel%20Allorge.ogg">Space 1</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%202%20by%20Lionel%20Allorge.ogg">Space 2</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%203%20by%20Lionel%20Allorge.ogg">Space Lab</li></ul> 

<button id="stop">Stop</button>

腳本：

// globals 
var _player = document.getElementById("player"), 
    _playlist = document.getElementById("playlist"), 
    _stop = document.getElementById("stop"); 

// functions 
function playlistItemClick(clickedElement) { 
    var selected = _playlist.querySelector(".selected"); 
    if (selected) { 
     selected.classList.remove("selected"); 
    } 
    clickedElement.classList.add("selected"); 

    _player.src = clickedElement.getAttribute("data-ogg"); 
    _player.play(); 
} 

function playNext() { 
    var selected = _playlist.querySelector("li.selected"); 
    if (selected && selected.nextSibling) { 
     playlistItemClick(selected.nextSibling); 
    } 
} 

// event listeners 
_stop.addEventListener("click", function() { 
    _player.pause(); 
}); 
_player.addEventListener("ended", playNext); 
_playlist.addEventListener("click", function (e) { 
    if (e.target && e.target.nodeName === "LI") { 
     playlistItemClick(e.target); 
    } 
});

來源

2012-02-17 13:58:13 Lloyd

感謝勞埃德，那工作找到，謝謝，但我沒有使用ul li孩子dom，它就像在bakground播放的音樂（背景音樂爲一些小遊戲） – 2012-02-19 08:57:49

這並不是一個精確的解決方案問題（這怎麼可能，我對你的遊戲一無所知）..這是一個演示如何處理結束的媒體事件的例子 - 這個事件在播放結束時觸發。在這個事件的處理程序中，編寫一些代碼來播放第二個音頻文件。 – Lloyd 2012-02-19 10:14:15

更新了回答，以體現它只是一個示範 – Lloyd 2012-02-19 10:17:47

我想這個答案將幫助你......

html5 audio player - jquery toggle click play/pause?

所以不是一個點擊，你應該使用的setTimeout或setInterval的，它曾經你感覺更舒服，不斷檢查的.paused==false我想你可能能夠通過檢查視頻的長度來檢查它是否完成，並將其與最大長度（即文件結尾==）進行比較。

來源

2012-02-17 10:33:15 Val

我們如何在第一個音頻文件之後播放音頻？那是可能的嗎？當第一個音頻完成後，第二個繼續播放？ – 2012-02-17 10:44:26

@Val有沒有利用這種方法來響應'ended'事件？ – Lloyd 2012-02-21 12:25:01

以及我只能提供我的知識:)我不知道結束的事件。 – Val 2012-02-21 13:41:22

如果這是你的音頻標籤：

<audio id="player" src="someAudio.mp3"/>

然後添加事件偵聽器t o對於「結束」事件，可以改變聲源並播放下一個聲音。

var audio = document.getElementById("player"); 
audio.addEventListener("ended", function() { 
    audio.src = "nextAudio.mp3"; 
    audio.play(); 
});

來源

2012-02-19 10:27:14

如果您使用的是Chrome瀏覽器，您應該知道當前存在一個不允許重播音頻標記的錯誤。爲了解決這個問題，你可以重置src或者通過編程方式創建一個新的Audio對象。

來源

2012-02-19 11:05:07

真的嗎？我每天在Chrome中使用'

我認爲它隻影響短片段 – 2012-02-19 15:18:42

在音頻錯誤列表中尋找它。http://code.google.com/p/chromium/issues/list?can = 2＆q =特徵=媒體音頻＆colspec = ID％20Pri％20Mstone％20ReleaseBlock％20Area％20Feature％20Status％20Owner％20Summary – Lloyd 2012-02-21 12:23:08

HTML5音頻播放列表 - 如何在第一個結束後播放第二個音頻文件？

回答

相關問題