站長資訊網HTML5 提供了播放音頻文件的標準。
互聯網上的音頻
直到現在，仍然不存在一項旨在網頁上播放音頻的標準。
今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素。
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.
注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.
html5<audio>是 HTML 5 的新標簽，定義聲音，比如音樂或其他音頻流。
HTML 5 <audio> 標簽
HTML5 audio讓音樂東山再起
HTML5 運用aduio標簽打造音樂播放器
可以在開始標簽和結束標簽之間放置文本內容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto" src="http://demo.mimvp.com/html5/take_you_fly.mp3"> 你的瀏覽器不支持audio標簽 </audio>
|
屬性 |
值 |
描述 |
|
autoplay |
autoplay |
如果出現該屬性，則音頻在就緒后馬上播放。 |
|
controls |
controls |
如果出現該屬性，則向用戶顯示控件，比如播放按鈕。 |
|
loop |
loop |
如果出現該屬性，則每當音頻結束時重新循環開始播放。 |
|
preload |
preload |
如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。 如果使用 “autoplay”，則忽略該屬性。 |
|
src |
url |
要播放的音頻的 URL。也可以使用<source>標簽來設置音頻。 |
HTML5 Audio標簽能夠支持wav, mp3, ogg, acc, webm等格式，但有個很重要的音樂文件格式midi(擴展名mid)卻在各大瀏覽器中都沒有內置的支持。不是所有的瀏覽器都支持MP3OGG之類的，每個瀏覽器支持的格式都是不一樣的。
瀏覽器和音頻兼容性
瀏覽器制造商并非都同意使用某種音頻文件格式。對于圖像，PNG、JPEG 或 GIF 格式的文件在任何瀏覽器上都能加載到您的網頁里。遺憾的是，音頻文件并非如此。表 1 展示了網頁中可以使用的音頻文件格式，但是并非所有格式都能用于所有瀏覽器。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件，這是一種使用非壓縮格式且正在衰敗的標準。
HTML5瀏覽器和音頻格式兼容性
|
音頻格式 |
Chrome |
Firefox |
IE9 |
Opera |
Safari |
|
OGG |
支持 |
支持 |
支持 |
不支持 |
不支持 |
|
MP3 |
支持 |
不支持 |
支持 |
不支持 |
支持 |
|
WAV |
不支持 |
支持 |
不支持 |
支持 |
不支持 |
沒有一種通用的文件格式讓每個瀏覽器都使用單個文件格式意味著至少有 2/5 的瀏覽器無法播放某些聲音。這不是無法在單一音頻標準中達成一致的瀏覽器制造商不妥協的問題，而是涉及專利權和特許權使用費的法律和財務問題。不受軟件專利限制的 OGG 格式旨在一勞永逸地解決這個問題。然而，在撰寫本文時，Opera 和 Safari 都不支持 OGG。與 OGG 格式的文件相比，可用的 WAV 和 MP3 文件數量要更多，因此毫無疑問，瀏覽器制造商考慮到了這一點。MP3 作為事實的標準是個很好的解決方案。
解決方案：使用三種文件類型和<audio>標簽
鑒于目前的狀況，您可能認為目前還不是在 HTML5 頁面上使用音頻的黃金時刻。在某些方面可能的確如此，但是 HTML5 提供了一個解決方案，使您喜歡的瀏覽器能夠找到一種兼容的格式。
與 <audio> 標簽結合使用時，<source> 標簽可以嵌套在 <audio> 容器內。假設您是一個瓦格納迷，想在 HTML5 網頁上聽他的歌劇Ride of the Valkyries（《女武神》）。首先，您需要獲得三種文件類型的音樂，即 OGG、MP3 和 WAV。將這些音樂文件與 HTML5 文件放在同一個文件夾內。然后，將每個文件名放在單獨的 <source> 標簽里，并且音頻容器中的所有源標簽都由<audio></audio> 構成，如下所示。
<audio controls> <source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” /> <source src=”http://demo.mimvp.com/html5/take_you_fly.mp3″ /> <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” /> </audio>
無論訪問者使用什么瀏覽器，它都將自動選擇所讀取的第一個文件類型，并為您播放聲音。
瀏覽器音頻控件：沒有兩個是完全相同的
一旦您決定要在網站上提供音頻，將面臨一個有趣的設計選擇。每個瀏覽器都有與眾不同的外觀，看起來像是有意識地故意使其與眾不同。下面的圖 1 展示了這些瀏覽器控件的外觀。
圖1：不同瀏覽器上的音頻控件
除了 Chrome 瀏覽器外，所有瀏覽器都有開始/暫停控件、進度條、滑塊、播放秒數、音量/靜音控件，還顯示聲音文件的總秒數。使用HTML5 標準和瀏覽器支持，開發人員可以相信用戶將擁有與 HTML5 音頻類似的體驗，因為瀏覽器控件是類似的。您還可以使用 Flash 和 Silverlight 等插件創建控件，但是對于不同的用戶，體驗可能會有所不同。
某些瀏覽器（如 IE9）甚至有自己的聲音控制條，在瀏覽器本身之外運行。用戶打開有聲音的任何網站時，他們可以從 Windows 任務欄控制聲音，并能夠預覽當前正在播放的聲音。
html代碼(隱藏播放控件)
<audio autoplay="autoplay"> <source src="demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg"> </audio>
代碼演示(隱藏播放控件)
<audio autoplay="autoplay" controls="controls"> <source src="demo.mimvp.com/html5/take_you_fly.mp3" type="audio/mpeg"> </audio>
