音频插件使用（wavesurfer.js）

html:

<div id="waveform" style="height: 130px; margin: 0 15px;"></div>
    <div class="operate-btn">
        <img onclick="rew()" title="后退" style="height: 54px;" src="/images/audio-back.png" />
        <img onclick="plays()" id="status" class="layui-anim layui-anim-scale" style="height: 80px;margin: 0 20px;"
            src="/images/audio-start.png" />
        <img onclick="forward()" title="前进" style="height: 54px;" src="/images/audio-front.png" />
    </div>

js:

var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            cursorColor: 'transparent',  // 光标的填充颜色
            waveColor: '#0B6CC8', // 光标后的波形填充颜色
            backgroundColor: '#000000',  // 波形容器的背景颜色
            progressColor: '#004281',  // 光标后面的波形部分的填充色
            barGap: 8,  // 间距
            barRadius: 3,
            barWidth: 6,
            // height: 40,
            // backend: 'MediaElement',
            // xhr: {
            //     mode: "no-cors"
            // }
        });
        // wavesurfer.load(urlAll + filePath); // 加载服务器路径
        wavesurfer.load('/images/bensound-acousticbreeze.mp3');  // 加载本地路径

        // 音频加载成功时的监听事件
        // wavesurfer.on('ready', function () {
        //     wavesurfer.play();
        // });

        // 加载错误时的监听事件
        wavesurfer.on('error', err => {
            console.warn(err);
        })

        //音频暂停时的监听事件
        wavesurfer.on('pause', function () {
            // wavesurfer.params.container.style.opacity = 0.9;//识别到监听事件后，需要执行的操作
        });

        //音频完成播放时的监听事件
        wavesurfer.on('finish', function () {

        });

        // 播放时暂停，播放时暂停
        function plays() {
            wavesurfer.playPause();
            if (flag == false) {
                $("#status").attr("src", "/images/audio-pause.png")
                flag = true
            } else if (flag == true) {
                $("#status").attr("src", "/images/audio-start.png")
                flag = false
            }
        }

        // 后退
        function rew() {
            wavesurfer.skip(-3)
        }

        // 前进
        function forward() {
            wavesurfer.skip(3)
        }

效果如下

 

此处需要注意一点，加载本地音频正常，当加载服务器路径时，即使后台设置了跨域，也会出现如下跨域问题

 搜索了很多文章，加上下面几行代码可以解决跨域问题，可以正常播放音频，但是会出现波形效果不显示的问题

backend: 'MediaElement',
xhr: {
     mode: "no-cors"
}

网上说这个还是因为跨域问题没有解决，然后就不知道了。。目前还没得解决办法，找到解决办法了再来更新，如果有遇到这个问题解决了的大佬也麻烦解惑一下呐