HTML5中audio標籤的使用

weixin_34377065發表於2016-07-23

HTML5中的新元素標籤
src:音訊檔案路徑。
autobuffer:設定是否在頁面載入時自動緩衝音訊。
autoplay:設定音訊是否自動播放。
loop:設定音訊是否要迴圈播放。
controls:屬性供新增播放、暫停和音量控制元件。

這些屬性和<video>元素標籤的屬性很類似

如何工作:

<audio src="song.mp3"></audio>

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

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

常用的控制函式:
1.load():載入音訊、視訊軟體
2.play():載入並播放音訊、視訊檔案或重新播放暫停的的音訊、視訊
3.pause():暫停出於播放狀態的音訊、視訊檔案
4.canPlayType(obj):測試是否支援給定的Mini型別的檔案

可指令碼控制的屬性值:
1.autoplay:自動播放已經載入的的媒體檔案
2.loop為true:的時候則設定為自動播放
3.currentTime:以s為單位返回從開始播放到目前所花的時間
4.controls:顯示或者隱藏使用者控制介面
5.volume:音量值,從0.0至1.0之間
6.muted:設定是否靜音
7.autobuffer:是否進行緩衝載入

Audio 物件屬性

屬性                        描述

audioTracks 返回表示可用音訊軌道的 AudioTrackList 物件。

autoplay 設定或返回是否在就緒(載入完成)後隨即播放音訊。

buffered 返回表示音訊已緩衝部分的 TimeRanges 物件。

controller 返回表示音訊當前媒體控制器的 MediaController 物件。

controls 設定或返回音訊是否應該顯示控制元件(比如播放/暫停等)。

crossOrigin 設定或返回音訊的 CORS 設定。

currentSrc 返回當前音訊的 URL。

currentTime 設定或返回音訊中的當前播放位置(以秒計)。

defaultMuted 設定或返回音訊預設是否靜音。

defaultPlaybackRate 設定或返回音訊的預設播放速度。

duration 返回音訊的長度(以秒計)。

ended 返回音訊的播放是否已結束。

error 返回表示音訊錯誤狀態的 MediaError 物件。

loop 設定或返回音訊是否應在結束時再次播放。

mediaGroup 設定或返回音訊所屬媒介組合的名稱。

muted 設定或返回是否關閉聲音。

networkState 返回音訊的當前網路狀態。

paused 設定或返回音訊是否暫停。

playbackRate 設定或返回音訊播放的速度。

played 返回表示音訊已播放部分的 TimeRanges 物件。

preload 設定或返回音訊的 preload 屬性的值。

readyState 返回音訊當前的就緒狀態。

seekable 返回表示音訊可定址部分的 TimeRanges 物件。

seeking 返回使用者當前是否正在音訊中進行查詢。

src 設定或返回音訊的 src 屬性的值。

textTracks 返回表示可用文字軌道的 TextTrackList 物件。

volume 設定或返回音訊的音量。

Audio 物件方法

方法 描述
addTextTrack() 向音訊新增新的文字軌道。

canPlayType() 檢查瀏覽器是否能夠播放指定的音訊型別。

fastSeek() 在音訊播放器中指定播放時間。

getStartDate() 返回新的 Date 物件,表示當前時間線偏移量。

load() 重新載入音訊元素。

play() 開始播放音訊。

pause() 暫停當前播放的音訊。

相關文章