Skip to main content

React Voice Visualizer

Capture, visualize, and control audio recordings in your React applications with real-time waveform visualization powered by the Web Audio API.

Quick Start

Get up and running with React Voice Visualizer in minutes.

1

Install the package

Install react-voice-visualizer using your preferred package manager:
npm install react-voice-visualizer
2

Import and initialize

Import the hook and component, then initialize the recorder controls:
import { useVoiceVisualizer, VoiceVisualizer } from "react-voice-visualizer";

const App = () => {
  const recorderControls = useVoiceVisualizer();
  
  return <VoiceVisualizer controls={recorderControls} />;
};
3

Start recording

The component includes built-in controls for recording, or use the hook functions directly:
const { startRecording, stopRecording, recordedBlob } = recorderControls;

// Start recording
startRecording();

// Stop and access the recorded audio
stopRecording();
console.log(recordedBlob);

Key Features

Everything you need for audio recording and visualization in React.

Real-Time Visualization

Beautiful real-time audio waveform rendering with customizable colors and animations.

Full Recording Control

Start, pause, resume, and stop recording with comprehensive state management.

Playback Controls

Built-in audio playback with progress tracking and interactive seeking.

TypeScript Support

Fully typed API with comprehensive TypeScript definitions and IntelliSense support.

Customizable UI

Extensive styling options or build your own custom UI with hook functions.

Preloaded Audio

Load and visualize existing audio files from any source.

Explore the Documentation

Learn how to integrate and customize React Voice Visualizer for your use case.

Core Concepts

Understand how the library works with the Web Audio API and React.

API Reference

Complete reference for the hook, component props, and TypeScript types.

Usage Guides

Step-by-step guides for common use cases and advanced scenarios.

Migration Guide

Upgrade from v1.x to v2.x with breaking changes and new features.

Ready to add voice recording to your app?

Start building with React Voice Visualizer today. Check out the quickstart guide or explore the API reference.

Build docs developers (and LLMs) love