安装 wavesurfer.js

在项目中安装 wavesurfer.js

npm install --save wavesurfer.js

常规方式引入

如果你的根目录中没有 components 目录则需要创建该目录，并在此目录中创建 WaveSurfer.vue 内容如下：

然后我们集成该组件，在这个例子中我们将在 app.vue 直接引用，并且我将测试音频文件 demo.wav，放在根目录的public 中。

现在执行 npm run dev ，页面将报错 self is not defined。
这是因为在 setup 这个生命周期中，DOM 节点并未创建，所以我们需要在mounted 阶段进行导入。

正确的引入方式

更改 WaveSurfer.vue 文件内容如下：

现在你应该能看到已经可以正常加载了。

加载插件

加载方式和插件一样，官方的插件在 wavesurfer.js/dist/plugin 目录下，这个例子将加载时间线插件如下：

加载波形数据

如果音频文件过大，使用插件原生的波形生成方式会非常慢。这个时候可以通过服务端生成波形数据，并让插件直接通过波形数据进行渲染。具体生成方式可以参考官方的解决方案FAQ。在这个项目中，生成波形数据文件后，我把它移动到项目的public中，更改 WaveSurfer.vue 内容如下：

在 app.vue 中变更如下：

暴露插件的方法

现在我们只是正常初始化插件并让它加载了音频文件，目前我们并不能操作它。
因为 Vue3 中，默认并不会暴露

在 app.vue 中我们可以这样调用：

项目

你可以在以下仓库看到完整的示例

https://github.com/AnyStudy/nuxt-3-wavesurfer-demo