HTML5 音頻循環

Question

我最近一直在玩 HTML5 音頻，雖然我可以讓它播放聲音，但它只會播放一次。 無論我嘗試什么（設置屬性、事件處理程序等），我似乎都無法讓它循環。

這是我正在使用的基本代碼：

//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();

我正在使用 Chrome (6.0.466.0 dev) 和 Firefox (4 beta 1) 進行測試，它們似乎都樂於忽略我的循環請求。 有任何想法嗎？

更新：現在所有主要瀏覽器都支持循環屬性。

Answer 1

雖然指定了loop ，但未在我知道的任何瀏覽器 Firefox [感謝 Anurag 指出這一點] 。 這是在支持 HTML5 的瀏覽器中工作的另一種循環方式：

var myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

Answer 2

添加一些結合@kingjeffrey 和@CMS 的建議的更多建議：您可以在可用的地方使用loop ，並在不可用時退回到kingjeffrey 的事件處理程序。 您想使用loop而不是編寫自己的事件處理程序有一個很好的理由：正如Mozilla 錯誤報告中所討論的，雖然loop目前在我所知道的任何瀏覽器中都不能無縫循環（沒有間隙），但這當然是可能的，並且未來可能會成為標准。 您自己的事件處理程序在任何瀏覽器中都不會是無縫的（因為它必須通過 JavaScript 事件循環進行循環）。 因此，最好盡可能使用loop而不是編寫自己的事件。 正如 CMS 在對 Anurag 答案的評論中指出的那樣，您可以通過查詢loop變量來檢測對loop的支持——如果支持它，它將是一個布爾值 (false)，否則它將是未定義的，因為它目前在 Firefox 中。

把這些放在一起：

myAudio = new Audio('someSound.ogg'); 
if (typeof myAudio.loop == 'boolean')
{
    myAudio.loop = true;
}
else
{
    myAudio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}
myAudio.play();

Answer 3

您的代碼適用於 Chrome (5.0.375) 和 Safari (5.0)。 不在 Firefox (3.6) 上循環。

參見示例。

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​

Answer 4

最簡單的方法是：

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();

Answer 5

var audio = new Audio("http://rho.nu/pub/Game%20Of%20Thrones%20-%20Main%20Theme%20-%20Soundtrack.mp3");

audio.addEventListener('canplaythrough', function() {
    this.currentTime = this.duration - 10;
    this.loop = true;
    this.play();
});

只需在 canplaythrough 事件偵聽器中設置 loop = true 即可。

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

Answer 6

嘗試將 jQuery 用於事件偵聽器，然后它將在 Firefox 中工作。

myAudio = new Audio('someSound.ogg');

$(myAudio).bind('ended', function()  {
    myAudio.currentTime = 0;
    myAudio.play();
});

myAudio.play();

類似的東西。

Answer 7

我是這樣做的

<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>

它看起來像這樣

Answer 8

這是有效的，切換上述方法要容易得多：

使用內聯： onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

通過$(audio_element).attr('data-loop','1');打開循環$(audio_element).attr('data-loop','1'); 通過$(audio_element).removeAttr('data-loop');關閉$(audio_element).removeAttr('data-loop');

Answer 9

如果您知道聲音的確切長度，您可以嘗試 setInterval。 您可以讓 setInterval 每 x 秒播放一次聲音。 X 將是您聲音的長度。

Answer 10

現在每個人都知道如果您鍵入：

<audio controls="controls" loop="loop">
    <source src="someSound.ogg" type="audio/ogg" />
</audio>

它會播放歌曲並且會循環播放但是有一種更短的方法可以連續播放歌曲：

<audio controls loop src="someSound.ogg"></audio>