在這個(gè)”使用HTML5組件工作”三部曲的第一部分中，我主要講解了有關(guān)用HTML5在網(wǎng)頁(yè)中嵌入視頻的內(nèi)容。當(dāng)然，大部分視頻中包含了音頻，所以如果你想把音頻文件嵌入到你的網(wǎng)頁(yè)中，同樣用HTML5能夠很容易地實(shí)現(xiàn)。

在這篇教程中，我會(huì)講解audio元素，它的屬性，以及HTML5能夠使用的不同類型的音頻文件。許多在第一部分中提及 的視頻概念和技術(shù)，同樣適用于音頻。所以如果你已經(jīng)閱讀過第一部分，你會(huì)注意到在第二部分中有一些相似之處。如果你還沒有讀過第一部分，并且你只對(duì) HTML5音頻感興趣，那么這篇文章有你啟程所需要的全部知識(shí)。

注意: 你可以通過下載和深入研究該示例文件，來研究一些示例代碼和文章中所闡述的許多概念。

提供音頻文件的支持：兩種技術(shù)的快速對(duì)比

在HTML5出現(xiàn)前，如果你想要在你的網(wǎng)頁(yè)中嵌入音頻文件，必須使用第三方插件，比如Flash Player。

例如，要在你的網(wǎng)頁(yè)中嵌入一個(gè)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，你能更加簡(jiǎn)潔地實(shí)現(xiàn)：

<audio src="myAudio.mp3" controls autoplay></audio> 

這些HTML5代碼片段和那些為Flash Player提供的更加冗長(zhǎng)的代碼實(shí)現(xiàn)了相同的結(jié)果：在網(wǎng)頁(yè)中嵌入一個(gè)能自動(dòng)播放的音頻文件。你可以看到HTML5代碼有多么的簡(jiǎn)單整潔。

音頻編解碼器

在該系列的第一部分中我談到了視頻編解碼器。那同樣要介紹許多音頻編解碼器的思想也不足為奇了。HTML5規(guī)范最初也為Ogg Vorbis編解碼器受托者提供支持，但來自蘋果和諾基亞的挑戰(zhàn)使其終止了該支持。如今的瀏覽器，相比于支持視頻編解碼器而言，能支持更多的音頻編解碼 器，所以當(dāng)你抉擇于該使用哪種音頻編解碼器時(shí)，你會(huì)有更多的選擇：

• 火狐支持Ogg Vorbis 和 WAV.
• Safari支持 MP3, AAC, WAV, 以及 MP4.
• Internet Explorer 9 支持 MP3, AAC, 和 MP4.
• Opera 支持 Ogg Vorbis 和 WAV.
• Chrome支持以上所有格式.

要覆蓋所有支持HTML5音頻的瀏覽器，你只能用兩種不同的格式服務(wù)你的音頻：Ogg Vorbis 和MP3。

由于WAV文件格式不能壓縮得很好因此文件大小會(huì)相當(dāng)大，不建議使用該格式。

audio元素

正如你所見，audio元素用作在網(wǎng)頁(yè)中嵌入音頻文件。像video元素一樣，它有許多的屬性，表1中列出了其中的部分屬性：

表1. Audio元素屬性

例如，利用audio元素和它的屬性，你可以使用以下代碼來嵌入一個(gè)MP3音頻文件，該文件可在加載時(shí)開始播放，擁有默認(rèn)的控制設(shè)置，并能反復(fù)循環(huán)播放。

<audio src="myAudio.mp3" autoplay controls loop></audio> 

我必須指出，你的用戶可能會(huì)相當(dāng)討厭該示例。自動(dòng)播放一個(gè)循環(huán)音頻文件通常被認(rèn)作是惡劣的因特網(wǎng)規(guī)范。

使用source元素

就像我先前提醒的，你需要為音頻文件提供至少兩種不同的解碼器才能覆蓋所有支持HTML5的瀏覽器。如同對(duì)視頻元素的處理一樣，你需要使用source元素來實(shí)現(xiàn)該功能。

一個(gè)audio元素能包含多種source元素，因此你能為你的音頻提供多種格式支持。擴(kuò)展先前的示例，你可以像下面這樣為相同的音頻內(nèi)容指定兩種source, Ogg Vorbis和MP3。

<audio autoplay controls>  
<source src="myAudio.ogg" type="audio/ogg">  
<source src="myAudio.mp3" type="audio/mp3">  
</audio> 

當(dāng)瀏覽器解析音頻元素時(shí)，它將通過source元素列表循序地查找直到找到一個(gè)它能播放的文件格式。一旦找到后，就播放該文件并忽略隨后的其它元素。

既然如此，F(xiàn)irefox 和 Opera 會(huì)播放 Ogg 文件。 Chrome 也會(huì)播放 Ogg 文件, 即使它也能播放MP3文件。 Safari 和 Internet Explorer 9 會(huì)播放MP3 文件。

指定編解碼器

你也可以指定用來編碼音頻文件的確切的解碼器。這能幫助瀏覽器決定它是否能播放該內(nèi)容。由于你常常不知道究竟用什么解碼器，只簡(jiǎn)單地提供類型并讓瀏覽器自己做決定，通常是一個(gè)更好的主意。

如果你想引用某解碼器，你可以照下面這樣做：

<audio autoplay controls> 
<source src="myAudio.ogg" type='audio/ogg; codec="vorbis"'> 
</audio> 

注意解碼器是如何添加到type屬性中去的，特別要注意用到的引號(hào)，以及type和codec之間用分號(hào)隔開了。像指定視頻解碼器那樣，這里很容易犯下會(huì)使音頻不播放的格式化錯(cuò)誤。因此，如果你要明確地指定解碼器，一定要注意語法問題。

回歸傳統(tǒng)

并不是每個(gè)人都使用支持HTML5的瀏覽器。例如，Internet Explorer的老版本（IE8或者更低）仍然相當(dāng)流行。

為了支持正在用這些瀏覽器的用戶，你需要使用一個(gè)第三方插件比如Flash Player來嵌入音頻文件。正如在HTML5和本地多媒體到來前你需要做的那樣。

瀏覽器會(huì)無視它們不理解的信息，所以你的HTML5音頻和source元素會(huì)被例如IE8這樣的舊版瀏覽器完全忽略。舉例來說，你可能會(huì)使用以下代碼來給音頻文件添加鏈接：

<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> 

舊版瀏覽器會(huì)簡(jiǎn)單的顯示“Download the audio file”鏈接，而忽視其它內(nèi)容。

要通過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> 

舊版瀏覽器會(huì)顯示Flash Player和下載鏈接，因此用戶可以選擇怎樣訪問音頻。如果用戶沒有安裝Flash player，他們?nèi)匀豢梢酝ㄟ^下載鏈接訪問到你的音頻。注意，你可以使用與Flash Player相同的MP3音頻文件，因?yàn)樗耆心芰Σシ臡P3文件。

數(shù)字版權(quán)管理

正如我在第一部分中提醒的，HTML5當(dāng)前不支持?jǐn)?shù)字版權(quán)管理（DRM）。因此，如果你不想讓用戶下載你的音頻文件，那么對(duì)你而言，或許HTML5音頻不是一個(gè)正確的解決方案。HTML5會(huì)暴露你的音頻文件鏈接，所以它們是公開地提供給用戶訪問的內(nèi)容。

目前還沒有方法阻止用戶下載HTML5音頻內(nèi)容，雖然將來可能會(huì)有這樣的方法。要獲得更多有關(guān)HTML5和DRM的信息，請(qǐng)參閱W3C’s HTML FAQs on this topic。（這是一個(gè)有關(guān)HTML5視頻的討論，但其概念同樣適用于音頻內(nèi)容）。

下一步閱讀方向

如你所見，使用HTML5在你的網(wǎng)站中加入音頻是很簡(jiǎn)單的。你確實(shí)需要意識(shí)到一些瀏覽器是不支持HTML5的，因此一定要提供一個(gè)備用機(jī)制，以確保所有用戶都可以訪問到你的音頻內(nèi)容。

同樣記牢，任何你通過HTML5服務(wù)的音頻文件也能被任何人下載使用。因此，如果你想避免你的文件被下載及分享，那么HTML5音頻并不適合你。

本系列的第三部分，小編會(huì)介紹HTML5多媒體元素的自定義控制。