react-audio-visualize

The LiveAudioVisualizer component provides real-time visualization of an active audio stream from a MediaRecorder instance. It uses Web Audio API concepts like FFT size and decibel scaling to render the visualization.

Props

import React, { useState } from 'react';
import { LiveAudioVisualizer } from 'react-audio-visualize';

const Visualizer = () => {
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();

  // set media recorder somewhere in code

  return (
    <div>
      {mediaRecorder && (
        <LiveAudioVisualizer
          mediaRecorder={mediaRecorder}
          width={200}
          height={75}
        />
      )}
    </div>
  )
}

The AudioVisualizer component is used to visualize pre-recorded audio data provided as a Blob. It renders a canvas-based visualization where bars can change color based on the currentTime prop, allowing you to show progress through the audio file.

Props

import React, { useState, useRef } from 'react';
import { AudioVisualizer } from 'react-audio-visualize';

const Visualizer = () => {
  const [blob, setBlob] = useState<Blob>();
  const visualizerRef = useRef<HTMLCanvasElement>(null)

  // set blob somewhere in code

  return (
    <div>
      {blob && (
        <AudioVisualizer
          ref={visualizerRef}
          blob={blob}
          width={500}
          height={75}
          barWidth={1}
          gap={0}
          barColor={'#f76565'}
        />
      )}
    </div>
  )
}

The following configuration options are available for the LiveAudioVisualizer component.

export interface Props {
  /** Media recorder who's stream needs to visualized */
  mediaRecorder: MediaRecorder;
  /** Width of the visualization. Default "100%" */
  width?: number | string;
  /** Height of the visualization. Default "100%" */
  height?: number | string;
  /** Width of each individual bar in the visualization. Default: `2` */
  barWidth?: number;
  /** Gap between each bar in the visualization. Default `1` */
  gap?: number;
  /** BackgroundColor for the visualization: Default `transparent` */
  backgroundColor?: string;
  /** Color of the bars drawn in the visualization. Default: `"rgb(160, 198, 255)"` */
  barColor?: string;
  /** An unsigned integer, representing the window size of the FFT, given in number of samples. */
  fftSize?: 32 | 64 | 128 | 256 | 512 | 1024 | 2048 | 4096 | 8192 | 16384 | 32768;
  /** A double, representing the maximum decibel value for scaling the FFT analysis data */
  maxDecibels?: number;
  /** A double, representing the minimum decibel value for scaling the FFT analysis data */
  minDecibels?: number;
  /** A double within the range 0 to 1 (0 meaning no time averaging). The default value is 0.4. */
  smoothingTimeConstant?: number;
}