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

首先在頁(yè)面中包含waveurfer.js：

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

創(chuàng)建WaveSurfer的實(shí)例，并傳遞元素的選擇器和其他配置選項(xiàng)：

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也可以輕松添加添加按鈕來(lái)播放暫停，跳過(guò)和靜音/取消靜音：

<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)歌曲前進(jìn)時(shí)，wavesurfer.js會(huì)突出顯示每個(gè)小節(jié)，甚至允許您在單擊波形可視化中的點(diǎn)時(shí)跳過(guò)整首歌曲！