Spectrogram

The <Spectrogram /> component visualizes the frequency spectrum of an audio file over time.


"use client";
 
import { Spectrogram } from "@clxrityy/react-audio";
 
export default function Example() {
  return <Spectrogram src="/audio/drums_2.wav" width={600} height={200} />;
};

Click the box below to interact with the spectrogram.

Props

Property	Type	Description	Required	Default Value
src	`string`	The source URL of the audio file to visualize.	✅	`undefined`
fftSize	`number`	The size of the FFT (Fast Fourier Transform) used for audio analysis.	❌	`1024`
width	`number \| string`	The width of the spectrogram display.	❌	`100%`
height	`number \| string`	The height of the spectrogram display.	❌	`25%`
minDecibels	`number`	The minimum decibel level for the spectrogram display.	❌	`-100`
maxDecibels	`number`	The maximum decibel level for the spectrogram display.	❌	`-25`
colorMap	`string[]`	An array of colors to use for the spectrogram visualization.	❌	`#111,#ff0000,#ffff00,#ffffff`
smoothingTimeConstant	`number`	The smoothing time constant for the analyser node.	❌	`0.8`
onFrameUpdate	`(data: Uint8Array) => void`	Callback function to handle frame updates with audio data.	❌	`undefined`
loop	`boolean`	Whether to loop the audio playback.	❌	`false`
fillStyle	`string`	The fill style for the spectrogram canvas.	❌	`undefined`