最近项目有个需求，需要在播放音频的时候显示频谱。网上查了一下资料，找到能实现效果的两个组件（vue-audio-visual和wavesurfer.js）
两个插件都试了一下，使用vue-audio-visual的时候遇到个问题，在音频暂停或者关闭后打开相同音频时，再次播放都会遇到音频播放速度变慢的问题，暂时没有解决，我认为可能是使用Vue2的原因，因为这个组件目前Vue更新到了3.x版本了，Vue2只更新到2.5.0
再说说wavesurfer.js，看了文档后只能说这个组件太牛了，组件有多个插件，功能很强大。话不多说，直接上代码。
首先还在下载依赖
npm install wavesurfer.js
//或者
yarn add wavesurfer.js
然后再需要使用的地方引入
import WaveSurfer from 'wavesurfer.js';
接着需要创建一个div作为容器，我这里和audio标签交互使用
<div id="waveform"></div>
<audio
:src="audioSrc1"
controls
class="audio4"
@play="play"
@pause="pause"
@seeking="seeking"
controlsList="noplaybackrate nodownload"
></audio>
我是在监听器中使用，页面时打开创建wavesurfer。JS代码：
let _t = this;
this.$nextTick(() => {
_t.wavesurfer = WaveSurfer.create({
// 需要的容器盒子
container: "#waveform",
// 是否出现滚动条
scrollParent: false,
// 播放进行时线条颜色
cursorColor: "#fff",
// 播放进行时线条宽度
cursorWidth: 2,
// 未播放的波纹颜色
waveColor: "#ccc",
// 已播放的波纹颜色
progressColor: "#50f0a6",
// 背景色（设置这个，CSS就可以不用单独设置，我只是想试一试能不能加背景图片，所以单独设置了CSS样式）
// backgroundColor: "#000",
// 倍速
audioRate: 1,
//频谱的高度
height: 130,
});
// 加载音频文件
_t.wavesurfer.load(this.audioSrc1);
});
播放暂停拖拽进度条与audio绑定到一起
（这里要说一下，因为wavesurfer带了播放功能，所以需要将audio静音，不然会有重音）方法为：
// 播放音频
play() {
//静音audio
document.querySelector(".audio4").muted = true;
this.wavesurfer.play();
},
// 暂停
pause() {
this.wavesurfer.pause();
},
// 拖动进度条时触发
seeking() {
//使wavesurfer跳到进度条拖动的位置（audio当前时间- wavesurfer当前时间 = 需要跳转的时间）
this.wavesurfer.skip(
document.querySelector(".audio4").currentTime -
this.wavesurfer.getCurrentTime()
);
},
//关闭
handleClose() {
this.$emit("dialogClose", false);
document.querySelector(".audio4").currentTime = 0;
document.querySelector(".audio4").pause();
// 停止播放并回到起始点
this.wavesurfer.destroy();
},
在文档里没有找到禁止鼠标在wavesurfer频谱上的点击事件，所以用了CSS禁止事件
#waveform {
width: 100%;
background: #1e221f;
pointer-events: none;
}
最后是成品图
代码中有不妥之处请各位帮我指出，谢谢大家
