波形圖像是無聊的音頻小部件的絕佳補充。它們既實用又美觀，可以使用戶直觀地瀏覽音頻。我最近找到了waveurfer.js，這是一個了不起的波形圖像實用程序，可用于Web Audio API來創(chuàng)建超級可自定義的波形可視化，只需一分鐘即可實現(xiàn)。

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

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

創(chuàng)建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>

當(dāng)歌曲前進時，wavesurfer.js會突出顯示每個小節(jié)，甚至允許您在單擊波形可視化中的點時跳過整首歌曲！