Audio Visualizer
Render an audio blob as a canvas waveform, with played and unplayed bars driven by the current playback time.
Installation
pnpm dlx shadcn@latest add @ikui/audio-visualizerExamples
Playback Progress
Pass currentTime to color the bars that have already been played with
barPlayedColor.
Usage
import { AudioVisualizer } from "@/components/audio-visualizer";<AudioVisualizer blob={blob} height={80} />Props
| Prop | Type | Default |
|---|---|---|
blob | Blob | - |
height | number | - |
width | number | - |
barWidth | number | 2 |
gap | number | 1 |
currentTime | number | - |
backgroundColor | string | transparent |
barColor | string | rgb(184, 184, 184) |
barPlayedColor | string | rgb(160, 198, 255) |
style | React.CSSProperties | - |