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