Skip to content

samhirtarif/react-audio-visualize

Repository files navigation

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)

screenshot

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)

livevisualizergif

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