AUDIO VISUALIZATION TOOLKIT

Highly interactive, customizable waveforms, with less wiring

An ergonomic audio toolkit with reliable playback and fully customizable waveforms. Simple APIs, accessible controls, and a look that’s yours.

Start building Give it a listen

Prompt for your coding agentCodex · Claude Code · Cursor

Add a raavl audio waveform player to this app. Read https://raavl.dev/skill.md and follow its integration workflow. Use https://raavl.dev/llms.txt to find the relevant API documentation. Match this app's framework, preserve its existing styles, and verify playback, accessible seeking, errors, and resource cleanup.

Prefer to do it yourself? Follow the quickstart

How it feels

bach_classical.mp3

Bach · classical

0:00 / 0:00

Mouse, touch, and keyboard. All welcome.

Explore examples

IT'S THE LITTLE THINGS

Easy to wire up. Yours to shape.

Connect playback through clear methods and observable state. Use JavaScript or React, bring your own controls, and style the waveform to fit your application.

Less state plumbing.Play, pause, seek, and subscribe to changes without keeping a second playback state in sync.
Style it where you work.Use CSS tokens, reusable themes, and drawing options to control colors, bars, spacing, and rounded corners.
Add features as you need them.Start with playback. Add editable regions, markers, a timeline, or a minimap as your interface grows.

Quickstart Docs for agents

import { AudioPlayer } from 'raavl/react';
import 'raavl/styles.css';

export function AudioPlayback() {
  return <AudioPlayer
    source={{ kind: 'url', id: 'my-audio', url: '/audio.mp3' }}
    waveform={{ interaction: { drag: 'seek' } }}
    controls={{ playbackRate: true, loop: true }}
    aria-label="Audio player"
  />;
}import { AudioPlayer } from 'raavl/react';import 'raavl/styles.css';export function AudioPlayback() {  return <AudioPlayer    source={{ kind: 'url', id: 'my-audio', url: '/audio.mp3' }}    waveform={{ interaction: { drag: 'seek' } }}    controls={{ playbackRate: true, loop: true }}    aria-label="Audio player"  />;}