iT邦幫忙

DAY 1
1

HTML5 & CSS3系列 第 1

30天分享(3) - HTML5 <audio> 標籤

HTML5 新增了 <audio> 標籤,讓網頁能很容易的載入音訊檔,不需要下載外掛播放程式,

不過每個瀏覽器支援的檔案格式不同,顯示的使用者介面也不一樣,

最好的檔案格式是 MP3 ,因為只有 Opera 瀏覽器沒有支援,其他的瀏覽器都支援。

<audio> 支援以下三種檔案格式 :

MP3 : IE , Firefox , Chrome , Safari

Wav : 除了IE以外全支援

Ogg :IE 跟 Safari 不支援

要使用 <audio> 標籤,必須在其中放入 <source> 標籤,才能將音訊檔置入,

使用的程式碼內容如下 :

<audio controls autoplay loop>
<source src="21022646221.ogg">
<source src="21022646221.mp3">
你的瀏覽器不支援 HTML5 音訊格式。
</audio>

<audio> 標籤裡的屬性,controls 代表是否要顯示使用者控制介面,如果不希望顯示可以拿掉,

autoplay 則代表當音訊檔讀取完畢是否會自動播放,loop 是影片播完會自動重新播放,

其中 <source> 標籤可以多組,會由上至下開始讀取,如果第一個檔案瀏覽器不支援,會以此類推讀取下列項目,

最後當所有的檔案瀏覽器都不支援,可以新增最後一行文字,使所有的瀏覽器都有相應的回應讓使用者明白目前的狀態,

最後附上一張 <audio> 標籤顯示的使用者控制介面(chrome版本)


下一篇
30天分享(4) - HTML5 <canvas> 標籤
系列文
HTML5 & CSS328
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言