close

html5.jpg

Web 上的音頻

直到現在,仍然不存在一項旨在網頁上播放音頻的標準。

今天,大多數音頻是通過插件(比如Flash)來播放的。然而,並非所有瀏覽器都擁有同樣的插件。

HTML5 規定了一種通過audio 元素來包含音頻的標準方法。

audio 元素能夠播放聲音文件或者音頻流。


音頻格式

當前,audio 元素支持三種音頻格式:

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

如何工作

如需在HTML5 中播放音頻,您所有需要的是:

<audio src="song.ogg" controls="controls">
</audio>
	

control 屬性供添加播放、暫停和音量控件。

<audio> 與</audio> 之間插入的內容是供不支持audio 元素的瀏覽器顯示的:

實例

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
	

上面的例子使用一個Ogg 文件,適用於Firefox、Opera 以及Chrome 瀏覽器。

要確保適用於Safari 瀏覽器,音頻文件必須是MP3 或Wav 類型。

audio 元素允許多個source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式:


實例

<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>
	

Internet Explorer

Internet Explorer 8 不支持audio 元素。在IE 9 中,將提供對audio 元素的支持。

<audio> 標籤的屬性

屬性 描述
autoplay autoplay 如果出現該屬性,則音頻在就緒後馬上播放。
controls controls 如果出現該屬性,則向用戶顯示控件,比如播放按鈕。
loop loop 如果出現該屬性,則每當音頻結束時重新開始播放。
preload preload

如果出現該屬性,則音頻在頁面加載時進行加載,並預備播放。

如果使用"autoplay",則忽略該屬性。

src url 要播放的音頻的URL。
arrow
arrow
    創作者介紹
    創作者 設計密碼工作室 的頭像
    設計密碼工作室

    Design Code 設計密碼

    設計密碼工作室 發表在 痞客邦 留言(0) 人氣()