簡單例項:
<api說明:1.如果需要顯示快取進度,可以參考:html5 media事件audio
id="myaudio"
>
audio
>
<
script
>
varmyaudio
=document.getelementbyid(
'myaudio');
myaudio.src ='
../content/audio/海闊天空.***';
myaudio.play();
myaudio.loop
=true
; myaudio.preload
=true
; myaudio.currenttime
script
>
2.不能控制音訊的二進位制資料,如果需要處理二進位制音訊資料,參考html5 webaudioapi簡介(一)
唯讀屬性paused-----判斷是否已經暫停,返回true/false更多屬性audiotracks----返回表示可用音訊滾到的audiotracklist物件。error----在發生了錯誤後,返回錯誤**可控制屬性src----指定音訊的檔案位置
preload----是否預載入
controls----顯示或隱藏使用者控制介面
muted------設定是否靜音
volume ----在0.0到1.0間的音量值,或查詢當前音量值方法pause()---暫停
canplaytype(obj) ----測試飯後指定指定的mime型別的檔案
事件
loadstart ---客戶端開始請求資料
pause-----pause()方法觸發時
canplaythrough---歌曲已經載入完成
controller---返回表示音訊大年**控制器的mediacontroller物件。
crossorigin---設定或返回音訊的cors設定
defaultmuted---設定或返回音訊預設是否靜音
mediagroup---設定或返回音訊叔叔的美肌組合的名稱
networkstate---返回音訊的當前網路狀態
seekable---返回標識音訊可定址不煩的timeranges物件
seeking---返回使用者當前收正在音訊中進行查詢。
texttracks---返回標識文字滾到的texttracklist物件
更多方法
getstartdate()----返回新的date物件,表示當前時間線偏移量。
addtexttrack()----想音訊新增新的文字軌道。
更多參考:
例項1:
<js**:style
>
#volumeslider .slider-selection
style
>
<
div
class
="container"
>
<
p>../content/audio/海闊天空.***
p>
<
button
class
="btn btn-primary"
id="playbtn"
>
<
i class
="glyphicon glyphicon-play"
>
i>
button
>
<
button
class
="btn btn-info"
id="mutedbtn"
>
<
i class
="glyphicon glyphicon-volume-down"
>
i>
button
>
<
button
class
="btn btn-danger"
id="changebtn"
>切換歌曲
button
>
<
div
class
="form-group"
>
<
label
class
="control-label"
>音量:
label
>
<
input
class
="form-control"
id="volume"
data-slider-id
="volumeslider"
data-slider-min
="0"
data-slider-max
="100"
data-slider-step
="1"
/>
div>
div>
<
audio
id="myaudio"
>
audio
>
var currentfile = '../content/audio/海闊天空.***';顯示結果://判斷瀏覽器是否支援audio
if (!window.htmlaudioelement)
else
myaudio.play();
icon.removeclass('glyphicon-play').addclass('glyphicon-pause');
} else
});//
靜音按鈕
$('#mutedbtn').click(function
() );
//音量按鈕
$('#volume').slider().on('change', function
(e) );
$('#changebtn').click(function
() );
//監聽事件
myaudio.oncanplay = function
() myaudio.onplay = function
() myaudio.onpause = function
() myaudio.onprogress = function
() myaudio.ontimeupdate = function
(e)
}
HTML5 標籤API整理 一
簡單例項 audio id myaudio audio script varmyaudio document.getelementbyid myaudio myaudio.src content audio 海闊天空.myaudio.play myaudio.loop true myaudio.pr...
HTML5標籤整理一
標籤定義超連結,用於從乙個頁面鏈結到另乙個頁面。元素最重要的屬性是 href 屬性,它指定鏈結的目標。在所有瀏覽器中,鏈結的預設外觀是 屬性值描述 charset char encoding html 5 中不支援。coords coordinates html 5 中不支援。href url鏈結的...
HTML5標籤整理三
標籤定義聲音,比如 或其他音訊流。一段簡單的 html 5 音訊 您的瀏覽器不支援 audio 標籤。可以在開始標籤和結束標籤之間放置文字內容,這樣老的瀏覽器就可以顯示出不支援該標籤的資訊。屬性值描述 autoplay autoplay controls controls loop loop pre...