WaveSurfer.js

JavaScript

Audio & sound

Display and interact with audio waveforms.

What it does

WaveSurfer.js renders an interactive waveform visualization of audio files. You can play, pause, zoom, and add markers — like a mini audio editor.

When to use it

Use this when you want to show a waveform visualization for audio content.

Real example

You're building a podcast player and want to show a clickable waveform so users can scrub through episodes. Prompt: 'Use WaveSurfer.js to render a waveform for the audio file at /episode1.mp3 inside #waveform. Add play/pause button. Show current time and total duration. Style the waveform with waveColor: "#F55048" and progressColor: "#333".'

Good to know

Great for podcast players, voice recorders, or any app that needs waveform display.

Alternatives

Howler.js

Install

$ npm install wavesurfer.js

Use cases

waveformaudio playerpodcastvoice recorder

Language

JavaScript

More in Audio & sound

Other tools in the same category

JS Tone.js

Build synthesizers, sequencers, and interactive audio in the browser.

synthesizerstep sequencermusic tool

JS Howler.js

Simple audio playback library — sound effects, music, spatial audio.

sound effectsbackground musicgame audio