Wavesurfer.js绘制波形图

HTML使用Wavesurfer.js

要使用wavesurfer.js，首先需要在HTML文件中引入Wavesurfer.js库，然后创建一个音频元素并将其添加到页面中。接下来，初始化Wavesurfer实例并配置相关选项。以下是一个简单的示例：

1. 在HTML文件中引入Wavesurfer.js库：

2. 将your-audio-file.mp3替换为你要使用的音频文件路径。

3. 打开浏览器，查看效果。

 Vue项目中使用Wavesurfer.js

1. 打开终端或命令提示符。
2. 使用cd命令导航到Vue项目的根目录。
3. 运行以下命令来安装wavesurfer.js：

    
npm install wavesurfer.js --save

4. 在Vue组件中引入并使用wavesurfer.js。例如，在components/YourComponent.vue文件中：

5.确保在HTML文件中有一个用于显示波形的容器，例如：

 6.将音频文件添加到Vue组件的data属性中，例如：

data() {
  return {
    audio: 'your-audio-file.mp3'
  };
}

现在，当你运行Vue项目时，wavesurfer.js应该已经成功下载并在页面上显示波形。

案例一

案例二

 我没找到wavesurfer.cursor.js文件，就注释了

参考

Wavesurfer.js 生成音浪波形图(vue) - 简书

vue 绘制波形图 wavesurfer.js （音频/视频） 【实用教程】_朝阳39的技术博客_51CTO博客