H5 音頻標籤自定義樣式修改以及添加播放控制事件

說明：

需求要求這個音頻標籤首先要是可適配移動端瀏覽器的，音頻樣式就是參考微信作的。

最終效果以下：

---

具體實現

思路：

H5 的 <audio> 標籤是由瀏覽器負責實現默認樣式的。因此不一樣的瀏覽器樣式不同，有些還不太美觀。因此咱們通常會去掉默認樣式，本身從新寫。具體操做是定義 <audio> 的時候去掉 controls 屬性，這樣就能夠隱藏原生的 audio， 而後就能夠加上本身寫的 html + css 代碼了。最後用 js 捕獲 audio 對象，爲它添加各類播放控制事件。

---

1. 定義標籤

這個很簡單，就是用H5 <audio> 標籤訂義音頻的方式。

html 代碼：

<div class="audio-wrapper"> <audio> <source src="Files/Audio/2017-08/e259d760-5f1a-4ae0-a838-34d237ea93cc.mp3" type="audio/mp3"> </audio> <div class="audio-left">![](image/play.png)</div> <div class="audio-right"> <p style="max-width: 536px;">Beta-B_Kan R. Gao.mp3</p> <div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span> <div class="progress-bar" id="progressBar"></div> </div> <div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total">01:06</span></div> </div> </div> 

css 代碼：

.audio-wrapper { background-color: #fcfcfc; margin: 10px auto; max-width: 670px; height: 70px; border: 1px solid #e0e0e0; } .audio-left { float: left; text-align: center; width: 18%; height: 100%; } .audio-left img { width: 40px; position: relative; top: 15px; margin: 0; display: initial; /* 解除與app的樣式衝突 */ cursor: pointer; } .audio-right { margin-right: 2%; float: right; width: 80%; height: 100%; } .audio-right p { font-size: 15px; height: 35%; margin: 8px 0; /* 歌曲名稱只顯示在一行，超出部分顯示爲省略號 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 243px; /* 要適配小屏幕手機，因此最大寬度先設小一點，後面js根據屏幕大小從新設置 */ } .progress-bar-bg { background-color: #d9d9d9; position: relative; height: 2px; cursor: pointer; } .progress-bar { background-color: #649fec; width: 0; height: 2px; } .progress-bar-bg span { content: " "; width: 10px; height: 10px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; background-color: #3e87e8; position: absolute; left: 0; top: 50%; margin-top: -5px; margin-left: -5px; cursor: pointer; } .audio-time { overflow: hidden; margin-top: -1px; } .audio-length-total { float: right; font-size: 12px; } .audio-length-current { float: left; font-size: 12px; } 

2. 添加播放控制事件

• 獲取音頻對象

var audio = $('audio')[0]; 

• 播放/暫停控制

// 點擊播放/暫停圖片時，控制音樂的播放與暫停 $('#audioPlayer').click(function () { if (audio.paused) { // 開始播放當前點擊的音頻 audio.play(); $('#audioPlayer').attr('src', 'image/pause.png'); // 暫停其餘正在播放的音頻 var audios = $('audio'); for (var i = 0; i < audios.length; i++) { if (i != index && !audios[i].paused) { audios[i].pause(); $('#audioPlayer' + i).attr('src', 'image/play.png'); } } } else { audio.pause(); $('#audioPlayer').attr('src', 'image/play.png'); } }); 

• 更新進度條與當前播放時間

// 監聽音頻播放時間並更新進度條 audio.addEventListener('timeupdate', function () { updateProgress(audio); }, false); /** * 更新進度條與當前播放時間 * @param {object} audio - audio對象 */ function updateProgress(audio) { var value = audio.currentTime / audio.duration; $('#progressBar').css('width', value * 100 + '%'); $('#progressDot').css('left', value * 100 + '%'); $('#audioCurTime').html(transTime(audio.currentTime)); } /** * 音頻播放時間換算 * @param {number} value - 音頻當前播放時間，單位秒 */ function transTime(value) { var time = ""; var h = parseInt(value / 3600); value %= 3600; var m = parseInt(value / 60); var s = parseInt(value % 60); if (h > 0) { time = formatTime(h + ":" + m + ":" + s); } else { time = formatTime(m + ":" + s); } return time; } /** * 格式化時間顯示，補零對齊 * eg：2:4 --> 02:04 * @param {string} value - 形如 h:m:s 的字符串 */ function formatTime(value) { var time = ""; var s = value.split(':'); var i = 0; for (; i < s.length - 1; i++) { time += s[i].length == 1 ? ("0" + s[i]) : s[i]; time += ":"; } time += s[i].length == 1 ? ("0" + s[i]) : s[i]; return time; } 

• 播放完成時把進度調回開始的位置

// 監聽播放完成事件 audio.addEventListener('ended', function () { audioEnded(); }, false); /** * 播放完成時把進度調回開始的位置 */ function audioEnded() { $('#progressBar').css('width', 0); $('#progressDot').css('left', 0); $('#audioPlayer').attr('src', 'image/play.png'); } 

3. 添加進度調節事件

• 點擊進度條跳到指定位置播放

// 點擊進度條跳到指定點播放 // PS：此處不要用click，不然下面的拖動進度點事件有可能在此處觸發，此時e.offsetX的值很是小，會致使進度條彈回開始處（簡直不能忍！！） $('#progressBarBg' + index).on('mousedown', function (e) { // 只有音樂開始播放後才能夠調節，已經播放過但暫停了的也能夠 if (!audio.paused || audio.currentTime != 0) { var pgsWidth = $('.progress-bar-bg').width(); var rate = e.offsetX / pgsWidth; audio.currentTime = audio.duration * rate; updateProgress(audio, index); } }); 

• 拖動進度條到指定位置播放

var dot = document.getElementById('progressDot'); // 鼠標拖動進度點時能夠調節進度 // 只有音樂開始播放後才能夠調節，已經播放過但暫停了的也能夠 // 鼠標按下時 dot.onmousedown = function (e) { if (!audio.paused || audio.currentTime != 0) { var oriLeft = dot.offsetLeft; var mouseX = e.clientX; var maxLeft = oriLeft; // 向左最大可拖動距離 var maxRight = document.getElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最大可拖動距離 // 禁止默認的選中事件（避免鼠標拖拽進度點的時候選中文字） if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } // 禁止事件冒泡 if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } // 開始拖動 document.onmousemove = function (e) { var length = e.clientX - mouseX; if (length > maxRight) { length = maxRight; } else if (length < -maxLeft) { length = -maxLeft; } var pgsWidth = $('.progress-bar-bg').width(); var rate = (oriLeft + length) / pgsWidth; audio.currentTime = audio.duration * rate; updateProgress(audio); }; // 拖動結束 document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; } }; 

---

最後總的 js 代碼以下：

$(document).ready(function () { // 控制音頻文件名顯示寬度 var maxW = $('.audio-right').width(); $('.audio-right p').css({ "max-width": maxW }); initAudioEvent(); }); /** * 初始化音頻控制事件 */ function initAudioEvent() { var audio = $('audio')[0]; // 點擊播放/暫停圖片時，控制音樂的播放與暫停 $('#audioPlayer').click(function () { // 監聽音頻播放時間並更新進度條 audio.addEventListener('timeupdate', function () { updateProgress(audio); }, false); // 監聽播放完成事件 audio.addEventListener('ended', function () { audioEnded(); }, false); // 改變播放/暫停圖片 if (audio.paused) { // 開始播放當前點擊的音頻 audio.play(); $('#audioPlayer').attr('src', 'image/pause.png'); // 暫停其餘正在播放的音頻 var audios = $('audio'); for (var i = 0; i < audios.length; i++) { if (i != index && !audios[i].paused) { audios[i].pause(); $('#audioPlayer' + i).attr('src', 'image/play.png'); } } } else { audio.pause(); $('#audioPlayer').attr('src', 'image/play.png'); } }); // 點擊進度條跳到指定點播放 // PS：此處不要用click，不然下面的拖動進度點事件有可能在此處觸發，此時e.offsetX的值很是小，會致使進度條彈回開始處（簡直不能忍！！） $('#progressBarBg' + index).on('mousedown', function (e) { // 只有音樂開始播放後才能夠調節，已經播放過但暫停了的也能夠 if (!audio.paused || audio.currentTime != 0) { var pgsWidth = $('.progress-bar-bg').width(); var rate = e.offsetX / pgsWidth; audio.currentTime = audio.duration * rate; updateProgress(audio, index); } }); var dot = document.getElementById('progressDot'); // 鼠標拖動進度點時能夠調節進度 // 只有音樂開始播放後才能夠調節，已經播放過但暫停了的也能夠 // 鼠標按下時 dot.onmousedown = function (e) { if (!audio.paused || audio.currentTime != 0) { var oriLeft = dot.offsetLeft; var mouseX = e.clientX; var maxLeft = oriLeft; // 向左最大可拖動距離 var maxRight = document.getElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最大可拖動距離 // 禁止默認的選中事件（避免鼠標拖拽進度點的時候選中文字） if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } // 禁止事件冒泡 if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } // 開始拖動 document.onmousemove = function (e) { var length = e.clientX - mouseX; if (length > maxRight) { length = maxRight; } else if (length < -maxLeft) { length = -maxLeft; } var pgsWidth = $('.progress-bar-bg').width(); var rate = (oriLeft + length) / pgsWidth; audio.currentTime = audio.duration * rate; updateProgress(audio); }; // 拖動結束 document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; } }; } /** * 更新進度條與當前播放時間 * @param {object} audio - audio對象 */ function updateProgress(audio) { var value = audio.currentTime / audio.duration; $('#progressBar').css('width', value * 100 + '%'); $('#progressDot').css('left', value * 100 + '%'); $('#audioCurTime').html(transTime(audio.currentTime)); } /** * 播放完成時把進度調回開始的位置 */ function audioEnded() { $('#progressBar').css('width', 0); $('#progressDot').css('left', 0); $('#audioPlayer').attr('src', 'image/play.png'); } /** * 音頻播放時間換算 * @param {number} value - 音頻當前播放時間，單位秒 */ function transTime(value) { var time = ""; var h = parseInt(value / 3600); value %= 3600; var m = parseInt(value / 60); var s = parseInt(value % 60); if (h > 0) { time = formatTime(h + ":" + m + ":" + s); } else { time = formatTime(m + ":" + s); } return time; } /** * 格式化時間顯示，補零對齊 * eg：2:4 --> 02:04 * @param {string} value - 形如 h:m:s 的字符串 */ function formatTime(value) { var time = ""; var s = value.split(':'); var i = 0; for (; i < s.length - 1; i++) { time += s[i].length == 1 ? ("0" + s[i]) : s[i]; time += ":"; } time += s[i].length == 1 ? ("0" + s[i]) : s[i]; return time; }

來源：https://www.jianshu.com/p/19303e9cf80a 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。