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