HTML5多媒體組件的使用——第二部分：音頻

在這個”使用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編解碼器受托者提供支持，但來自蘋果和諾基亞的挑戰使其終止了該支持。如今的浏覽器，相比於支持視頻編解碼器而言，能支持更多的音頻編解碼 器，所以當你抉擇於該使用哪種音頻編解碼器時，你會有更多的選擇：

• 火狐支持Ogg Vorbis 和 WAV.
• Safari支持 MP3, AAC, WAV, 以及 MP4.
• Internet Explorer 9 支持 MP3, AAC, 和 MP4.