Skip to main content

​
Overview

This guide will walk you through creating a fully functional audio recorder with real-time visualization. You’ll learn how to use the useVoiceVisualizer hook and VoiceVisualizer component to build a complete audio recording experience.
Check out the live demo app to see what you’ll be building!

​
Installation

First, install the package if you haven’t already: 
npm install react-voice-visualizer

​
Basic Implementation

1

Import the hook and component

Import useVoiceVisualizer and VoiceVisualizer from the library:
import { useEffect } from "react";
import { useVoiceVisualizer, VoiceVisualizer } from "react-voice-visualizer";
2

Initialize the recorder controls

Use the useVoiceVisualizer hook to initialize the recorder controls. This hook returns all the state and functions needed to manage audio recording:
const App = () => {
  // Initialize the recorder controls using the hook
  const recorderControls = useVoiceVisualizer();
  const {
    // ... (Extracted controls and states, if necessary)
    recordedBlob,
    error,
  } = recorderControls;
};
The useVoiceVisualizer hook handles all the complexity of microphone access, recording state, and audio processing. You just need to pass the returned controls to the component.
3

Access the recorded audio

Use React’s useEffect hook to access the recorded audio blob when recording completes:
// Get the recorded audio blob
useEffect(() => {
  if (!recordedBlob) return;

  console.log(recordedBlob);
  // You can now upload the blob, convert it, or process it further
}, [recordedBlob]);

// Get the error when it occurs
useEffect(() => {
  if (!error) return;

  console.error(error);
}, [error]);
The recordedBlob is a Blob object containing the recorded audio in WebM format. You can upload it to a server, convert it to other formats using libraries like FFmpeg, or play it back directly.
4

Render the VoiceVisualizer component

Pass the recorder controls to the VoiceVisualizer component:
return (
  <VoiceVisualizer controls={recorderControls} />
);
The VoiceVisualizer component provides:
  • Real-time audio waveform visualization
  • Built-in recording controls (start, pause, stop)
  • Playback controls for recorded audio
  • Audio duration and time tracking

​
Complete Example

Here’s the complete code for a basic audio recorder with visualization:
App.tsx
import { useEffect } from "react";
import { useVoiceVisualizer, VoiceVisualizer } from "react-voice-visualizer";

const App = () => {
  // Initialize the recorder controls using the hook
  const recorderControls = useVoiceVisualizer();
  const {
    // ... (Extracted controls and states, if necessary)
    recordedBlob,
    error,
  } = recorderControls;

  // Get the recorded audio blob
  useEffect(() => {
    if (!recordedBlob) return;

    console.log(recordedBlob);
  }, [recordedBlob]);

  // Get the error when it occurs
  useEffect(() => {
    if (!error) return;

    console.error(error);
  }, [error]);

  return (
    <VoiceVisualizer controls={recorderControls} />
  );
};

export default App;
This basic setup gives you a fully functional audio recorder with visualization. The component includes built-in UI controls, so you don’t need to build your own buttons!

​
What You Get Out of the Box

With this minimal setup, you automatically get:
  • Microphone Access: Automatic browser permission handling
  • Real-Time Visualization: Animated audio waveforms during recording
  • Recording Controls: Start, pause, resume, and stop recording
  • Playback Controls: Play, pause, and seek through recorded audio
  • Time Tracking: Display of recording time and audio duration
  • Audio Export: Access to the recorded audio as a Blob for upload or processing
  • Error Handling: Automatic error management for recording and playback

​
Using Recorder Controls

The useVoiceVisualizer hook returns an object with many useful properties and functions: 
const {
  // States
  isRecordingInProgress,
  isPausedRecording,
  recordedBlob,
  duration,
  error,
  
  // Functions
  startRecording,
  stopRecording,
  togglePauseResume,
  clearCanvas,
  saveAudioFile,
} = useVoiceVisualizer();

API Reference

See the complete API documentation for all available controls and states

​
Next Steps

Customization

Learn how to customize colors, dimensions, and appearance

Advanced Usage

Build custom UI controls and handle advanced use cases

API Reference

Explore all available props, methods, and callbacks

Basic Usage Guide

Browse code examples and common patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us