Waveform Player

A compact audio player built on audio-waveform: play/pause, elapsed and total time, played-progress coloring, and click/drag-to-seek on the waveform.

Installation

One-time setup: add the @ikui registry to your components.json.

components.json

{
  "registries": {
    "@ikui": "https://ik-ui.pages.dev/r/{name}.json"
  }
}

Then install the component:

pnpm dlx shadcn@latest add @ikui/waveform-player

import { WaveformPlayer } from "@/components/waveform-player";

<WaveformPlayer blob={blob} />

<WaveformPlayer url="/audio/sample.mp3" />

Click or drag anywhere across the waveform to seek to that position.

barColor sets the unplayed bars and barPlayedColor the played portion (left of the playhead). Both accept any CSS color string.