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

?

總結

以上是生活随笔為你收集整理的HTML5 Audio/标签Api整理（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。