wavesurfer专题

vue3 ant ts 集成wavesurfer

实现功能有：音词同步，倍速播放，拖拽播放，快进\退，重播，显示总时长，关闭页面时关闭声音等功能 package.json 引入 "wavesurfer.js": "^7.7.14", 父页面引入自己封的 MyWaveSurfer.vue <WaveSurfer :waveSrc="model['fsFilepath']">

vue绘制语音波形图---wavesurfer.js

文章目录创建实例optionsmethod接收Blob流 https://wavesurfer.xyz/ 创建实例引入插件：import WaveSurfer from "wavesurfer.js"创建实例对象：`this.wavesurfer = WaveSurfer.create(options); <div id="waveform"><!-- the wav

Wavesurfer.js绘制波形图

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

vue项目中定制化音频展示，wavesurfer.js基本使用

效果图： wavesurfer是一个可定制的音频波形可视化，建立在Audio API和HTML5 Canvas之上。基本使用： <body><script src="https://unpkg.com/wavesurfer.js"></script><div id="waveform"></div><script>var wavesurfer = WaveSurfer.create({c