Waveform

The waveform component is used to display audio waveforms. It can be used to visualize audio files in a user-friendly way.


"use client";
import { Waveform } from "@clxrity/react-audio";
 
export default function WaveformExample() {
  return (
    <div>
      <Waveform src="/audio/drums_2.wav" />
    </div>
  );
}

Props

Property	Type	Description	Required	Default Value
src	`string`	The source URL of the audio file to visualize. (internal unless CORS settings are configured)	✅	`undefined`
size	`number`	The size of the canvas element in pixels.	❌	`420`
color	`string`	The color of the waveform.	❌	`primary`
autoplay	`boolean`	Whether to autoplay the audio when the component is mounted.	❌	`false`
loop	`boolean`	Whether to loop the audio playback.	❌	`false`
showProgress	`boolean`	Whether to show the progress of the audio playback.	❌	`false`
showVolume	`boolean`	Whether to show the volume control.	❌	`false`
fftSize	`number`	The size of the FFT (Fast Fourier Transform) used for audio analysis.	❌	`2048`
onLoad	`() => void`	Callback function to be called when the audio is loaded.	❌	`undefined`
audioRef	`RefObject<HTMLAudioElement \| null> \| null`	A reference to the HTML audio element. If not provided, a new ref will be created.	❌	`null`