自定义音频插件

前言

最近由于发现项目中使用百度自带编辑器中的audio有兼容问题，oppo手机自带浏览器显示的audio样式无法点击播放，魅族手机自带浏览器打开，audio交互界面样式乱套且没有播放按钮。为解决这个问题，封装了一个audio插件以供使用。
默认audio:

修改后样式：

audio功能点

1. 暂停所有：由于可能会有多个音频，有点击任一个暂停其他音频的需求点，所以有以下绑定

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));
    })

2. 显示缓存：缓存事件我在初始化音频时就调用

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)

3. 播放快进、拖拽快进、事件换算等见下方完整代码

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 >'