分享：带波形的语音播放工具（wavesurfer-js）

最新推荐文章于 2025-11-21 06:24:42 发布

转载最新推荐文章于 2025-11-21 06:24:42 发布 · 854 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/easeyeah/p/4754541.html

文章标签：

#javascript #ViewUI

wavesurfer-js是一款基于WebAudioAPI的音频可视化及播放库。它通过获取波形峰值并利用canvas绘制波形，同时支持音频播放功能。此库常用于开发语音标注工具等应用。

项目名称：wavesurfer-js

github地址：https://github.com/katspaugh/wavesurfer.js

官网地址：http://wavesurfer-js.org/

技术原理：Web Audio API

核心，通过 getChannelData 获取波形的峰值，然后通过 canvas 进行绘制，并且同时使用 audio 进行播放。

能用来干嘛？我用它来做语音标注工具。

其他的采用了这个组件的牛逼项目：

https://github.com/katspaugh/wavesurfer.js/wiki/Projects

转载于:https://www.cnblogs.com/easeyeah/p/4754541.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30954607

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

wavesurfer.js实现音频波纹效果（后端音频地址不支持跨域时可通过获取blob类型文件流解决）

qq_46370075的博客

03-24

2444

wavesurfer.js实现音频波纹效果（后端音频地址不支持跨域时可通过获取blob类型文件流解决）

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

weixin_43956958的博客

02-04

5924

通过XMLHttpRequest对象向后端发出请求，获取音频数据的blob流。然后通过WaveSurfer.create()方法创建一个wavesurfer实例，传入一个容器元素和一些配置选项。最后调用loadBlob()方法将blob数据传递给wavesurfer进行处理。这样就可以在前端使用wavesurfer.js处理后端传递过来的音频数据了。封装websocket。

参与评论您还未登录，请先登录后发表或查看评论

前端项目-wavesurfer.js.zip

09-03

前端项目-wavesurfer.js,Interactive navigable audio visualization using Web Audio and Canvas

Wavesurfer.js 音频波形可视化库完全指南

热门推荐

南北极之间

12-30

1万+

在Vue中完整代码在最后。使用方法： 1、第一步：使用以下命令安装wavesurfer.js插件库 npm install wavesurfer.js --save 2、第二步：在需要使用的页面import导入wavesurfer.js和其中的时间轴timeline插件 import WaveSurfer from 'wavesurfer.js' import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.

wavesurfer-player.js：前端波形音频播放器与播放列表的实现

在这个主题中，我们将详细探讨关于`wavesurfer-player.js`的知识点，它是一个使用HTML5和JavaScript实现的音频播放器，具备波形可视化和播放列表功能。这个库允许开发者在网页上嵌入一个具备现代用户界面的音频...

vue+wavesurfer.js:画波形图

风一样的少年

04-21

3438

安装 yarn add wavesurfer.js 使用 template <div class="voice-dialog-content"> <div> <Button :type="!isPlaying ? 'primary' : 'warning'" shape="circle" :icon="!isPlaying ? 'ios-play' : 'ios-pause'" @click="playVoice"></Button> &lt

vue中音频wavesurfer.js的使用方法

10-15

在Vue项目中使用wavesurfer.js库来处理音频，首先需要理解wavesurfer.js的核心功能，它是一个强大的Web音频可视化库，能够创建波形图并提供播放、暂停、快进、后退等音频控制功能。通过引入wavesurfer.js库，我们...

Vue3携手WaveSurfer：在双声道语音世界里翩翩起舞

沐墨染的博客

11-19

1340

本文介绍了Vue3与WaveSurfer.js结合实现双声道语音处理的技术方案。Vue3作为新一代前端框架，提供灵活高效的开发体验；WaveSurfer.js则是专业的音频波形可视化库，支持双声道分离显示和切换播放。文章详细阐述了二者的集成方法、参数配置及插件扩展，并通过代码示例展示了如何实现双声道音频可视化、声道切换等功能。这种技术组合可广泛应用于在线音乐播放器、音频编辑器等场景，为前端音频处理提供了创新解决方案。

wavesurfer-player.js:使用httpsHTML5 Javascript音频播放器和播放列表

05-16

现场演示： : waveurfer-player.js Wavesurfer-player.js是使用波形可视化显示HTML5 / Javascript音频播放器和播放列表。它使用图标集。指示待定特征上一首歌，下一首歌，播放/暂停，停止当前时间/歌曲持续时间寻找重复随机播放音量滑杆沉默的附加信息待定

JS 音频可视化插件Wavesurfer.js的使用教程

10-17

Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法，感兴趣的朋友跟随小编一起看看吧

wavesurfer.js, 在网络音频和画布上，建立可以导航波形.zip

10-12

wavesurfer.js, 在网络音频和画布上，建立可以导航波形以下是如何更新到版本 2的 wavesurfer.js ！基于网络音频和画布的交互式可以导航。请参见教程和示例在 wavesurfer-js.org 。浏览器支持wavesurfer.js 只适用于现代浏览器支持

Wavesurfer.js绘制波形图

weixin_47175934的博客

12-22

3381

要使用wavesurfer.js，首先需要在HTML文件中引入Wavesurfer.js库，然后创建一个音频元素并将其添加到页面中。接下来，初始化Wavesurfer实例并配置相关选项。现在，当你运行Vue项目时，wavesurfer.js应该已经成功下载并在页面上显示波形。4. 在Vue组件中引入并使用wavesurfer.js。我没找到wavesurfer.cursor.js文件，就注释了。替换为你要使用的音频文件路径。打开浏览器，查看效果。

使用wavesurfer.js自定义波形绘制，集成频谱、时间轴、缩放、区域选择等插件

唐诺

09-11

452

使用wavesurfer.js自定义波形绘制，集成频谱、时间轴、缩放、区域选择等插件。

wavesurfer.js_使用wavesurfer.js进行动态波形可视化

Web 开发&软件开发

08-05

3650

使用wavesurfer.js进行动态波形可视化波形图像是无聊音频小部件的绝佳补充。它们既实用又美观，允许用户直观地浏览音频。我最近找到了waveurfer.js，这是一个了不起的波形图像实用程序，可用于Web Audio API来创建超级可自定义的波形可视化，只需一分钟即可实现。观看演示首先在页面中包含waveurfer.js： <script src="...