react-audio-visualize

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

Props	Description	Default	Optional
blob	Audio blob to visualize	N/A	No
width	Width of the visualizer	N/A	No
height	Height of the visualizer	N/A	No
barWidth	Width of each individual bar in the visualization	2	Yes
gap	Gap between each bar in the visualization	1	Yes
backgroundColor	BackgroundColor for the visualization	transparent	Yes
barColor	Color for the bars that have not yet been played	"rgb(184, 184, 184)""	Yes
barPlayedColor	Color for the bars that have been played	"rgb(160, 198, 255)""	Yes
currentTime	Current time stamp till which the audio blob has been played. Visualized bars that fall before the current time will have barPlayerColor, while that ones that fall after will have barColor	N/A	Yes
style	Custom styles that can be passed to the visualization canvas	N/A	Yes
ref	A ForwardedRef for the HTMLCanvasElement	N/A	Yes

---

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

Props	Description	Default	Optional
mediaRecorder	Media recorder who's stream needs to visualized	N/A	No
width	Width of the visualizer	100%	Yes
height	Height of the visualizer	100%	Yes
barWidth	Width of each individual bar in the visualization	2	Yes
gap	Gap between each bar in the visualization	1	Yes
backgroundColor	BackgroundColor for the visualization	transparent	Yes
barColor	Color for the bars that have not yet been played	"rgb(160, 198, 255)"	Yes
fftSize	An unsigned integer, representing the window size of the FFT, given in number of samples. For more details	1024	Yes
maxDecibels	A double, representing the maximum decibel value for scaling the FFT analysis data. For more details	-10	Yes
minDecibels	A double, representing the minimum decibel value for scaling the FFT analysis data, where 0 dB is the loudest possible sound. For more details	-90	Yes
smoothingTimeConstant	A double within the range 0 to 1 (0 meaning no time averaging). For more details	0.4	Yes