HTML5 Audio標簽方法和函數API介紹
最近想弄一個類似在線播放MP3的應用，剛開始想用flash播放器，但是已經很就沒有弄flash了，用起來很老火，於是想到了HTML5的audio標簽也可以播放音樂，在這里就介紹一下HTML5 Audio標簽方法和函數API。
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);
參數說明
1、type:String 事件的類型。
2、listener:Function 偵聽到事件后處理事件的函數。 此函數必須接受 Event 對象作為其唯一的參數，並且不能返回任何結果，如以下示例所示： 訪問修飾符 function 函數名(evt:Event):void
3、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 | 緩沖至目前可播放狀態。 |
上面包括HTML5 Audio標簽的方法，屬性和函數api對於基本的應用功能已足夠滿足，當然您還需要一點服務器的知識幫您去構建一個后台。