react-audio-visualize v1.1.3

react-audio-visualize

An audio visualizer for React. Provides separate components to visualize both live audio and audio blobs.

Installation

npm install react-audio-visualize

AudioVisualizer Component (Example)

import React, { useState } 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>
  )
}

LiveAudioVisualizer Component (Example)

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>
  )
}