熟悉 Html
中級
在這個”使用HTML5組件工作”三部曲的第一部分中,我主要講解了有關用Html5在網頁中嵌入視頻的內容。當然,大部分視頻中包含了音頻,所以如果你想把音頻文件嵌入到你的網頁中,同樣用Html5能夠很容易地實現。
在這篇教程中,我會講解audio
元素,它的屬性,以及Html5能夠使用的不同類型的音頻文件。許多在第一部分中提及 的視頻概念和技術,同樣適用於音頻。所以如果你已經閱讀過第一部分,你會注意到在第二部分中有一些相似之處。如果你還沒有讀過第一部分,並且你只對 Html5音頻感興趣,那麼這篇文章有你啟程所需要的全部知識。
注意: 你可以通過下載和深入研究該示例文件,來研究一些示例代碼和文章中所闡述的許多概念。
在Html5出現前,如果你想要在你的網頁中嵌入音頻文件,必須使用第三方插件,比如Flash Player。
例如,要在你的網頁中嵌入一個MP3音頻文件,並使它可通過Flash Player使用。你或許要用到以下的代碼:
<object type="application/x-shockwave-Flash" data="player.swf?audioURL=myAudio.mp3&autoPlay=true" height="27" width="320"> <param name="movIE" value="player.swf?audioUrl=myAudio.mp3&autoPlay=true"> </object>
使用Html5,你能更加簡潔地實現:
<audio src="myAudio.mp3" controls autoplay></audio>
這些Html5代碼片段和那些為Flash Player提供的更加冗長的代碼實現了相同的結果:在網頁中嵌入一個能自動播放的音頻文件。你可以看到Html5代碼有多麼的簡單整潔。
在該系列的第一部分中我談到了視頻編解碼器。那同樣要介紹許多音頻編解碼器的思想也不足為奇了。Html5規范最初也為Ogg Vorbis編解碼器受托者提供支持,但來自蘋果和諾基亞的挑戰使其終止了該支持。如今的浏覽器,相比於支持視頻編解碼器而言,能支持更多的音頻編解碼 器,所以當你抉擇於該使用哪種音頻編解碼器時,你會有更多的選擇:
要覆蓋所有支持Html5音頻的浏覽器,你只能用兩種不同的格式服務你的音頻:Ogg Vorbis 和MP3。
由於WAV文件格式不能壓縮得很好因此文件大小會相當大,不建議使用該格式。
正如你所見,audio
元素用作在網頁中嵌入音頻文件。像video
元素一樣,它有許多的屬性,表1中列出了其中的部分屬性:
屬性
描述
src
提供音頻文件URL路徑
autoplay
表明如果可能,應使音頻自動播放
controls
告知浏覽器顯示其默認的音頻控制設置
muted
設置音頻的初始狀態為muted
(當前一些浏覽器不支持該屬性)
loop
表明應使音頻循環連續播放
(Firefox當前不支持該屬性)
preload
暗示浏覽器應該怎樣嘗試預加載音頻文件。有三種可用值:
none
:不執行任何預加載metadata
: 只加載視頻元數據,例如,持續時間auto
: 讓浏覽器自己決定(這是默認設置)例如,利用audio
元素和它的屬性,你可以使用以下代碼來嵌入一個MP3音頻文件,該文件可在加載時開始播放,擁有默認的控制設置,並能反復循環播放。
<audio src="myAudio.mp3" autoplay controls loop></audio>
我必須指出,你的用戶可能會相當討厭該示例。自動播放一個循環音頻文件通常被認作是惡劣的因特網規范。
就像我先前提醒的,你需要為音頻文件提供至少兩種不同的解碼器才能覆蓋所有支持Html5的浏覽器。如同對視頻元素的處理一樣,你需要使用source
元素來實現該功能。
一個audio
元素能包含多種source元素,因此你能為你的音頻提供多種格式支持。擴展先前的示例,你可以像下面這樣為相同的音頻內容指定兩種source, Ogg Vorbis和MP3。
<audio autoplay controls> <source src="myAudio.ogg" type="audio/ogg"> <source src="myAudio.mp3" type="audio/mp3"> </audio>
當浏覽器解析音頻元素時,它將通過source元素列表循序地查找直到找到一個它能播放的文件格式。一旦找到後,就播放該文件並忽略隨後的其它元素。
既然如此,Firefox 和 Opera 會播放 Ogg 文件。 Chrome 也會播放 Ogg 文件, 即使它也能播放MP3文件。 Safari 和 Internet Explorer 9 會播放MP3 文件。
你也可以指定用來編碼音頻文件的確切的解碼器。這能幫助浏覽器決定它是否能播放該內容。由於你常常不知道究竟用什麼解碼器,只簡單地提供類型並讓浏覽器自己做決定,通常是一個更好的主意。
如果你想引用某解碼器,你可以照下面這樣做:
<audio autoplay controls> <source src="myAudio.ogg" type='audio/ogg; codec="vorbis"'> </audio>
注意解碼器是如何添加到type屬性中去的,特別要注意用到的引號,以及type
和codec
之間用分號隔開了。像指定視頻解碼器那樣,這裡很容易犯下會使音頻不播放的格式化錯誤。因此,如果你要明確地指定解碼器,一定要注意語法問題。
並不是每個人都使用支持Html5的浏覽器。例如,Internet Explorer的老版本(IE8或者更低)仍然相當流行。
為了支持正在用這些浏覽器的用戶,你需要使用一個第三方插件比如Flash Player來嵌入音頻文件。正如在Html5和本地多媒體到來前你需要做的那樣。
浏覽器會無視它們不理解的信息,所以你的Html5音頻和source元素會被例如IE8這樣的舊版浏覽器完全忽略。舉例來說,你可能會使用以下代碼來給音頻文件添加鏈接:
<audio autoplay controls> <source src="myAudio.ogg" type="audio/ogg"> <source src="myAudio.mp3" type="audio/mp3"> <a href="myAudio.mp3">Download the audio file</a> </audio>
舊版浏覽器會簡單的顯示“Download the audio file”鏈接,而忽視其它內容。
要通過FlashPlayer添加fallback支持(和添加下載鏈接一樣),你需要使用以下代碼:
<audio autoplay controls> <source src="myAudio.ogg" type="audio/ogg"> <source src="myAudio.mp3" type="audio/mp3"> <object type="application/x-shockwave-Flash" data="player.swf?audioUrl=myAudio.mp3&autoPlay=true"> <param name="movIE" value="player.swf?audioUrl=myAudio.mp3&autoPlay=true"> </object> <a href="myAudio.mp3">Download the audio file</a> </audio>
舊版浏覽器會顯示Flash Player和下載鏈接,因此用戶可以選擇怎樣訪問音頻。如果用戶沒有安裝Flash player,他們仍然可以通過下載鏈接訪問到你的音頻。注意,你可以使用與Flash Player相同的MP3音頻文件,因為它完全有能力播放MP3文件。
正如我在第一部分中提醒的,HTML5當前不支持數字版權管理(DRM)。因此,如果你不想讓用戶下載你的音頻文件,那麼對你而言,或許Html5音頻不是一個正確的解決方案。Html5會暴露你的音頻文件鏈接,所以它們是公開地提供給用戶訪問的內容。
目前還沒有方法阻止用戶下載HTML5音頻內容,雖然將來可能會有這樣的方法。要獲得更多有關Html5和DRM的信息,請參閱W3C's HTML FAQs on this topic。(這是一個有關Html5視頻的討論,但其概念同樣適用於音頻內容)。
如你所見,使用Html5在你的網站中加入音頻是很簡單的。你確實需要意識到一些浏覽器是不支持Html5的,因此一定要提供一個備用機制,以確保所有用戶都可以訪問到你的音頻內容。
同樣記牢,任何你通過Html5服務的音頻文件也能被任何人下載使用。因此,如果你想避免你的文件被下載及分享,那麼Html5音頻並不適合你。