<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>

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);}
}

// 对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;
}