【学习笔记】网页开发专用声音处理程序：「wavesurfer.js」

WaveSurfer.js 是一个可以用于网页上的 JavaScript 应用程序库，它的主要功能是让开发人员可以轻松地在网站里，嵌入音讯播放器并加入许多特别影像效果，将声音转换成可视化图形。

随著短影音和影片流行起来，其中不管是音乐或音效制作，声音处理都是不可或缺的一部分。

今天要特别记录下来学习的「wavesurfer.js」，是一个基于 Web 技术的声音可视化和处理库，透过 Web Audio API 和 HTML5 Canvas 技术，可以方便地在网页中加载 Audio 音讯文件，实时显示声音波形，同时还提供一些强大的声音处理功能（例如下图一所示的等化器功能），是有志在开发声音、音乐、音效类网页的人不可错过的好用工具。

图一，自订等化器。

下面将来介绍 wavesurfer.js 的一些基本功能和技术特点。

WaveSurfer.js 基本功能

加载音频文件

wavesurfer.js 可以轻松加载音频文件，并自动绘制出音频波形。用户可以透过 load 方法将音频文件加载进来，例如：

var wavesurfer = WaveSurfer.create({ container: ‘#waveform’, waveColor: ‘violet’, progressColor: ‘purple’ }); wavesurfer.load(‘/path/to/my/audio/file.mp3’);

在上面的例子中，container 是指定音频波形绘制的位置，waveColor 和 progressColor 是设置波形的颜色。使用 load 方法将指定的音频文件加载进来后，就可以在网页中显示如下图二所示的音频波形了。

图二，WaveSurfer.js 播放界面

声音处理

wavesurfer.js 提供了一些基本的声音处理功能，包括：

• 音量调整
• 暂停和播放
• 快进和快退
• 循环播放
• 静音
• 播放速度调整

用户可以透过相应的方法调用这些功能。例如，要暂停、播放音频，或是设置循环播放，可以分别使用以下二代码：

wavesurfer.playPause(); // 暂停或播放

wavesurfer.setLoop(true); // 设置循环播放为 true

波形视觉化

wavesurfer.js 提供了丰富的波形视觉化选项，可以让用户自由设置波形的颜色、宽度、高度等。例如，可以使用以下代码设置波形的颜色和高度：

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

支持外挂（插件）

wavesurfer.js 提供了多个外挂（插件），可以进一步扩展其功能和增加更多的声音处理选项。以下是几个常用的插件：

1. Timeline（时间轴）：这个插件可以在音讯波形上添加时间轴，方便用户对音讯进行精确的导航和编辑。用户可以在时间轴上拖动标记点，快速跳转到指定的时间点。
2. Regions（区域）：这个插件允许用户在音讯波形上划定区域，并对这些区域应用不同的操作。例如，可以选择对某个区域进行循环播放、增加特效或者提取声音片段。
3. Spectrogram（频谱图，参考下图三）：这个插件可以生成音讯的频谱图，将其频谱信息以图形方式呈现。用户可以更直观地观察音频的频率分布和变化。
4. Minimap（缩略图）：这个插件可以在音频波形旁边添加一个缩略图，显示整个音频文件的缩小版本。用户可以通过缩略图快速导航长音频文件，并在整个波形上进行操作。

图三，透过外挂处理的频谱图（Spectrogram）

除了以上提到的插件，wavesurfer.js 还有其他一些插件，如录音、回放、可编辑标签等，这些插件提供了更多的音频处理和操作选项，让用户能够根据自己的需求进行更多的定制和功能扩展。

参考文献

1. 官方网站：「wavesurfer.js」