html5中audio的詳細使用

標籤：無法   介面   cti   放音   幸好   rdl   margin   瀏覽器   art   

html5的audio功能上已經非常強大，回放，跳轉，緩衝等以前只能用flash才能實現的功能，html5的audio都能輕鬆搞定

最近的一個項目使用到了這個功能，把我使用的情況寫下來，供大家參考, 因為我需要的功能很簡單，所以做的不複雜，如果要使用更多的功能，可以參考下面的api，能實現很多高大上的功能

 

audio 相關的  api

<audio src=”音訊地址”>備用（當瀏覽器不支援audio時顯示的內容）</audio>

控制函數功能說明

• load()   載入音頻、視頻軟體，通常不必調用，除非是動態產生的元素，用來在播放前預先載入
• play()    載入並播放音頻、視頻檔案，除非檔案已經暫停在其他位置，否則預設重頭開始播放
• pause() 暫停處於播放狀態的音頻、視頻檔案

audio 的唯讀媒體特性有：

唯讀屬性屬性說明

• duration   擷取媒體檔案的播放時間長度，以s為單位，如果無法擷取，則為NaN
• paused     如果媒體檔案被暫停，則返回true，否則返回false
• ended       如果媒體檔案播放完畢，則返回true
• startTime  返回起始播放時間，一般是0.0，除非是緩衝過的媒體檔案，並一部分內容已經不在緩衝區
• error          在發生了錯誤後返回的錯誤碼
• currentSrc  以字串形式返回現正播放或已載入的檔案，對應於瀏覽器在source元素中選擇的檔案

 

audio 可指令碼控制的特性值：

• autoplay       自動播放已經載入的的媒體檔案，或查詢是否已設定為autoplay
• loop              將媒體檔案設定為迴圈播放，或查詢是否已設定為loop
• currentTime 以s為單位返回從開始播放至目前所花的時間，也可設定currentTime的值來跳轉到特定位置
• controls        顯示或者隱藏使用者控制介面
• volume         在0.0到1.0間設定音量值,或查詢當前音量值
• muted           設定是否靜音
• autobuffer     媒體檔案播放前是否進行緩衝載入，如果設定了autoplay，則忽略此特性

對於這些屬性，主流的瀏覽器都支援。可是別以為就沒有了相容性，在音頻播放流中，有兩個陣營。firefox 和 opera 支援 ogg 音頻，safari 和 ie 支援 mp3.幸好Google的chrome都支援。

 

 

<div id="audioControl"><div class="play"><span id="play">Play</span></div></div><audio id="media" src="test.mp3"></audio>

 

var media = $(‘#media‘)[0];var audioTimer = null;//綁定播放暫停控制$(‘.play‘).bind(‘click‘, function() {    playAudio();}); //播放暫停切換function playAudio() {    if(media.paused) {        play();    } else {        pause();    }}//播放function play() {    media.play();    $(‘#play‘).html(‘Pause‘);}//暫停function pause() {    media.pause();    $(‘#play‘).html(‘Play‘);}

html5中audio的詳細使用