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

波形图像是无聊音频小部件的绝佳补充。 它们既实用又美观，允许用户直观地浏览音频。 我最近找到了waveurfer.js，这是一个了不起的波形图像实用程序，可用于Web Audio API来创建超级可自定义的波形可视化，只需一分钟即可实现。

观看演示

首先在页面中包含waveurfer.js：

创建WaveSurfer的实例，并传递元素的选择器和其他配置选项 ：

var wavesurfer = WaveSurfer.create({
 // Use the id or class-name of the element you created, as a selector
 container: '#waveform',
 // The color can be either a simple CSS color or a Canvas gradient
 waveColor: 'grey',
 progressColor: 'hsla(200, 100%, 30%, 0.5)',
 cursorColor: '#fff',
 // This parameter makes the waveform look like SoundCloud's player
 barWidth: 3
});

最后，直接wavesurfer.js加载音频文件：

wavesurfer.load('RodStewartMaggieMay.mp3');

使用wavesurfer.js也可以轻松添加添加按钮来播放暂停，跳过和静音/取消静音：

  Backward



  Play | Pause



  Forward



  Toggle Mute

当歌曲继续前进时，wavesurfer.js会突出显示每个小节，甚至允许您在单击波形可视化中的点时跳过整首歌曲！

观看演示

Wavesurfer.js只需花费一点时间就可以实现，但是凭借其庞大的配置列表，您可以花费尽可能多的时间来使波形可视化适合您的品牌。

翻译自: https://davidwalsh.name/wavesurfer