最近项目有个需求,需要在播放音频的时候显示频谱。网上查了一下资料,找到能实现效果的两个组件(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;
}
最后是成品图
代码中有不妥之处请各位帮我指出,谢谢大家
如果觉得《记录一下使用wavesurfer.js与H5audio标签实现可视化音频》对你有帮助,请点赞、收藏,并留下你的观点哦!