@sonoscope/react

@sonoscope/react provides React 18+ and React 19 compatible components and hooks for building custom audio interfaces.

Components

<SonoscopeProvider />

Provides the shared Sonoscope instance and coordinated viewport context to child components.

import { SonoscopeProvider } from "@sonoscope/react";

<SonoscopeProvider url="/audio/birdsong.wav">
  {/* Nested viewers and rulers */}
</SonoscopeProvider>

Full reference: SonoscopeProvider, SonoscopeProviderProps.

<Spectrogram />

Renders an interactive spectrogram canvas synchronized with the provider’s scope.

import { Spectrogram } from "@sonoscope/react";

<Spectrogram
  height={320}
  colorMap="plasma"
  frequencyScale="mel"
  minDb={-80}
  maxDb={0}
  showAudioControls
/>

Full reference: Spectrogram, SpectrogramProps, SpectrogramHandle.

<Waveform />

Renders peak-pyramid accelerated audio waveforms.

import { Waveform } from "@sonoscope/react";

<Waveform height={80} colorMap="plasma" />

Full reference: Waveform, WaveformProps, WaveformHandle.

<TimeRuler /> and <FrequencyRuler />

Renders aligned time and frequency axes with automatic unit scaling.

import { TimeRuler, FrequencyRuler } from "@sonoscope/react";

<TimeRuler height={24} tickPosition="top" />
<FrequencyRuler width={56} tickPosition="right" />

Full reference: TimeRuler, FrequencyRuler, TimeRulerProps, FrequencyRulerProps.

Custom Hooks

• useSonoscope(options): Manage the lifecycle of an independent or shared Sonoscope instance.
• useSonoscopeContext(): Access the nearest Sonoscope coordinator from context.
• useSpectrogram(options): Direct canvas binding to a SpectrogramViewer.
• useTimeRuler(options): Canvas binding for time rulers.
• useFrequencyRuler(options): Canvas binding for frequency rulers.