HTML5 標籤API整理(一)

 簡單實例：

    <audio id="myAudio"></audio>
    <script>
        var myAudio = document.getElementById('myAudio');
        myAudio.src = '../content/audio/海闊天空.mp3';
        myAudio.play();
        myAudio.loop = true;
        myAudio.preload = true;
        myAudio.currentTime
    </script>

Api說明：

1.若是須要顯示緩存進度，能夠參考：HTML5 Media事件

2.不能控制音頻的二進制數據，若是須要處理二進制音頻數據，參考HTML5 WebAudioAPI簡介(一)

只讀屬性
duration ---獲取媒體文件的播放時長，以s爲單位，若是沒法獲取則爲NaN，當觸發canplay事件後就能夠獲取當前總長度
startTime---返回起始播放時間，通常是0.0,除非是緩衝過的媒體文件，並一部份內容已經再也不緩衝區(此屬性好像已經不可用)
paused-----判斷是否已經暫停，返回true/false
ended-----判斷是否已經播放完畢，返回true/false
error----在發生了錯誤後，返回錯誤代碼
currentSrc --以字符串的形式發揮正在播放或已經加載的文件，對應瀏覽器在source元素中選擇的文件
buffered---獲取當前緩衝區大小，返回TimeRanges對象，點擊更多參考

可控制屬性
src----指定音頻的文件位置
autoplay---是否自動播放
preload----是否預加載
loop------是否循環播放
controls----顯示或隱藏用戶控制界面
autobuffer---媒體文件播放前是否進行緩衝加載，若是設置了autoplay，則忽略此特性(此屬性好像已經不可用)
muted------設置是否靜音
volume ----在0.0到1.0間的音量值，或查詢當前音量值
currentTime--以s爲單位返回從開始播放到目前所花的時間，也可設置currentTime的值來跳轉到特定位置

方法
load() ---加載音頻、視頻軟件
paly() ---播放
pause()---暫停
canPlayType(obj) ----測試飯後指定指定的Mime類型的文件

事件
loadstart ---客戶端開始請求數據
progress----正在播放的時候不停觸發，若是暫停不會觸發，觸發的時間間隔比較大
play------play()和autopaly播放時，相似事件onplaying
pause-----pause()方法觸發時
ended-----當結束播放時
timeupdate----當前播放時間發生改變的時候，播放中經常使用的時間處理，若是暫停不會觸發，觸發的時間間隔比較小
canplaythrough---歌曲已經載入完成
canplay -----緩衝至可播放狀態，相似事件onloadedmetadata
onloadedmetadata----當元數據（好比分辨率和時長）被加載時運行的腳本

 更多屬性

audioTracks----返回表示可用音頻滾到的AudioTrackList對象。

controller---返回表示音頻大年媒體控制器的MediaController對象。

crossOrigin---設置或返回音頻的CORS設置

defaultMuted---設置或返回音頻默認是否靜音

defaultPlaybackRate---設置或返回音頻的默認播放速度

mediaGroup---設置或返回音頻叔叔的美肌組合的名稱

networkState---返回音頻的當前網絡狀態

playbackRate---設置或返回音頻的播放速度。

seekable---返回標識音頻可尋址不煩的TimeRanges對象

seeking---返回用戶當前收正在音頻中進行查找。

textTracks---返回標識文本滾到的TextTrackList對象

 

更多方法

load()----從新加載音頻元素

getStartDate()----返回新的Date對象，表示當前時間線偏移量。

fastSeek()---在音頻播放器中指定播放時間。

addTextTrack()----想音頻添加新的文本軌道。

更多參考：http://caibaojian.com/html5-audio.html

實例1：

    <style>
        #volumeSlider .slider-selection {
           background:#bababa;
        }
    </style>
    <div class="container">
        <p>../content/audio/海闊天空.mp3</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>

js代碼：

var currentFile = '../content/audio/海闊天空.mp3';
//判斷瀏覽器是否支持audio
if (!window.HTMLAudioElement) {
alert('您的瀏覽器不支持audio標籤');
} else {
var myAudio = document.getElementById('myAudio');
//播放/暫停按鈕
$('#playBtn').click(function () {
    var icon = $(this).find('i');
    //播放
    if (myAudio.paused) {
        //若是延遲指定src的話，會在播放前有較長的等待
        if (myAudio.src.length <= 0) {
            myAudio.src = currentFile;
        }
        myAudio.play();
        icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
    } else {
        myAudio.pause();
        icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
    }
});
//靜音按鈕
$('#mutedBtn').click(function () {
    var icon = $(this).find('i');
    icon.toggleClass('glyphicon-volume-down').toggleClass('glyphicon-volume-off');
    myAudio.muted = !myAudio.muted;
});
//音量按鈕
$('#volume').slider({
    value: myAudio.volume * 100
}).on('change', function (e) {
    var value = e.value.newValue / 100;
    myAudio.volume = value;
});
$('#changeBtn').click(function () {
    //使用在線文件
    myAudio.src = 'http://m5.file.xiami.com/523/78523/1136455538/1774490672_16884267_l.mp3?auth_key=61ade10d6a7508618ab53fe2aaa39b8c-1478919600-0-null';
    myAudio.play();
});
//監聽事件
myAudio.oncanplay = function () {
    console.info('進入可播放狀態,音頻總長度:' + myAudio.duration);
}
myAudio.onplay = function () {
    console.info('開始播放：' + myAudio.currentTime);
}
myAudio.onpause = function () {
    console.info('暫停播放：' + myAudio.currentTime);
}
myAudio.onprogress = function () {
    //console.info(myAudio.buffered);
    //console.info('正在播放：' + myAudio.currentTime);
}
myAudio.ontimeupdate = function (e) {
    console.info('播放時間發生改變：'+myAudio.currentTime);
}
}

顯示結果：