如何最小化html5音頻標籤的加載時間？

我想建立一個簡單的音樂播放器使用html音頻標籤和一些JavaScript。當我編碼時，它的工作正常，而文件存儲在Safari（在Imac）和Firefox本地。然後我將它上傳到我的網頁以測試它的實況，並且有這些問題：

（1）Imac上的Safari需要大約一分鐘的時間來加載文件並開始播放（2）iphone上的Safari沒有自動播放文件，儘管我在代碼中使用了自動播放屬性....參見下面的代碼）（3）Firefox只是不玩它！（雖然當文件是本地播放時很好）

似乎文件太大....我的問題是：（1）有沒有辦法讓加載時間更短？和（2）有關爲什麼自動播放功能無法在iPhone Safari上工作以及如何避開它的任何想法？

這裏是我使用的歌曲代碼：

<audio autoplay="autoplay" controls="controls"> 
<source src="../audio/3.ogv" /> 
<source src="../audio/3.mp3" /> 
Your browser does not support the audio element. 
</audio>

感謝您的幫助

迭戈

來源

2011-07-07 Diego Sanabria

剛擡起頭......因爲HTML 5是不是XML語法基礎，你不分配這樣的屬性。

使用<audio autoplay controls>作爲開始標籤。

來源

2011-07-07 14:13:32

邁克爾......謝謝，這是短了很多。整齊。 –

從我可以告訴他們不希望自動播放Iphone/iPad上的HTML標籤。

這是一些可能幫助你的代碼的鏈接:)。

Iphone Autoplay.

它說，你可以避開它與一些JavaScript。

希望幫助:)。

來源

2011-07-07 14:15:26 RossDoughty

謝謝羅斯。我會嘗試該代碼，看看我是否可以使它適用於iPhone ...乾杯 –

不用擔心:)。我認爲它適用於新的視頻和音頻標籤。 – RossDoughty

聽起來很愚蠢，但你不能只給音頻標籤一個ID？然後在頁面加載中將其設置爲.play（）;？ :) –

我相信你不能在iPhone上自動播放。我認爲這是爲了防止過多的意外數據使用而施加的限制。有一些解決方法可以創建虛假點擊，但它們似乎已被修補。

Firefox通過HTML5不支持MP3。 ogv文件是Ogg視頻，而不是音頻（ogg），這可能是它不在音頻標籤中播放的原因。

至於加載時間，最好的辦法是儘可能壓縮文件。這會減少下載時間。

來源

2011-07-07 14:16:16 keyboardP

感謝您的文件擴展名正面。我會嘗試使用ogg ...仍困惑我爲什麼它與本地文件，但不是通過網絡！？您知道壓縮mp3和/或ogg文件的任何工具？ –

@Diego Sanabria - Ogg文件已經被壓縮。如果您嘗試進一步壓縮，質量可能會降低。如果你有原始的音頻文件，你可以利用各種壓縮設置和採樣率來減小文件大小。像Audacity這樣的工具可能會有幫助（http://audacity.sourceforge.net/）。不知道爲什麼FF在本地播放。你是否在本地使用與服務器上相同的文件？ – keyboardP

我想我找到了壓縮mp3的方法（http://tinyurl.com/66lf2gf）。我會嘗試從320 kbps的比特率到160，並看看它是否加載速度更快。我們會看到ogg文件在轉換後有多大。我在本地和現場使用完全相同的文件......它很奇怪:-)非常感謝您的幫助 –

如何最小化html5音頻標籤的加載時間？

回答

相關問題