react-sound-visualizer

Description

This library acts as a lightweight React wrapper for sound-visualizer.

You can check it out by visiting the codesandbox.

Getting Started

Installation

npm install react-sound-visualizer

Usage

You'll mainly want to use the Visualizer component (you can see more documentation for it below):

import { useEffect, useState } from 'react';
import { Visualizer } from 'react-sound-visualizer';

function App() {
  const [audio, setAudio] = useState<MediaStream | null>(null);

  useEffect(() => {
    navigator.mediaDevices
      .getUserMedia({
        audio: true,
        video: false,
      })
      .then(setAudio);
  }, []);

  return (
      <Visualizer audio={audio}>
        {({ canvasRef, stop, start, reset }) => (
          <>
            <canvas ref={canvasRef} width={500} height={100} />

            <div>
              <button onClick={start}>Start</button>
              <button onClick={stop}>Stop</button>
              <button onClick={reset}>Reset</button>
            </div>
          </>
        )}
      </Visualizer>
  );
}

export default App;

If you need even more control over the visualization, the useVisualizer hook (used by Visualizer behind the scenes) is also exported.

Documentation

Components

Visualizer

Props

Hooks

useVisualizer

export function useVisualizer(
    audio: MediaStream | null,
    canvas: HTMLCanvasElement | null,
    options?: UseVisualizerOptions
): Partial<VisualizerFunctions>;

The useVisualizer hook acts as a simple wrapper for both the currentVisualizer and continuousVisualizer functions from sound-visualizer, which allows the user to pass null for the audio and canvas parameters and returns an empty object if null is passed for either. It also wraps the VisualizerFunctions that are returned in a useMemo hook. (Note: if you would rather not use a memo, you can directly use the visualizerWrapper function)

Types

VisualizerChildrenProps

export interface VisualizerChildrenProps {
  canvasRef: (canvas: HTMLCanvasElement) => void;
  start?: () => void;
  stop?: () => void;
  reset?: () => void;
}

The Visualizer's children prop must be a function that returns a ReactNode. The canvasRef must be passed as the ref prop to an HTML canvas element, or else the visualizer will not draw anything!

UseVisualizerOptions

export type UseVisualizerOptions =
    | { mode: "current" } & DrawCurrentOptions
    | { mode?: "continuous" & DrawContinuousOptions

Where DrawCurrentOptions and DrawContinuousOptions are the types from sound-visualizer.

Notes

The visualizerWrapper function, used internally by useVisualizer, is exposed for convenience.