@sonoscope/react

React hooks and declarative components for Sonoscope audio visualization.

Installation

npm install @sonoscope/react @sonoscope/core

Quick start

Synchronized multi-viewer (<Waveform /> + <Spectrogram />)

import {
  SonoscopeProvider,
  Spectrogram,
  Waveform,
  useSonoscope,
} from "@sonoscope/react";

export function AudioViewer({ url }: { url: string }) {
  const { scope, loading, error } = useSonoscope({
    url,
    followPlayback: "page",
  });

  if (loading) return <div>Loading audio...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <SonoscopeProvider value={scope}>
      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
        <Waveform style={{ height: "80px" }} amplitudeScale={1.2} />
        <Spectrogram
          style={{ height: "300px" }}
          colorMap="magma"
          frequencyScale="mel"
          valueMode="db"
        />
      </div>
    </SonoscopeProvider>
  );
}

Standalone declarative component

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

export function SingleSpectrogram() {
  return (
    <Spectrogram
      url="https://example.com/audio.wav"
      colorMap="magma"
      frequencyScale="mel"
      valueMode="db"
      showAudioControls
      style={{ height: "300px" }}
    />
  );
}

Custom hooks

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

export function CustomViewer() {
  const { canvasRef, audioRef, status, duration } = useSpectrogram({
    url: "https://example.com/audio.mp3",
    colorMap: "cividis",
    minDb: -100,
    maxDb: 0,
  });

  return (
    <div>
      <canvas ref={canvasRef} style={{ width: "100%", height: "300px" }} />
      <audio ref={audioRef} controls />
    </div>
  );
}