標籤：flash外掛程式 瀏覽器 it教育 程式員 相容性
本文為 兄弟連IT教育 機構官方 HTML5培訓 教程，主要介紹：HTML5移動開發之路（15）——HTML5中的音頻
瀏覽器雖然發展很快，但是瀏覽器中的標準還是不完善，在HTML4+CSS2+JS的前段開發中讓很多程式員頭疼的就是瀏覽器的相容性問題，音頻播放也一樣，直到現在，仍然不存在一項網頁上播放視頻和音訊標準。現在，在大多數瀏覽器中，音頻是通過外掛程式（比如:flash外掛程式）來播放的。然而，不是所有瀏覽器都具有這樣的外掛程式，所以對音訊播放造成了一定的麻煩。在HTML5的新標準中規定了一種通過audio元素來包含音訊標準方法，下面我們就來詳細的瞭解一下該標籤。
一、對音頻格式的支援
目前，audio元素支援三種音頻格式
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis √ √ √ MP3 √ √ √ Wav √ √ √
二、如何使用
[html] view plain copy
print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />
<!DOCTYPE html>
<html>
<body>
<audio src="http://www2.shengda.edu.cn/ytw/gbzx/photo/bgmusic.mp3" controls="controls">
您的瀏覽器不支援該HTML5標籤
</audio>
</body>
</html>
點擊開始按鈕，播放歌曲（用的是MP3格式，只適用於IE9以上及Chrome3.0以上瀏覽器）
650) this.width=650;" src="http://img.blog.csdn.net/20140112125932921?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />
control屬性顯示控制台
<audio> 與 </audio> 之間插入的內容是供不支援 audio 元素的瀏覽器顯示的
要運行其他瀏覽器也支援就要使用如下方式
[html] view plain copy
print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
三、audio標籤的屬性
屬性 值 描述 autoplay autoplay 如果出現該屬性，則音頻在就緒後馬上播放。 controls controls 如果出現該屬性，則向使用者顯示控制項，比如播放按鈕。 loop loop 如果出現該屬性，則每當音頻結束時重新開始播放。 preload preload 如果出現該屬性，則音頻在頁面載入時進行載入，並預備播放。
如果使用 "autoplay"，則忽略該屬性。
src url 要播放的音訊 URL。
HTML5移動開發之路（15）——HTML5中的音頻
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
