瀏覽器雖然發展很快，但是瀏覽器中的標準還是不完善，在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 | √ | √ | √ |
二、如何使用
<!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以上瀏覽器）
control屬性顯示控制台
<audio> 與 </audio> 之間插入的內容是供不支援 audio 元素的瀏覽器顯示的
要運行其他瀏覽器也支援就要使用如下方式
<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。 |
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
