H5audio⾳频标签⾃定义样式修改以及添加播放控制事件
说明：
需求要求这个⾳频标签⾸先要是可适配移动端浏览器的，⾳频样式就是参考做的。
最终效果如下：
具体实现
思路：
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 >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 = "";
margin ratevar 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 = ElementById('progressDot');
// ⿏标拖动进度点时可以调节进度
// 只有⾳乐开始播放后才可以调节，已经播放过但暂停了的也可以
// ⿏标按下时
if (!audio.paused || audio.currentTime != 0) {
var oriLeft = dot.offsetLeft;
var mouseX = e.clientX;
var maxLeft = oriLeft; // 向左最⼤可拖动距离
var maxRight = ElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最⼤可拖动距离        // 禁⽌默认的选中事件（避免⿏标拖拽进度点的时候选中⽂字）
if (e.preventDefault) {
e.preventDefault();
} else {
}
// 禁⽌事件冒泡
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
// 开始拖动
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);
};
// 拖动结束
};
}
};
最后总的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 = ElementById('progressDot');
// ⿏标拖动进度点时可以调节进度
// 只有⾳乐开始播放后才可以调节，已经播放过但暂停了的也可以
// ⿏标按下时
if (!audio.paused || audio.currentTime != 0) {
var oriLeft = dot.offsetLeft;
var mouseX = e.clientX;
var maxLeft = oriLeft; // 向左最⼤可拖动距离
var maxRight = ElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最⼤可拖动距离
// 禁⽌默认的选中事件（避免⿏标拖拽进度点的时候选中⽂字）
if (e.preventDefault) {
e.preventDefault();
} else {
}
// 禁⽌事件冒泡
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
// 开始拖动
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);
};
// 拖动结束
};
}
};
}
/**
* 更新进度条与当前播放时间
* @param {object} audio - audio对象
*/
function updateProgress(audio) {
var value = audio.currentTime / audio.duration;
$('#progressBar').css('width', value * 100 + '%');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。