資訊專欄INFORMATION COLUMN
摘要：偵聽到事件后處理事件的函數(shù)。偵聽器在偵聽時(shí)有三個(gè)階段捕獲階段目標(biāo)階段和冒泡階段。順序?yàn)椴东@階段根節(jié)點(diǎn)到子節(jié)點(diǎn)檢查是否調(diào)用了監(jiān)聽函數(shù)目標(biāo)階段目標(biāo)本身冒泡階段目標(biāo)本身到根節(jié)點(diǎn)。播放中常用的時(shí)間處理哦歌曲已經(jīng)載入完全完成緩沖至目前可播放狀態(tài)。
文章目錄：
audio常用屬性
audio音樂格式的支持
audio屬性
參數(shù)說明
最近在搞audio方面的h5頁面，遇到一些坑，希望這篇文章對(duì)大家有所幫助。
audio常用屬性
那么首先來看一下audio標(biāo)簽中的一些常用屬性：
| 屬性 | 屬性值 | 注釋 |
| src | url | 播放的音樂的url地址（火狐只支持ogg的音樂，而IE9只支持MP3格式的音樂。chrome貌似全支持） |
| preload | preload | 預(yù)加載（在頁面被加載時(shí)進(jìn)行加載或者說緩沖音頻），如果使用了autoplay的話那么該屬性失效。 |
| loop | loop | 循環(huán)播放 |
| controls | controls | 是否顯示默認(rèn)控制條（控制按鈕） |
| autoplay | autoplay | 自動(dòng)播放 |
audio音樂格式的支持
來看下對(duì)于音樂格式的支持：
| 音頻格式 | Chrome | Firefox | IE9 | Opera | Safari |
| OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支 |
audio可通過new來創(chuàng)建。也可以通過用document來獲取。
//通過new關(guān)鍵字來創(chuàng)建Audio對(duì)象
var Music = new Audio("test.mp3");
//通過document來獲取已經(jīng)存在的Audio對(duì)象
var Music = document.getElementById("audio");
//當(dāng)然這里也可以使用document.getElementsByClassName("className")等其他的方法來獲取。
然后我們來看下api所提供的對(duì)audio標(biāo)簽操作的一些屬性和方法
audio屬性
| 屬性 | 注釋 |
| duration | 獲取媒體文件的總時(shí)長，以s為單位，如果無法獲取，返回NaN |
| paused | 如果媒體文件被暫停，那么paused屬性返回true，反之則返回false |
| ended | 如果媒體文件播放完畢返回true |
| muted | 用來獲取或設(shè)置靜音狀態(tài)。值為boolean |
| volume | 控制音量的屬性值為0-1;0為音量最小，1為音量最大 |
| startTime | 返回起始播放時(shí)間 |
| error | 返回錯(cuò)誤代碼，為uull的時(shí)候?yàn)檎?。否則可以通過Music.error.code來獲取具體的錯(cuò)誤代碼： 1.用戶終止 2.網(wǎng)絡(luò)錯(cuò)誤 3.解碼錯(cuò)誤 4.URL無效 |
| currentTime | 用來獲取或控制當(dāng)前播放的時(shí)間，單位為s。 |
| currentSrc | 以字符串形式返回正在播放或已加載的文件 |
那么來看下這邊常用的控制用的函數(shù)：
| 函數(shù) | 作用 |
| load() | 加載音頻、視頻軟件 |
| play() | 加載并播放音頻、視頻文件或重新播放暫停的的音頻、視頻 |
| pause() | 暫停出于播放狀態(tài)的音頻、視頻文件 |
| canPlayType(obj) | 測(cè)試是否支持給定的Mini類型的文件 |
參數(shù)說明
關(guān)于audio標(biāo)簽API中的常用事件。
首先綁定事件的話可以通過js中的addEventListener方法來綁定事件。
Music.addEventListener(string:事件類型/名稱,function:具體事件促發(fā)時(shí)的執(zhí)行,boolean:是否使用捕捉,默認(rèn)為false);
1、type:String 事件的類型。
2、listener:Function 偵聽到事件后處理事件的函數(shù)。 此函數(shù)必須接受 Event 對(duì)象作為其唯一的參數(shù)，并且不能返回任何結(jié)果，如以下示例所示： 訪問修飾符 function 函數(shù)名(evt:Event):void
3、useCapture:Boolean (default = false)
這里牽扯到“事件流”的概念。偵聽器在偵聽時(shí)有三個(gè)階段：捕獲階段、目標(biāo)階段和冒泡階段。順序?yàn)椋翰东@階段(根節(jié)點(diǎn)到子節(jié)點(diǎn)檢查是否調(diào)用了監(jiān)聽 函數(shù))→目標(biāo)階段(目標(biāo)本身)→冒泡階段(目標(biāo)本身到根節(jié)點(diǎn))。此處的參數(shù)確定偵聽器是運(yùn)行于捕獲階段、目標(biāo)階段還是冒泡階段。 如果將 useCapture 設(shè)置為 true，則偵聽器只在捕獲階段處理事件，而不在目標(biāo)或冒泡階段處理事件。 如果useCapture 為 false，則偵聽器只在目標(biāo)或冒泡階段處理事件。
要在所有三個(gè)階段都偵聽事件，請(qǐng)調(diào)用兩次 addEventListener，一次將 useCapture 設(shè)置為 true，第二次再將useCapture 設(shè)置為 false。
常用audio的事件：
| 事件名稱 | 事件作用 |
| loadstart | 客戶端開始請(qǐng)求數(shù)據(jù) |
| progress | 客戶端正在請(qǐng)求數(shù)據(jù)（或者說正在緩沖） |
| 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)。 |
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112029.html
摘要：偵聽到事件后處理事件的函數(shù)。偵聽器在偵聽時(shí)有三個(gè)階段捕獲階段目標(biāo)階段和冒泡階段。順序?yàn)椴东@階段根節(jié)點(diǎn)到子節(jié)點(diǎn)檢查是否調(diào)用了監(jiān)聽函數(shù)目標(biāo)階段目標(biāo)本身冒泡階段目標(biāo)本身到根節(jié)點(diǎn)。播放中常用的時(shí)間處理哦歌曲已經(jīng)載入完全完成緩沖至目前可播放狀態(tài)。 文章目錄： audio常用屬性 audio音樂格式的支持 audio屬性 參數(shù)說明 最近在搞audio方面的h5頁面，遇到一些坑，希望這篇文章對(duì)大...
摘要：偵聽到事件后處理事件的函數(shù)。偵聽器在偵聽時(shí)有三個(gè)階段捕獲階段目標(biāo)階段和冒泡階段。順序?yàn)椴东@階段根節(jié)點(diǎn)到子節(jié)點(diǎn)檢查是否調(diào)用了監(jiān)聽函數(shù)目標(biāo)階段目標(biāo)本身冒泡階段目標(biāo)本身到根節(jié)點(diǎn)。播放中常用的時(shí)間處理哦歌曲已經(jīng)載入完全完成緩沖至目前可播放狀態(tài)。 文章目錄： audio常用屬性 audio音樂格式的支持 audio屬性 參數(shù)說明 最近在搞audio方面的h5頁面，遇到一些坑，希望這篇文章對(duì)大...
摘要：尤其是喬布斯在年發(fā)布的一篇的文章。喬布斯在里面寫下了關(guān)于的一點(diǎn)看法，說明自己為什么不使用，談到關(guān)于的一些問題，比如開放性，安全性，對(duì)于設(shè)備續(xù)航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。 今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進(jìn)入主題之前我們先了解一下Flash與html5這兩種技術(shù)的時(shí)代背景與發(fā)展歷史。 1.前...
摘要：尤其是喬布斯在年發(fā)布的一篇的文章。喬布斯在里面寫下了關(guān)于的一點(diǎn)看法，說明自己為什么不使用，談到關(guān)于的一些問題，比如開放性，安全性，對(duì)于設(shè)備續(xù)航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。 今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進(jìn)入主題之前我們先了解一下Flash與html5這兩種技術(shù)的時(shí)代背景與發(fā)展歷史。 1.前...
閱讀 1131·2021-11-19 09:40
閱讀 975·2021-11-12 10:36
閱讀 1274·2021-09-22 16:04
閱讀 3118·2021-09-09 11:39
閱讀 1277·2019-08-30 10:51
閱讀 1891·2019-08-30 10:48
閱讀 1232·2019-08-29 16:30
閱讀 476·2019-08-29 12:37
