HTML5 Audio標(biāo)簽方法和函數(shù)API介紹

lmxdawn 發(fā)布于2019-08-20 16:42 / 2895人閱讀

摘要：偵聽(tīng)到事件后處理事件的函數(shù)。偵聽(tīng)器在偵聽(tīng)時(shí)有三個(gè)階段捕獲階段目標(biāo)階段和冒泡階段。順序?yàn)椴东@階段根節(jié)點(diǎn)到子節(jié)點(diǎn)檢查是否調(diào)用了監(jiān)聽(tīng)函數(shù)目標(biāo)階段目標(biāo)本身冒泡階段目標(biāo)本身到根節(jié)點(diǎn)。播放中常用的時(shí)間處理哦歌曲已經(jīng)載入完全完成緩沖至目前可播放狀態(tài)。

文章目錄：

audio常用屬性

audio音樂(lè)格式的支持

audio屬性

參數(shù)說(shuō)明

最近在搞audio方面的h5頁(yè)面，遇到一些坑，希望這篇文章對(duì)大家有所幫助。

audio常用屬性

那么首先來(lái)看一下audio標(biāo)簽中的一些常用屬性：

屬性	屬性值	注釋
src	url	播放的音樂(lè)的url地址（火狐只支持ogg的音樂(lè)，而IE9只支持MP3格式的音樂(lè)。chrome貌似全支持）
preload	preload	預(yù)加載（在頁(yè)面被加載時(shí)進(jìn)行加載或者說(shuō)緩沖音頻），如果使用了autoplay的話那么該屬性失效。
loop	loop	循環(huán)播放
controls	controls	是否顯示默認(rèn)控制條（控制按鈕）
autoplay	autoplay	自動(dòng)播放

audio音樂(lè)格式的支持

來(lái)看下對(duì)于音樂(lè)格式的支持：

音頻格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支持	支持	支持	不支持	不支持
MP3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支

audio可通過(guò)new來(lái)創(chuàng)建。也可以通過(guò)用document來(lái)獲取。

//通過(guò)new關(guān)鍵字來(lái)創(chuàng)建Audio對(duì)象
var Music = new Audio("test.mp3");
//通過(guò)document來(lái)獲取已經(jīng)存在的Audio對(duì)象
var Music = document.getElementById("audio");
//當(dāng)然這里也可以使用document.getElementsByClassName("className")等其他的方法來(lái)獲取。
然后我們來(lái)看下api所提供的對(duì)audio標(biāo)簽操作的一些屬性和方法

audio屬性

屬性	注釋
duration	獲取媒體文件的總時(shí)長(zhǎng)，以s為單位，如果無(wú)法獲取，返回NaN
paused	如果媒體文件被暫停，那么paused屬性返回true，反之則返回false
ended	如果媒體文件播放完畢返回true
muted	用來(lái)獲取或設(shè)置靜音狀態(tài)。值為boolean
volume	控制音量的屬性值為0-1;0為音量最小，1為音量最大
startTime	返回起始播放時(shí)間
error	返回錯(cuò)誤代碼，為uull的時(shí)候?yàn)檎！７駝t可以通過(guò)Music.error.code來(lái)獲取具體的錯(cuò)誤代碼： 1.用戶(hù)終止 2.網(wǎng)絡(luò)錯(cuò)誤 3.解碼錯(cuò)誤 4.URL無(wú)效
currentTime	用來(lái)獲取或控制當(dāng)前播放的時(shí)間，單位為s。
currentSrc	以字符串形式返回正在播放或已加載的文件

那么來(lái)看下這邊常用的控制用的函數(shù)：

函數(shù)	作用
load()	加載音頻、視頻軟件
play()	加載并播放音頻、視頻文件或重新播放暫停的的音頻、視頻
pause()	暫停出于播放狀態(tài)的音頻、視頻文件
canPlayType(obj)	測(cè)試是否支持給定的Mini類(lèi)型的文件

參數(shù)說(shuō)明

關(guān)于audio標(biāo)簽API中的常用事件。
首先綁定事件的話可以通過(guò)js中的addEventListener方法來(lái)綁定事件。
Music.addEventListener(string:事件類(lèi)型/名稱(chēng),function:具體事件促發(fā)時(shí)的執(zhí)行,boolean:是否使用捕捉,默認(rèn)為false);

1、type:String 事件的類(lèi)型。
2、listener:Function 偵聽(tīng)到事件后處理事件的函數(shù)。此函數(shù)必須接受 Event 對(duì)象作為其唯一的參數(shù)，并且不能返回任何結(jié)果，如以下示例所示：訪問(wèn)修飾符 function 函數(shù)名(evt:Event):void
3、useCapture:Boolean (default = false)

這里牽扯到“事件流”的概念。偵聽(tīng)器在偵聽(tīng)時(shí)有三個(gè)階段：捕獲階段、目標(biāo)階段和冒泡階段。順序?yàn)椋翰东@階段(根節(jié)點(diǎn)到子節(jié)點(diǎn)檢查是否調(diào)用了監(jiān)聽(tīng) 函數(shù))→目標(biāo)階段(目標(biāo)本身)→冒泡階段(目標(biāo)本身到根節(jié)點(diǎn))。此處的參數(shù)確定偵聽(tīng)器是運(yùn)行于捕獲階段、目標(biāo)階段還是冒泡階段。如果將 useCapture 設(shè)置為 true，則偵聽(tīng)器只在捕獲階段處理事件，而不在目標(biāo)或冒泡階段處理事件。如果useCapture 為 false，則偵聽(tīng)器只在目標(biāo)或冒泡階段處理事件。

要在所有三個(gè)階段都偵聽(tīng)事件，請(qǐng)調(diào)用兩次 addEventListener，一次將 useCapture 設(shè)置為 true，第二次再將useCapture 設(shè)置為 false。

常用audio的事件：

事件名稱(chēng)	事件作用
loadstart	客戶(hù)端開(kāi)始請(qǐng)求數(shù)據(jù)
progress	客戶(hù)端正在請(qǐng)求數(shù)據(jù)（或者說(shuō)正在緩沖）
play	play()和autoplay播放時(shí)
pause	pause()方法促發(fā)時(shí)
ended	當(dāng)前播放結(jié)束
timeupdate	當(dāng)前播放時(shí)間發(fā)生改變的時(shí)候。播放中常用的時(shí)間處理哦
canplaythrough	歌曲已經(jīng)載入完全完成
canplay	緩沖至目前可播放狀態(tài)。