- 作者:admin
- 發表時間:2013-07-02 14:17:01
- 來源:未知
目前,WEB頁面上沒有標準的方式來播放音頻文件,大多數的音頻文件是使用插件來播放,而眾多瀏覽器都使用了不同的插件。而HTML5的到來,給我們提供了一個標準的方式來播放WEB中的音頻文件,用戶不再為瀏覽器升級諸如Adobe Flash、Apple QuickTime等播放插件,只需使用現代瀏覽器就可以聆聽任何可以發出聲音的WEB網站。
WEB中的Audio標簽
HTML5定義了一個新的元素用來指定標準的方式來插入音頻文件到web頁面中:標簽。使用audio標簽可以控制音頻的播放與停止,循環播放與播放次數設置,以及播放位置等等,詳情請看下表。
屬性 | 值 | 描述 |
autoplay | true | false | 如果是 true,則音頻在就緒后馬上播放。 |
controls | true | false | 如果是 true,則向用戶顯示控件,比如播放按鈕。 |
end | numeric value | 定義播放器在音頻流中的何處停止播放。默認地,聲音會播放到結尾。 |
loopend | numeric value | 定義在音頻流中循環播放停止的位置,默認是 end 屬性的值。 |
loopstart | numeric value | 定義在音頻流中循環播放的開始位置。默認是 start 屬性的值。 |
playcount | numeric value | 定義音頻片斷播放多少次。默認是 1。 |
src | url | 所播放音頻的 url。 |
start | numeric value | 定義播放器在音頻流中開始播放的位置。默認地,聲音在開頭進行播放。 |
目前支持audio標簽的瀏覽器有:
IE9,Firefox, Opera,Chrome和Safari都支持標簽。
注意:IE8和更早的版本,不支持標簽。
如何使用Audio
要在HTML5中播放音頻,需要在body中插入以下代碼:
你可以在和標簽之間插入文字內容,這樣如果瀏覽器不支持audio,那么會顯示這些文字。
也許你會問auto中怎么會包含3個source標簽呢?這是為了瀏覽器和音頻格式的兼容性,瀏覽器制造商并非都同意使用某一種音頻文件格式。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件,這是一種使用非壓縮格式且正在衰敗的標準。我們將每個視頻文件名放在單獨的標簽里,并且音頻容器中的所有源標簽都由構成,如下所示。那么,無論訪問者使用什么瀏覽器,它都將自動選擇所讀取的第一個文件類型,并為您播放聲音。
HTML5瀏覽器和音頻格式兼容性
音頻格式 | Chrome | Firefox | IE9 | Opera | Safari |
OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
此外,不同瀏覽器音頻空間外觀也不一樣。
HTML5 讓開發人員可以更輕松地提供大量WEB體驗。標簽是令人興奮的新添內容,不再需要外部音樂播放器,使音頻的提供像顯示圖像一樣簡單。有了基于標準的音頻控件和讓用戶更易于與聲音進行交互的新瀏覽器功能,你可以輕松的在WEB頁面上定制MP3播放器了。