使用wavesurfer.js实现动态波形可视化

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

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

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>

创建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也可以轻松添加添加按钮来播放暂停，跳过和静音/取消静音：

<button onclick="wavesurfer.skipBackward()">
  Backward
</button>

<button onclick="wavesurfer.playPause()">
  Play | Pause
</button>

<button onclick="wavesurfer.skipForward()">
  Forward
</button>

<button onclick="wavesurfer.toggleMute()">
  Toggle Mute
</button>

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