掌握HTML5中的多媒體–音訊(audio)

horky發表於2012-08-08
HTML音訊

使用音訊標籤<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.      
</audio>

 

總結

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

參考:掌握HTML5中的多媒體–視訊(video)

原文地址:Working with Media in HTML5

作者:Jason Beres

轉載請註明出處:http://blog.csdn.net/horkychen


相關文章