說明：
需求要求這個音頻標簽首先要是可適配移動端瀏覽器的，音頻樣式就是參考微信做的。
最終效果如下：
具體實現
思路：
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"></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
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。