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