Powerful Voice Visualizer For React

A powered voice visualizer library that provides a simple way to capture, visualize, and manipulate voice data for uses like voice recognition, sound analysis, and more. Powered by Web Audio API.

Create for React, this library taps into the power of the Web Audio API, delivering a suite of functionalities from audio recording to real-time visualization.

How to use it:

1. Install and import the necessary hook and component from the library

# Yarn
$ yarn react-voice-visualizer

# NPM
$ npm i react-voice-visualizer

import { useEffect } from "react";
import { useVoiceVisualizer, VoiceVisualizer } from "react-voice-visualizer";

2. Basic usage.

const App = () => {
  // Initialize the recorder controls using the hook
  const recorderControls = useVoiceVisualizer();
  const {
      // ... (Extracted controls and states, if necessary)
      recordedBlob,
      error,
      audioRef,
  } = recorderControls;
  // Get the recorded audio blob
  useEffect(() => {
      if (!recordedBlob) return;
      console.log(recordedBlob);
  }, [recordedBlob, error]);
  // Get the error when it occurs
  useEffect(() => {
      if (!error) return;
      console.log(error);
  }, [error]);
  return (
      <VoiceVisualizer controls={recorderControls} ref={audioRef}/>
  );
};
export default App;

3. Or load any existing reconding data.

useEffect(() => {
  // Set the preloaded audioBlob when the component mounts
  // Assuming 'audioBlob' is defined somewhere
  if (audioBlob) {
    setPreloadedAudioBlob(audioBlob);
  }
}, [audioBlob]);

4. Available component props.

controls: { // audio recording controls and states
  audioData,
  isRecordingInProgress,
  recordedBlob,
  duration,
  audioSrc,
  currentAudioTime,
  bufferFromRecordedBlob,
  togglePauseResume,
  startRecording,
  stopRecording,
  saveAudioFile,
  recordingTime,
  isPausedRecordedAudio,
  isPausedRecording,
  isProcessingRecordedAudio,
  isCleared,
  clearCanvas,
  _handleTimeUpdate,
},
width = "100%",
height = 200,
speed = 3,
backgroundColor = "transparent",
mainBarColor = "#FFFFFF",
secondaryBarColor = "#5e5e5e",
barWidth = 2,
gap = 1,
rounded = 5,
isControlPanelShown = true,
isDownloadAudioButtonShown = false,
animateCurrentPick = true,
fullscreen = true,
onlyRecording = false,
isDefaultUIShown = false,
defaultMicrophoneIconColor = mainBarColor,
defaultAudioWaveIconColor = mainBarColor,
canvasContainerClassName,
isProgressIndicatorShown = !onlyRecording,
progressIndicatorClassName,
isProgressIndicatorTimeShown = true,
progressIndicatorTimeClassName,
isProgressIndicatorOnHoverShown = !onlyRecording,
progressIndicatorOnHoverClassName,
isProgressIndicatorTimeOnHoverShown = true,
progressIndicatorTimeOnHoverClassName,
isAudioProcessingTextShown = true,
audioProcessingTextClassName,
controlButtonsClassName,

Preview:

Download Details:

Author: YZarytskyi

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/YZarytskyi/react-voice-visualizer

License: MIT