Why we decided to use wavesurfer.js

The main challenge

In one of our projects, we faced the business requirement to create a custom audio player — nothing complex, with several controls: play, pause, previous and next track, and changing volume. The challenge was the player should also be responsible for drawing the audio spectrum.

Playback Controls

Play, pause, previous/next track, volume control.

Waveform Spectrum

Visual representation of the audio signal drawn in real time.

Custom Design

Must match our existing UI — no generic player widgets.

Available solutions

Building a basic audio player with the browser's Audio API is straightforward. Drawing a waveform spectrum is where it gets complex. There are algorithms available on the web, but adjusting them to specific designs and interactions is time-consuming. We decided to look for a ready-made library.

Does a Vue.js Audio Player library exist?

At MusicTech Lab, our standard frontend stack is Vue.js. Our first idea was to find a Vue.js audio library. Unfortunately, none of the available options matched our needs — some could play tracks and draw a spectrum, but customising them to our designs was impossible. Time was running out, and we had only a few weeks to close this topic.

We evaluated several Vue.js audio libraries, but none offered the combination of waveform rendering and design flexibility we needed. Most were either too opinionated in their UI or lacked spectrum visualisation entirely.

Our solution: WaveSurfer.js

Finally, we found WaveSurfer.js — a customisable audio spectrum visualisation library based on the Audio API and HTML5 Canvas. With over ten years of development, it was a proven candidate.

Playback Controls

Play, pause, switch tracks, volume — all supported out of the box.

Waveform Rendering

Fully customisable spectrum — colours, height, progress bar, container size.

Plugin System

Extend functionality with plugins like Regions, Timeline, and Minimap.

We quickly configured the waveform container — height, width, colours for the wave and progress — and it matched our designs. A few lines of configuration replaced hundreds of lines of custom code.

The Regions Plugin

Our business requirement was to let users play hooks — specific parts of a track like a chorus or guitar riff, highlighted on the spectrum. The Regions plugin was exactly what we needed.

Visual Markers

Creates highlighted regions on the waveform that can be resized, moved, and played in a loop.

Loop Playback

Users select a hook — chorus, riff, intro — and the Regions plugin handles looped playback of that segment.

The hook menu above the spectrum is a custom component, but the hook highlighting and playback is fully powered by the Regions plugin.

Result

WaveSurfer.js saved us significant development time. The configuration is simple, the library is stable, and you can achieve what you need quickly. The only downside is the documentation — it could use more examples for advanced methods.

We recommend this library to anyone building a similar audio component.