H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

说明：

需求要求这个音频标签首先要是可适配移动端浏览器的，音频样式就是参考微信做的。

最终效果如下：

---

具体实现

思路：

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
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

转载于:https://www.cnblogs.com/Mr5GG/p/9076699.html