掌握HTML5中的多媒體--音頻(audio)

使用音頻标簽<audio>

音頻标簽的使用和視訊是非常相似的：指定多個音頻檔案，浏覽器會播放其中支援的第一個。

1.       <audio src="audio.ogg" controls>

2.       你的浏覽器不支援<audio>标簽.

3.      

</audio>

Figure 5列出了所有<audio>可用的屬性. 因為不需要像視訊播放器那樣顯示整個控件，是以高、低和預覽圖(poster)都不再需要了。

Figure 5

音頻标簽<audio>的屬性

Attribute

Value

Description

 Autoplay

autoplay

如果指定, 音頻會在準備好後立即播放.

 Controls

controls

顯示播放控制工具欄..

 Loop

loop

如果指定，則循環播放.

 Preload

preload

如果指定，音頻會在加頁面加載過程中被加載。當Autoplay被指定時，會被忽略。

 Src

url

目标音頻的URL.

和視訊<video>标簽一樣，你可以指定多個檔案，浏覽器會播放其中支援的第一個檔案。你也可以指定一個回退(fallback)資訊以供浏覽器不支援<audio>标簽時顯示。下面是一個簡單的例子:

1.       <audio controls autoplay>

2.          <source src="audio1.ogg" type="audio/ogg" />

3.          <source src="audio1.mp3" type="audio/mpeg" />

4.           你的浏覽器不支援<audio>标簽.

5.      

總結

目前在HTML5多媒體方面最大的問題是你必須為不同的浏覽器提供不同格式的檔案，不過它的應用也是大勢所趨。以下是一些很棒的參考内容:

<a href="http://www.w3.org/TR/html5/video.html">http://www.w3.org/TR/html5/video.html</a>

<a href="http://dev.w3.org/html5/spec/Overview.html">http://dev.w3.org/html5/spec/Overview.html</a>

<a href="http://w3schools.com/html5/default.asp">http://w3schools.com/html5/default.asp</a>

<a href="http://html5test.com/">http://html5test.com/</a>

<a href="http://caniuse.com/">http://caniuse.com/</a>

作者:Jason Beres