AudioWaveform

Media

Canvas-based audio waveform visualization with playback progress.

Live Demo

Interactive waveform visualization. This component requires an audio URL to render the waveform.

Provide an audioUrl prop to render a live waveform with playback controls.

<AudioWaveform audioUrl="/audio/sample.mp3" height={80} waveColor="neutral" progressColor="accent" />

<script>
  import { AudioWaveform } from "jatui"
</script>

<AudioWaveform />

Prop	Type	Default	Description
`audioUrl`	`string`	`-`	Audio file URL
`height`	`number`	`80`	Canvas height
`waveColor`	`string`	`"neutral"`	Waveform DaisyUI color
`progressColor`	`string`	`"accent"`	Progress DaisyUI color
`interactive`	`boolean`	`true`	Allow click-to-seek