wavesurfer

最新推荐文章于 2025-07-29 13:39:10 发布
原创 最新推荐文章于 2025-07-29 13:39:10 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

部署运行你感兴趣的模型镜像

wavesurfer 一个开源的 声音波形查看，记录软件。

 

软件可从下列链接获得

http://sourceforge.jp/projects/sfnet_wavesurfer/releases/

 

您可能感兴趣的与本文相关的镜像

ComfyUI

ComfyUI

AI应用
ComfyUI

ComfyUI是一款易于上手的工作流设计工具，具有以下特点：基于工作流节点设计，可视化工作流搭建，快速切换工作流，对显存占用小，速度快，支持多种插件，如ADetailer、Controlnet和AnimateDIFF等

Tangyongkang
关注
vue绘制语音波形图---wavesurfer.js
weixin_43956958的博客
02-04 5855
通过XMLHttpRequest对象向后端发出请求，获取音频数据的blob流。然后通过WaveSurfer.create()方法创建一个wavesurfer实例，传入一个容器元素和一些配置选项。最后调用loadBlob()方法将blob数据传递给wavesurfer进行处理。这样就可以在前端使用wavesurfer.js处理后端传递过来的音频数据了。封装websocket。
VUE中使用Wavesurfer.js可视化音频波形
honghongzZ的博客
03-24 1252
VUE中使用Wavesurfer.js可视化音频波形
常用音频软件：Wavesufer
cpongo881
06-02 786
作者：桂。 时间：2017-06-02 10:23:39 链接：http://www.cnblogs.com/xingshansi/p/6932408.html 前言 只列举两个自己用过的（wavesufer和praat），如果有其他更好的软件，还希望各位留下链接。 本文简单介绍wavesufer。 〇、简介 看一下wiki的简介： WaveSurfe...
vue使用wavesurfer.js
Lobove_code的博客
05-06 1598
vue使用wavesurfer.js 安装wavesurfer npm install wavesurfer.js 页面中引入 import WaveSurfer from 'wavesurfer.js' import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' Html <div class="waveform-wrapper"> <div id="waveform" ref="wavef
vue项目中定制化音频展示，wavesurfer.js基本使用
zhang_zan
10-27 3042
vue项目中定制化音频
vue 绘制波形图 wavesurfer.js （音频/视频） 【实用教程】
朝阳39的博客
10-28 5541
一文搞定波形图！
精选资源
wavesurfer.js 插件
05-18
**wavesurfer.js 插件详解** wavesurfer.js 是一个轻量级的JavaScript库，专为音频处理和可视化设计。它提供了一种方便的方式来在Web应用中展示和操作音频内容，尤其适用于创建波形图展示。wavesurfer.js 支持现代...
精选资源
音频可视化插件wavesurfer.js
06-01
**wavesurfer.js 插件详解** `wavesurfer.js` 是一款强大的开源JavaScript库，专为音频可视化设计。它提供了简洁的API，使得开发者能够轻松地在网页上创建交互式的波形显示，用于音乐、播客或其他音频内容。这款...
精选资源
JS 音频可视化插件Wavesurfer.js的使用教程.docx
01-19
### JS 音频可视化插件 Wavesurfer.js 的使用教程 #### 一、Wavesurfer.js 概述 Wavesurfer.js 是一款强大的基于 HTML5 Canvas 和 WebAudio API 的音频播放器插件，它提供了简洁易用的 API 接口以及高度可定制化的...
vue中音频wavesurfer.js的使用方法
10-15
this.time = '00:00' }) } }, playMusic() { if (this.wavesurfer.isPlaying()) { this.wavesurfer.pause(); this.isPlaying = false; } else { this.wavesurfer.play(); this.isPlaying = true; } }, }, ...
精选资源
js音频可视化插件Wavesurfer.js
06-01
**Wavesurfer.js——JavaScript音频可视化神器** Wavesurfer.js是一款强大的JavaScript库，专为音频可视化设计，它利用了现代浏览器中的Web Audio API和HTML5 Canvas技术，能够将音频数据实时渲染成可视化的声波...
JS 音频可视化插件Wavesurfer.js的使用教程
12-09
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法。 1、创建实例 引入插件 import WaveSurfer from "wavesurfer.js"; 创建实例对象 this.wavesurfer = WaveSurfer.create(options); options 参数 默认值 说明 audioRate 1 音频的播放速度，数值越小越慢 barWidth none 如果设置，波纹的样式将变成类似柱状图的形状 barHeight 1 波纹柱状
wavesurfer-1.8.8p5-win-i386.zip
07-07
windows版本的WaveSurfer。用于分析音频文件。WaveSurfer是实用型音频可视化编辑工具，功能全面，可以帮助用户进行零交叉调整、放大、混合频道、删除DC、控制加、控制减、缩放、规范化等各种音频与音轨修改操作，WaveSurfer操作简单，还提供了可视化的编辑窗口，可以帮您更好的进行音频编辑操作。
vue3 ant ts 集成wavesurfer
zhaofuqiangmycomm的博客
05-23 678
实现功能有：音词同步，倍速播放，拖拽播放，快进\退 ，重播，显示总 时长，关闭页面时关闭声音等功能。package.json 引入 "wavesurfer.js": "^7.7.14",父页面引入自己封的 MyWaveSurfer.vue。
html音频波纹播放器插件,JS 音频可视化插件Wavesurfer.js的使用教程
weixin_33437894的博客
06-19 933
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法。1、创建实例引入插件import WaveSurfer from "wavesurfer.js";创建实例对象this.wavesurfer = WaveSurfer.create(options);options参数默认值说明audioRa...
【项目推荐——音频标注 Wavesurfer 用法及相关问题解决】
weixin_56048772的博客
08-14 3290
上期推荐了文本标注poplar-annotation用法，这期针对音视频标注推荐wavesurfer.js库；Wavesurfer.js 是一个基于Web Audio API 和HTML5 Canvas的开源音频可视化库，用于创建可交互、可定制的波形。同时拥有众多插件库。
html音频波纹播放器插件,Wavesurfer.js音频播放器插件的使用教程
weixin_42134054的博客
06-19 2516
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法。1、创建实例引入插件import WaveSurfer from "wavesurfer.js";创建实例对象this.wavesurfer = WaveSurfer.create(options);options参数默认值说明audioRa...
vue中使用wavesurfer.js绘制波形图和频谱图（支持.pcm）
最新发布
唐诺
07-29 642
【代码】vue中使用wavesurfer.js绘制波形图和频谱图。
wavesurfer region
03-01
### Wavesurfer.js 区域功能配置与使用 Wavesurfer.js 提供了强大的音频波形显示和交互能力，其中包括区域（regions）功能。通过该功能可以定义并操作特定时间段内的波形片段。 #### 安装依赖库 为了使用 WaveSurfer 的地区模块，需先安装 `wavesurfer.js` 及其对应的插件： ```bash npm install wavesurfer.js wavesurfer.regions ``` #### 初始化 WaveSurfer 实例 创建一个新的 WaveSurfer 对象实例时要引入 regions 插件，并设置必要的选项来启用这一特性[^1]: ```javascript import WaveSurfer from 'wavesurfer.js'; import RegionsPlugin from 'wavesurfer.js/src/plugin/regions'; const waveSurfer = WaveSurfer.init({ container: '#waveform', plugins: [ RegionsPlugin.create() ] }); ``` #### 添加自定义样式 可以通过 CSS 自定义选区的颜色和其他视觉属性: ```css .wave-surfer .region { background-color: rgba(255, 99, 71, 0.4); } ``` #### 创建新区域 利用 API 方法可以在指定时间范围内建立新的区域对象。下面的例子展示了如何添加一个从第5秒到第8秒之间的区域[^2]: ```javascript waveSurfer.load('audio-file.mp3'); // 加载音频文件 // 当音频加载完成后执行回调函数 waveSurfer.on('ready', function () { const region = waveSurfer.addRegion({ start: 5, end: 8, color: 'rgba(255, 99, 71, 0.4)' }); }); ``` #### 获取现有区域列表 如果想要获取当前已存在的所有区域，则可通过调用 `getRegions()` 来实现。这会返回一个包含所有 Region 对象的数组[^3]。 #### 删除单个或全部区域 对于不再需要的区域可以选择单独移除或是清除整个画布上的所有标记。删除单一区域只需传入相应的 ID 即可；而清空则无需任何参数: ```javascript // 移除某个具体ID的区域 waveSurfer.clearRegion(region.id); // 清理所有的区域 waveSurfer.clearRegions(); ``` #### 更新已有区域的时间范围 调整已经设定好的区域边界也很简单，只需要修改对应 Region 实例的相关属性即可完成更新操作: ```javascript region.update({ start: newStartTimeInSeconds, end: newEndTimeInSeconds }); ``` 以上就是关于 wavesurfer.js 中区域功能的基础介绍以及基本的操作方法说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值