@abrahamian/wavesurfer.js 中文文档教程

Question

wavesurfer.js

使用网络音频和画布的交互式导航音频可视化。

查看教程和wavesurfer-js.org 上的 .org/examples">示例。

Browser support

wavesurfer.js 仅适用于支持网络音频的现代浏览器。

它将回退到其他浏览器中的音频元素（没有图形）。 您也可以尝试 wavesurfer.swf，这是一个基于 Flash 的后备方案。

FAQ

Can the audio start playing before the waveform is drawn?

是的，如果您使用 backend: 'MediaElement' 选项。 请参阅此处：https://wavesurfer-js.org/example/audio-element/。 当您按下播放键时，音频将开始播放。 将显示一条细线，直到下载并解码整个音频文件以绘制波形。

Can drawing be done as file loads?

不可以。Web Audio 需要整个文件才能在浏览器中对其进行解码。 但是，您可以加载预解码的波形数据以立即绘制波形。 请参阅此处：https://wavesurfer-js.org/example/audio-element/（“预编码峰”部分）。

API in examples

选择一个容器：

<div id="waveform"></div>

创建一个实例，传递容器选择器和选项：

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
});

订阅一些events：

wavesurfer.on('ready', function () {
    wavesurfer.play();
});

从 URL 加载音频文件：

wavesurfer.load('example/media/demo.wav');

Documentation

查看所有可用的文档 方法、选项和事件 在主页。

Upgrade

如果您要从以前版本的 wavesurfer.js 升级，请参阅升级文档。

Using with a module bundler

Wavesurfer 可以与这样的模块系统一起使用：

// import
import WaveSurfer from 'wavesurfer.js';

// commonjs/requirejs
var WaveSurfer = require('wavesurfer.js');

// amd
define(['WaveSurfer'], function(WaveSurfer) {
  // ... code
});

Related projects

有关使用 wavesurfer.js 的项目列表，请查看 项目页面。

Development

安装开发依赖：

npm install

开发任务在文件时自动重建库的某些部分已更改（start – wavesurfer，start:plugins – 插件）。 启动开发任务并转到 localhost:8080/example/ 以测试当前构建。

启动核心库开发服务器：

npm run start

启动插件开发服务器：

npm run start:plugins

构建所有文件。 （生成的文件放在 dist 目录中。）

npm run build

仅运行测试：

npm run test

使用 esdoc 构建文档（生成的文件放在 doc 目录中。）

npm run doc

如果你想使用 < a href="https://github.com/Microsoft/vscode-chrome-debug">VS Code - Chrome 调试器，已经有一个 launch.json 为您正确配置了 sourceMapPathOverrides。

Editing documentation

主页和文档文件保存在 gh-pages 分支 . 特别欢迎对文档的贡献。

Credits

Alex Khokhulin 的初步想法。 许多 谢谢 很棒的贡献者！

License

本作品已获得许可 BSD 3-Clause 许可证。