Howler Audio Player + Visualizer — Free JS Audio Card Snippet

Howler.js wraps the Web Audio API (falling back to HTML5 audio automatically) behind a small, consistent API — new Howl({ src, loop }), .play(), .pause(), .seek(), .playing(), .duration() — so a play/pause/seek card doesn't need to hand-manage an <audio> element's quirks across browsers. This snippet pairs that real Howler-driven transport with a canvas bar visualizer, and is explicit about a limitation worth understanding: Howler doesn't expose raw frequency data out of the box, so the bars here are a convincing simulation driven by howl.playing(), not a true FFT analysis.

Real Howler transport controls

The play button toggles between howl.play()/howl.pause() and checks howl.playing() to decide which; the range input calls howl.seek() on change and reads howl.seek()/howl.duration() on every animation frame to keep the scrubber and time label in sync while playing. All of that is exactly how you'd wire Howler in production — nothing about the transport is simulated.

Why the visualizer is simulated, and how to make it real

Howler doesn't ship a frequency analyser; getting real bars requires reaching into the Web Audio graph yourself — creating an AnalyserNode, connecting the Howl instance's underlying audio node to it (howl._sounds[0]._node, an internal but commonly-used escape hatch), and reading analyser.getByteFrequencyData() each frame. Since this snippet ships without a guaranteed-available audio source (a hosted sample URL can go stale), the visualizer instead draws bars whose height follows a sine wave plus jitter, gated entirely by howl.playing() (or a demo flag if the audio fails to load) — visually convincing, honestly labeled in the comments as a stand-in, and never dependent on the audio actually decoding.

Never a blank or broken card

howl.on('loaderror', ...) sets a flag that keeps the play button and visualizer fully functional even if the sample URL is unreachable — clicking still toggles a demo playing state and animates the bars, so the card never looks broken even when the network does something unexpected. This is the same never-blank principle used for Rive interactive icon's fallback SVG.

Where this fits

For a genuine waveform rendered from decoded audio data rather than a live bar visualizer, see audio waveform visualizer; for a full player layout, see music player or podcast player; for recording rather than playback, see voice memo recorder.

Customizing it

Swap the src array for your own hosted file, and if you need a real spectrum instead of the sine simulation, add the AnalyserNode wiring described above and replace the bar-height calculation in draw() with analyser.getByteFrequencyData(dataArray) values.