HTML5 <Audio/>标签Api整理（二）

1.实例2：

相对较完整

Html代码：

<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>
    <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>
<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;
    if (myAudio.src.length <= 0) {
        myAudio.src = currentFile;
    }
    //播放/暂停按钮
    $('#playBtn').click(function () {
        var icon = $(this).find('i');
        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();
    });
    //进入可播放状态
    myAudio.oncanplay = function () {
        console.info('进入可播放状态,音频总长度:' + myAudio.duration);
        $('#timeBtn').slider('setAttribute', 'max', myAudio.duration);
    }
    myAudio.onplay = function () {
        console.info('开始播放：' + myAudio.currentTime);
    }
    myAudio.onpause = function () {
        console.info('暂停播放：' + myAudio.currentTime);
    }
    myAudio.ontimeupdate = function (e) {
        $('#timeBtn').slider('setValue', myAudio.currentTime);
    }
    //此事件和onplay好像一直
    myAudio.onplaying = function () {
        console.info('正在播放：' + myAudio.currentTime);
    }
    //此事件和oncanplay 好像一直
    myAudio.onloadedmetadata = function () {
        console.info('文件加载成功:' + myAudio.duration);
    }
}

显示结果：

更多：HTML5 <Audio>标签API整理(一)

更多事件实例参考：HTML5 Media事件（包含缓存进度显示）

时间格式化处理

// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子： 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}