logo

Dynamické vizualizace křivek s wavesurfer.js

Obrázky tvaru vlny jsou úžasným doplňkem nudných zvukových widgetů. Mohou být funkční i esteticky příjemné a umožňují uživatelům procházet zvukem vizuálně. Nedávno jsem našel wavesurfer.js, úžasný nástroj pro zobrazování křivek, který využívá rozhraní Web Audio API k vytváření super přizpůsobitelných vizualizací křivek, jejichž implementace trvá jen minutu.

Zobrazit ukázku

Začněte tím, že na svou stránku zahrnete wavesurfer.js:

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

Vytvořte instanci WaveSurfer, předejte selektor prvku a další možnosti konfigurace:

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
});

Nakonec nasměrujte wavesurfer.js k načtení zvukového souboru:

wavesurfer.load('RodStewartMaggieMay.mp3');

Přidání tlačítek pro pozastavení, přeskočení a ztlumení/zapnutí zvuku je také snadné s 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 zvýrazňuje každý takt, jak se skladba pohybuje, a dokonce vám umožňuje přeskakovat skladbu, když kliknete na body ve vizualizaci průběhu!

Zobrazit ukázku

Implementace wavesurfer.js zabere jen chvilku, ale díky jeho rozsáhlému seznamu konfigurací můžete strávit tolik času, kolik chcete, aby vizualizace tvaru vlny odpovídala vaší značce.