2011-10-12 57 views
2

該網站在撰寫本文時爲:http://ajf.me/stuff/eva。源代碼是這樣的:爲什麼我的HTML5音頻循環不會?

<!DOCTYPE html> 
<html style="height: 100%;"> 
<head> 
<title>eva</title> 
</head> 
<body style="background-color: black; background-image: url('eva.png'); background-repeat: no-repeat; background-position: center center; height: 100%; margin: 0px; padding: 0px;"> 
<audio autoplay loop> 
    <source src="eva.mp3" type="audio/mpeg" /> 
    <source src="eva.ogg" type="audio/ogg" /> 
    <source src="eva.wav" type="audio/wav" /> 
</audio> 
</body> 
</html> 

音頻在Chrome,IE9和Firefox正常播放,但不循環後者。音頻文件不能格式錯誤,因爲它是由Audacity生成的。有沒有其他解釋爲什麼它不循環?

+0

如果我正確記得,自閉標籤和'autoplay =「autoplay」loop =「loop」'doubled-Boolean-attribute business只需要XHTML。 '

+0

你是否試過id

+0

試過,同樣的問題,沒有循環。 – Andrea

回答

9

你可以做這個

<audio autoplay loop>

的屬性並不需要別的事。


編輯

據此,Firefox不喜歡loop。它表明一個js的解決方案:

document.getElementById('audio_2').addEventListener('ended', function(){ 
    this.currentTime = 0; 
}, false); 

http://forestmist.org/2010/04/html5-audio-loops/


編輯

HTML5音頻迴路現在與Firefox瀏覽器。確認版本26.0(可能更早)

+0

我和OP有同樣的問題,循環屬性和事件監聽器,現在可以在FF,IE和Chrome中使用。 – GSPdibbler

8

Firefox尚未實現循環。我會檢查你是否有最新版本的Firefox,但我相信這仍然是這樣。您可以檢查它是否與支持:

if (typeof new Audio().loop == 'boolean') 

如果計算結果爲真,則循環在瀏覽器中實現。如果是假的,那麼它不是。將它添加到你的javascript中,在你的音頻上添加一個id標籤,並使用if語句來檢查循環。

if !(typeof new Audio().loop == 'boolean') { 
    audioToLoop = document.getElementById('audio_id_here'); 
    audioToLoop.addEventListener('ended', function() { 
     this.currentTime = 0; 
     this.play(); 
    }, false); 
} 

然後即使在不受支持的瀏覽器中也應該循環。