HTML5 Media事件

Media 事件

由媒介（比如視頻、圖像和音頻）觸發的事件（適用於所有 HTML 元素，但常見於媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

屬性	值	描述
onabort	script	在退出時運行的腳本。
oncanplay	script	當文件就緒可以開始播放時運行的腳本（緩沖已足夠開始時）。
oncanplaythrough	script	當媒介能夠無需因緩沖而停止即可播放至結尾時運行的腳本。
ondurationchange	script	當媒介長度改變時運行的腳本。
onemptied	script	當發生故障並且文件突然不可用時運行的腳本（比如連接意外斷開時）。
onended	script	當媒介已到達結尾時運行的腳本（可發送類似“感謝觀看”之類的消息）。
onerror	script	當在文件加載期間發生錯誤時運行的腳本。
onloadeddata	script	當媒介數據已加載時運行的腳本。
onloadedmetadata	script	當元數據（比如分辨率和時長）被加載時運行的腳本。
onloadstart	script	在文件開始加載且未實際加載任何數據前運行的腳本。
onpause	script	當媒介被用戶或程序暫停時運行的腳本。
onplay	script	當媒介已就緒可以開始播放時運行的腳本。
onplaying	script	當媒介已開始播放時運行的腳本。
onprogress	script	當瀏覽器正在獲取媒介數據時運行的腳本。
onratechange	script	每當回放速率改變時運行的腳本（比如當用戶切換到慢動作或快進模式）。
onreadystatechange	script	每當就緒狀態改變時運行的腳本（就緒狀態監測媒介數據的狀態）。
onseeked	script	當 seeking 屬性設置為 false（指示定位已結束）時運行的腳本。
onseeking	script	當 seeking 屬性設置為 true（指示定位是活動的）時運行的腳本。
onstalled	script	在瀏覽器不論何種原因未能取回媒介數據時運行的腳本。
onsuspend	script	在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本。
ontimeupdate	script	當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本。
onvolumechange	script	每當音量改變時（包括將音量設置為靜音）時運行的腳本。
onwaiting	script	當媒介已停止播放但打算繼續播放時（比如當媒介暫停已緩沖更多數據）運行腳本

Audio實例，控制播放進度、緩沖進度等

HTML

<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>
    <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 class="form-group">
        <label class="control-label">進度：</label>
        <input class="form-control" id="timeBtn" data-slider-id="volumeSlider"
                data-slider-min="0" data-slider-step="0.01" />
    </div>
    <div class="form-group">
        <label class="control-label">緩存：</label>
        <input class="form-control" id="bufferBtn" data-slider-id="volumeSlider"
                data-slider-min="0" data-slider-step="0.01" />
    </div>
</div>
<audio id="myAudio"></audio>

js

var currentFile = '../content/audio/海闊天空.mp3';
//判斷瀏覽器是否支持audio
if (!window.HTMLAudioElement) {
    alert('您的瀏覽器不支持audio標簽');
} else {
    var myAudio = document.getElementById('myAudio');
    myAudio.autoplay = false;
    myAudio.preload = false;
    //播放/暫停按鈕
    $('#playBtn').click(function () {
        var icon = $(this).find('i');
        if (myAudio.src.length <= 0) {
            myAudio.src = currentFile;
        }
        if (myAudio.paused) {
            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;
    });
    //播放進度按鈕
    $('#timeBtn').slider({
        value: 0,
        tooltip: 'always',
        formatter: function (value) {
            var date = new Date(0, 0, 0, 0, 0, value);
            return '當前時間：' + date.Format('mm:ss');
        }
    }).on('change', function (e) {
        var value = e.value.newValue;
        myAudio.currentTime = value;
        myAudio.play();
    });
    //緩存進度按鈕
    $('#bufferBtn').slider({
        value: 0,
        tooltip: 'always',
        formatter: function (value) {
            var date = new Date(0, 0, 0, 0, 0, value);
            return '緩存位置：' + date.Format('mm:ss');
        }
    });
    //進入可播放狀態
    myAudio.oncanplay = function () {
        console.info('進入可播放狀態,音頻總長度:' + myAudio.duration);
    }
    myAudio.onplay = function () {
        console.info('開始播放：' + myAudio.currentTime);
    }
    myAudio.onpause = function () {
        console.info('暫停播放：' + myAudio.currentTime);
    }
    //當媒介播放的位置發生改變，也就是currentTime發生改變
    myAudio.ontimeupdate = function (e) {
        //修改進度按鈕
        $('#timeBtn').slider('setValue', myAudio.currentTime);
    }
    //媒介長度發生改變時，觸發
    myAudio.ondurationchange = function () { }
    //當媒介數據已加載時運行的腳本。
    myAudio.onloadeddata = function () { };
    //當元數據（比如分辨率和時長）被加載時運行的腳本
    myAudio.onloadedmetadata = function () {
        console.info('onloadedmetadata');
        $('#timeBtn').slider('setAttribute', 'max', myAudio.duration);
        $('#bufferBtn').slider('setAttribute', 'max', myAudio.duration);
    }
    /*
    * onloadedmetadata事件和onsuspend事件觸發順序是不一定的，
    * 但是在觸發onloadedmetadata事件之前 myAudio.duration總是為NaN
    * 所以要監視緩存情況，在onloadedmetadata事件中注冊onsuspend事件
    * 或者在onsuspend事件中也設置當前進度的最大值
    */
    //在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本。
    myAudio.onsuspend = function () {
        var timeRange = myAudio.buffered;
        // console.info('onsuspend:' + myAudio.duration);
        if (timeRange.length > 0 && myAudio.duration > 0) {
            // console.info('緩存完成：' + timeRange.end(0));
            $('#bufferBtn').slider('setAttribute', 'max', myAudio.duration);
            //修改緩存按鈕
            var timeRange = myAudio.buffered;
            $('#bufferBtn').slider('setValue', timeRange.end(0));
        }
    }

}

本文內容承接：HTML5 <Audio/>標簽Api整理（二）