資訊專欄INFORMATION COLUMN
摘要：偵聽到事件后處理事件的函數。偵聽器在偵聽時有三個階段捕獲階段目標階段和冒泡階段。順序為捕獲階段根節點到子節點檢查是否調用了監聽函數目標階段目標本身冒泡階段目標本身到根節點。播放中常用的時間處理哦歌曲已經載入完全完成緩沖至目前可播放狀態。
文章目錄：
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);
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 | 緩沖至目前可播放狀態。 |
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50792.html
摘要：偵聽到事件后處理事件的函數。偵聽器在偵聽時有三個階段捕獲階段目標階段和冒泡階段。順序為捕獲階段根節點到子節點檢查是否調用了監聽函數目標階段目標本身冒泡階段目標本身到根節點。播放中常用的時間處理哦歌曲已經載入完全完成緩沖至目前可播放狀態。 文章目錄： audio常用屬性 audio音樂格式的支持 audio屬性 參數說明 最近在搞audio方面的h5頁面，遇到一些坑，希望這篇文章對大...
摘要：偵聽到事件后處理事件的函數。偵聽器在偵聽時有三個階段捕獲階段目標階段和冒泡階段。順序為捕獲階段根節點到子節點檢查是否調用了監聽函數目標階段目標本身冒泡階段目標本身到根節點。播放中常用的時間處理哦歌曲已經載入完全完成緩沖至目前可播放狀態。 文章目錄： audio常用屬性 audio音樂格式的支持 audio屬性 參數說明 最近在搞audio方面的h5頁面，遇到一些坑，希望這篇文章對大...
摘要：尤其是喬布斯在年發布的一篇的文章。喬布斯在里面寫下了關于的一點看法，說明自己為什么不使用，談到關于的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。 今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進入主題之前我們先了解一下Flash與html5這兩種技術的時代背景與發展歷史。 1.前...
摘要：尤其是喬布斯在年發布的一篇的文章。喬布斯在里面寫下了關于的一點看法，說明自己為什么不使用，談到關于的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。 今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進入主題之前我們先了解一下Flash與html5這兩種技術的時代背景與發展歷史。 1.前...
閱讀 2577·2021-11-25 09:43
閱讀 1849·2021-09-22 15:26
閱讀 3697·2019-08-30 15:56
閱讀 1703·2019-08-30 15:55
閱讀 1889·2019-08-30 15:54
閱讀 806·2019-08-30 15:52
閱讀 3135·2019-08-29 16:23
閱讀 886·2019-08-29 12:43
