SpectrogramPro
A spectrogram on canvas in the gray ramp with a log frequency axis: a whole recording with a playhead and seek, or live from an analyser or a stream, with a hover readout.
On this page
ProA song on a log frequency axis in the gray ramp: the playhead follows playback, click to jump, hover to read.
Installation
Usage
import { Spectrogram } from "@/components/ui/chatcn/pro/spectrogram"
<Spectrogram buffer={audioBuffer} progress={time / duration} onSeek={seek} />
<Spectrogram stream={micStream} />Static audio is analysed once with spectrogramOf (a Hann windowed FFT); live input scrolls a column at a time and pauses off screen. Colors come from the theme, so it follows light, dark and contrast settings.
Examples
States
ProLive from an input, one stem, nothing to show yet and unreadable audio.
Props
| Prop | Type | Notes |
|---|---|---|
buffer | AudioBuffer | () => Promise<AudioBuffer> | A recording to draw whole |
analyser, stream | Live input | |
progress, onSeek | Playhead and click to seek | |
minHz, maxHz | number | Default 30 Hz to 16 kHz |
floor, ceiling | number | Color range in dB. Default -100 to -25 |
axis | boolean | Default true |
labels | Partial<SpectrogramLabels> | Every string the spectrogram shows or announces, for translation |
Keyboard
| Key | Action |
|---|---|
| None | It is a picture of the audio; seek with the player's own controls |
Accessibility
- The canvas is an image named with its length and range: "Spectrogram, 0:21, 30 Hz to 16 kHz".
- Empty and unreadable states are in text.
Motion
- Live input scrolls because time passes and stops off screen. Under reduced motion it draws at a third of the rate.