vue使用wavesurfer.js解决音频可视化播放问题

目录

• 1.安装wavesurfer
• 2.在页面导入
• 3.上源码
• 4.注释：

之前给大家介绍过vue中音频wavesurfer.js的使用方法，感兴趣的朋友可以点击查看，今天继续给大家普及vue解决音频可视化播放，使用wavesurfer.js问题，效果图如下所示：

上效果：

1.安装wavesurfer

npm install wavesurfer.js

2.在页面导入

import WaveSurfer from 'wavesurfer.js'

注:我没有使用时间轴，所以没有引入，如果需要再引入

import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'

3.上源码

4.注释：

这个插件实在太吊了，官方文档太厉害，上链接：https://wavesurfer-js.org/

我用到了几个方法：

4.1.

this.wavesurfer.play(0, 212); 指定开始时间和结束时间，以秒为单位，0秒开始，212秒结束

4.2.

this.wavesurfer.on("pause", () => {
console.log('我暂停了')
});

监听暂停

4.3.

this.wavesurfer.load(require("../mp3/living.mp3")); 读取目录路径里面的Mp3文件，可以测试用
this.wavesurfer.load('xxx.mp3')); 读取网络地址，有接口就用这个

到此这篇关于vue使用wavesurfer.js解决音频可视化播放的文章就介绍到这了,更多相关vue音频可视化播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！