Skip to content

WaveformProps

Props for the Waveform component.

  • WaveformOptions
PropertyTypeDescriptionInherited from
amplitudeScale?numberMultiplier applied to audio sample amplitudes for gain adjustment. Default 1.0WaveformOptions.amplitudeScale
audio?HTMLAudioElement--
autoRender?booleanWhether to automatically re-render when viewport or configuration changes. Default trueWaveformOptions.autoRender
autoResize?booleanWhether to automatically resize canvas pixel resolution when container dimensions change. Default trueWaveformOptions.autoResize
backgroundColor?stringBackground fill color for the canvas. Default "transparent"WaveformOptions.backgroundColor
canvasProps?HTMLAttributes<HTMLCanvasElement>--
channel?numberAudio channel index to visualize (0 for left/mono, 1 for right). Default 0WaveformOptions.channel
className?string--
color?stringPrimary color for the waveform line or bars. Default "#38bdf8"WaveformOptions.color
colorMap?ColorMapConfigNamed colormap or palette configuration used to derive a matching solid color. Samples a representative accent color from the palette to align with spectrogram visuals. Overrides the color property when specified. Default undefinedWaveformOptions.colorMap
devicePixelRatio?number | booleanDevice pixel ratio scaling factor for HiDPI/Retina displays. Default window.devicePixelRatioWaveformOptions.devicePixelRatio
height?string | number--
navigation?boolean | NavigationOptions--
onReady?(viewer: WaveformViewer) => void--
playheadClassName?string--
playheadStyle?CSSProperties--
renderer?WaveformRendererModeRendering engine: - “canvas2d”: Standard 2D canvas line/envelope renderer. - “webgl2”: Hardware-accelerated GPU shader renderer. - “bars”: Segmented pill/bar waveform renderer. - Custom object with bar configuration options ({ type: "bars", barWidth, barGap, ... }). Default "canvas2d"WaveformOptions.renderer
scope?Sonoscope | null--
showPlayhead?boolean--
source?AudioSource--
style?CSSProperties--
url?string--
width?string | number--