前言
最近由于发现项目中使用百度自带编辑器中的audio有兼容问题,oppo手机自带浏览器显示的audio样式无法点击播放,魅族手机自带浏览器打开,audio交互界面样式乱套且没有播放按钮。为解决这个问题,封装了一个audio插件以供使用。
默认audio:
修改后样式:
audio功能点
- 暂停所有:由于可能会有多个音频,有点击任一个暂停其他音频的需求点,所以有以下绑定
function pauseAll() {
var self = this;
[].forEach.call(audios, function (i) {
//将audios中其他的audio全部暂停
i !== self && i.pause();
})
}
//给play事件绑定暂停函数,audios:所有的audio集合
[].forEach.call(audios, function (i) {
i.addEventListener("play", pauseAll.bind(i));
})
- 显示缓存:缓存事件我在初始化音频时就调用
audio.bufferInterval = setInterval(function () {
if (audio.readyState > 0) {
//至少当前音频元数据已准备
audio.loaded = (audio.buffered.end(0) / audio.duration)*100;
$(cache).css("width", audio.loaded + "%");
//缓存完毕清除定时器
if (audio.buffered.end(0) === audio.duration) {
clearInterval(audio.bufferInterval)
}
}
}, 100)
- 播放快进、拖拽快进、事件换算等见下方完整代码
html
<section id="" class="linkBreak audio-wrapper">
<audio src="123.mp3" controls="" preload="auto"></audio>
<div class="audio-left">
<img id="audioPlayer" class="play-pause" src="aaa.png"></div>
<div class="audio-right">
<div class="progress-bar-bg" id="progressBarBg">
<em class="cache" ></em>
<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">00:00</span>
</div>
</div>
</section>
整体js
window.onload = function () {
//var audios = document.getElementsByTagName("audio");
var audios = $("audio[controls]");//筛选页面上有controls属性的audio
//自定义audio
var html = '<div class="audio-left">' +
'<img id="audioPlayer" class="play-pause" src="https://img.wbp5.com/upload/images/firstnews/2019/08/01/200512349.png">' +
'</div >'