(原始内容存档于2018-03-21). wasurfer.js
Vavesurfer.js (英语) 是一个交互式波形渲染和音频回放库,适合网络应用程序。 它利用现代的网络技术,提供强有力的视觉参与音频体验.
黄金赞助商 关闭字幕创建者
目录
开始
安装和导入软件包 :
npm install --save wavesurfer.js
import WaveSurfer from 'wavesurfer.js'
或者插入一个 UMD 脚本标签,将库导出为全局 WaveSurfer 变量 :
<script src="https://unpkg.com/wavesurfer.js@7"></script>
创建波浪实例并传递各种 选项数字 :
const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#4F4A85',
progressColor: '#383351',
url: '/audio.mp3',
})
要导入一个插件, 例如 区域插件数字 :
import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js'
或作为导出脚本标签 WaveSurfer.Regions数字 :
<script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>
TypeScript 类型包含在软件包中,所以不需要安装 @types/wavesurfer.js。 。 。 .
看见更多 实例。 。 。 .
API 参考
请参看我们网站上的wasurfer.js文档:
插件
我们维护一些添加各种额外功能的官方插件:
- 区域 - 音频区域的视觉覆盖和标记
- 时间线 - 在波形下方显示节点和时间标签
- 最小映射 - 一个小波形,作为主波形的滚动条
- 信封 – 一个图形界面来添加淡出和出出效果和控制音量
- 记录 - 记录麦克风的声音并制作出波形
- 光谱 - 音频频谱的可视化(由@akreal所写)
- 缓冲 - 在波形上显示垂直线和时间图
CSS 样式
wowsurfer.js v7被制成一棵影子DOM树. 这将其CSS与网页的其余部分隔离.
然而,仍然有可能将各种有CSS的Waverurfer.js元素通过 ::part() 伪选者.
例如:
#waveform ::part(cursor):before {
content: '🏄';
}
#waveform ::part(region) {
font-family: fantasy;
}
您可以在 DOM 检查员中看到您可以风格的元素 part 属性.
见 此示例 来玩弄造型.
问 题
关于将wasurfer.js整合到您的网站上的问题吗? 随便问吧 讨论论坛。 。 。 .
然而,请铭记,本论坛专门讨论瓦斯沃费尔具体问题。 如果你是JavaScript的新手, 需要帮助 普通基础, 如导入国家防范机制模块.
财务问题
我有点问题
Wavesurfer从您指定的 URL 获取音频以解码 。 确保此 URL 允许从您的域获取数据 。 在浏览器 JavaScript 中,您只能从中获取数据编辑器 相同领域 或另一个域,如果且仅在该域允许时 (简体中文)因此,如果音频文件位于外部域上,请确保域发送正确的访问控制-Allow-Origin信头。 请求方(即你的JS代码)对此无能为力.Wasurfer 支持大文件吗 ?
由于wasurfer在浏览器中完全使用Web Audio来解码音频,大片片段可能由于内存限制而无法解码. 我们建议对大文件使用预先解码的峰值(见 此示例) (中文(简体) ). 你可以使用一个工具,比如 bbc/ 自动波形 生成峰值.流传的音频呢?
仅以 预解码峰和持续时间。 。 。 .我的音频和波形有不匹配之处 我该怎么修?
如果使用VBR(可变比特率)音频文件,音频和波形之间可能存在不匹配. 这可以通过将您的文件转换为 CBR( 恒定比特速率)来固定.或者,你可以使用 网络音频 shim 这更准确.
我如何将Waverurfer.js与Web音频效果联系起来?
一般来说,wasurfer.js并不打算成为所有事物的包装器Web Audio. 它只是一个具有波形可视化的玩家. 它的确允许通过导出其音频元素来连接自己到一个Web音频图(参见 此示例)但无更相. 请不要期望浪客能够以任何方式切割,添加效果,或处理你的音频.从v6升级到v7
Wavesurfer.js v7是一款由Waveurfer.js重写而成的TypeScript重写,带来若干改进:
- 为更好的发展经验而输入的API
- 加强解码和渲染性能
- 新建和改进的插件
大多数选项,事件,方法都与前几个版本类似.
显著差异
- 默认情况下 HTML 音频回放( 用于选择通过)
backend: "MediaElement"(中文(简体) ) - 标记插件被删除 – 您应该使用区域插件, 只需要一个
startTime。 。 。 . - 没有麦克风插件 – 被更多功能的新唱片插件所取代.
- 光标插件被Hover插件所取代.
删除选项
audioContext, (中文(简体) ),closeAudioContext, (中文(简体) ),audioScriptProcessorautoCenterImmediately– 说吧 –autoCenter现在总是立即,除非音频在播放backgroundColor, (中文(简体) ),hideCursor- 这很容易通过CSS设定mediaType-你应该通过整个媒体元素media选项. 示例。 。 。 .partialRender- 默认完成pixelRatio– 说吧 –window.devicePixelRatio默认使用renderer- 目前只有一个渲染器 所以不需要这个选择responsive- 默认启用响应scrollParent- 如果minPxPerSec设置为更高值skipLength- 没有skipForward财务报告和审定财务报表skipBackward方法已经splitChannelsOptions- 你现在应该用splitChannels以通过频道选项。 过height: 0隐藏频道。 见 此示例。 。 。 .drawingContextAttributes, (中文(简体) ),maxCanvasWidth, (中文(简体) ),forceDecode- 删除以减少代码复杂度xhr- 请用fetchParams换成barMinHeight- 默认最小栏高为 1 像素
删除的方法
getFilters, (中文(简体) ),setFilter- 看到了吗 Web 音频示例drawBuffer- 重新绘制波形,使用setOptions转而通过新的渲染选项cancelAjax- 你可以通过一个 中止符号 内fetchParamsskipForward, (中文(简体) ),skipBackward, (中文(简体) ),setPlayEnd- 可使用setTime(time)exportPCM替换为exportPeaks返回浮点数组toggleMute现在叫做setMuted(true | false)setHeight, (中文(简体) ),setWaveColor, (中文(简体) ),setCursorColor等 – 使用setOptions改为相应的参数。 例如,wavesurfer.setOptions({ height: 300, waveColor: '#abc' })
见完整 新API的文档。 。 。 .
发展
为了从发展入手,遵循这些步骤:
- 安装非依赖性 :
yarn
- 在监视模式下启动 TypeScript 编译器并启动 HTTP 服务器 :
yarn start
此命令将在您的浏览器中打开 http://localhost: 9090, 并进行活的重载, 允许您看到您正在开发的更改 .
测试
测试用Cypress框架书写. 它们是e2e和视觉回归测试的组合.
要在当地运行测试套件,首先要构建项目:
yarn build
然后启动测试:
yarn cypress
反馈
我们感谢你的反馈和贡献!
如果你遇到任何问题或有改进建议,请不要犹豫,在我们这里张贴 论坛。 。 。 .
我们希望你们喜欢使用wasurfer.js,并期待着听到你们在图书馆的经历!