HTML5 Audio標籤方法和函數API介紹

文章目錄：

• audio經常使用屬性

• audio音樂格式的支持

• audio屬性

• 參數說明

最近在搞audio方面的h5頁面，遇到一些坑，但願這篇文章對你們有所幫助。

audio經常使用屬性

那麼首先來看一下audio標籤中的一些經常使用屬性：

屬性	屬性值	註釋
src	url	播放的音樂的url地址（火狐只支持ogg的音樂，而IE9只支持MP3格式的音樂。chrome貌似全支持）
preload	preload	預加載（在頁面被加載時進行加載或者說緩衝音頻），若是使用了autoplay的話那麼該屬性失效。
loop	loop	循環播放
controls	controls	是否顯示默認控制條（控制按鈕）
autoplay	autoplay	自動播放

audio音樂格式的支持

來看下對於音樂格式的支持：

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

audio可經過new來建立。也能夠經過用document來獲取。

//經過new關鍵字來建立Audio對象
var Music = new Audio("test.mp3");
//經過document來獲取已經存在的Audio對象
var Music = document.getElementById("audio");
//固然這裏也能夠使用document.getElementsByClassName('className')等其餘的方法來獲取。
而後咱們來看下api所提供的對audio標籤操做的一些屬性和方法

audio屬性

屬性	註釋
duration	獲取媒體文件的總時長，以s爲單位，若是沒法獲取，返回NaN
paused	若是媒體文件被暫停，那麼paused屬性返回true，反之則返回false
ended	若是媒體文件播放完畢返回true
muted	用來獲取或設置靜音狀態。值爲boolean
volume	控制音量的屬性值爲0-1;0爲音量最小，1爲音量最大
startTime	返回起始播放時間
error	返回錯誤代碼，爲uull的時候爲正常。不然能夠經過Music.error.code來獲取具體的錯誤代碼： 1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效
currentTime	用來獲取或控制當前播放的時間，單位爲s。
currentSrc	以字符串形式返回正在播放或已加載的文件

那麼來看下這邊經常使用的控制用的函數：

函數	做用
load()	加載音頻、視頻軟件
play()	加載並播放音頻、視頻文件或從新播放暫停的的音頻、視頻
pause()	暫停出於播放狀態的音頻、視頻文件
canPlayType(obj)	測試是否支持給定的Mini類型的文件

參數說明

關於audio標籤API中的經常使用事件。
首先綁定事件的話能夠經過js中的addEventListener方法來綁定事件。
Music.addEventListener(string:事件類型/名稱,function:具體事件促發時的執行,boolean:是否使用捕捉,默認爲false);

一、type:String 事件的類型。
二、listener:Function 偵聽到事件後處理事件的函數。 此函數必須接受 Event 對象做爲其惟一的參數，而且不能返回任何結果，如如下示例所示： 訪問修飾符 function 函數名(evt:Event):void
三、useCapture:Boolean (default = false)

這裏牽扯到「事件流」的概念。偵聽器在偵聽時有三個階段：捕獲階段、目標階段和冒泡階段。順序爲：捕獲階段(根節點到子節點檢查是否調用了監聽 函數)→目標階段(目標自己)→冒泡階段(目標自己到根節點)。此處的參數肯定偵聽器是運行於捕獲階段、目標階段仍是冒泡階段。 若是將 useCapture 設置爲 true，則偵聽器只在捕獲階段處理事件，而不在目標或冒泡階段處理事件。 若是useCapture 爲 false，則偵聽器只在目標或冒泡階段處理事件。

要在全部三個階段都偵聽事件，請調用兩次 addEventListener，一次將 useCapture 設置爲 true，第二次再將useCapture 設置爲 false。

經常使用audio的事件：

事件名稱	事件做用
loadstart	客戶端開始請求數據
progress	客戶端正在請求數據（或者說正在緩衝）
play	play()和autoplay播放時
pause	pause()方法促發時
ended	當前播放結束
timeupdate	當前播放時間發生改變的時候。播放中經常使用的時間處理哦
canplaythrough	歌曲已經載入徹底完成
canplay	緩衝至目前可播放狀態。