Powerful Voice Visualizer For React

Description:

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:

Powerful Voice Visualizer For React

Add Comment