HTML5音訊audio詳解

業餘草發表於2014-11-27
HTML音訊
直到現在，仍然不存在一項旨在網頁上播放音訊的標準。
目前，大多數音訊是通過外掛（比如 Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的外掛。
HTML5 規定了一種通過 audio 元素來包含音訊的標準方法。
audio 元素能夠播放聲音檔案或者音訊流。

當前，audio 元素支援三種音訊格式：

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis   √ √ √  
MP3 √     √ √
Wav   √ √   √
開發例子原始碼如下：

<!DOCTYPE HTML>
<html>
<body>
Internet Explorer 8 不支援 audio 元素。在 IE 9 中，對 audio 元素的支援。
<audio controls="controls" autoplay="autoplay">
  <source src="http://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
  <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
你的瀏覽器不支援html5的audio標籤
</audio>
</body>
</html>
解釋：
1、control 屬性供新增播放、暫停和音量控制元件。
2、<audio> 與 </audio> 之間插入的內容是供不支援 audio 元素的瀏覽器顯示的。
3、audio 元素允許多個 source 元素。source 元素可以連結不同的視訊檔案。瀏覽器將使用第一個可識別的格式
支援的部分屬性列舉：
4、autoplay 是否自動播放。
屬性 值 描述
autoplay autoplay 如果出現該屬性，則音訊在就緒後馬上播放。
controls controls 如果出現該屬性，則向使用者顯示控制元件，比如播放按鈕。
loop loop 如果出現該屬性，則每當音訊結束時重新開始播放。
preload preload

如果出現該屬性，則音訊在頁面載入時進行載入，並預備播放。

如果使用 "autoplay"，則忽略該屬性。
src url 要播放的音訊的 URL。
歡迎大家關注我的部落格！如有疑問,請加QQ群：135430763共同學習！

相關文章