react-voice-visualizer

Demo App

Overview

The react-voice-visualizer library offers a comprehensive and highly customizable solution for capturing, visualizing, and manipulating audio recordings within your web applications. Built with React hook and component, this library simplifies the process of integrating audio recording and visualization functionalities using the Web Audio API.

Experience the Demo App: Click here to explore the react-voice-visualizer. Try it out and see it in action!

Key Features:

• Audio Recording: Easily capture audio recordings with minimal setup using React hook and component.

• Visualization: Visualize audio data in real-time, making it suitable for applications such as voice recognition, sound analysis, and more.

• Customization: The library is absolutely customizable, allowing you to tailor the audio recording and visualization components to fit your project's unique requirements.

• Responsiveness: Create audio applications that adapt seamlessly to various screen sizes and devices, ensuring a consistent user experience across platforms.

This README provides a comprehensive guide to effectively utilizing the library's features.

Installation

To integrate the React Voice Visualizer library into your project, simply install it via npm or yarn:

npm install react-voice-visualizer

or

yarn add react-voice-visualizer

Version 2.x.x Release Notes

Breaking Changes:

• Ref Handling Update: In this version, the library has been enhanced to manage audio references (audioRef) internally. Users no longer need to pass ref={audioRef} separately to components. This change offers a more seamless and intuitive experience.

New Features:

• Preloaded Audio Blob Support: Version 2.x.x introduces the capability to set preloaded audio blobs. Users now have the flexibility to load audio blobs from various sources, such as user inputs or files using setPreloadedAudioBlob function, expanding the library's versatility in different scenarios.

Demo App

For a live demonstration of the React Voice Visualizer library, you can check out the Demo Voice Visualizer App. This app showcases various features and functionalities of the library in action.

Feel free to explore the demo app to see how the React Voice Visualizer can be used in different scenarios. You can refer to the source code of the demo app for additional examples and inspiration for using the library effectively.

Usage

To start using the VoiceVisualizer component, you will need to import the necessary hook and component from the library. Here's an example of how to use this library in your App component:

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, error]);

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

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

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

export default App;

Getting started

1. Import the required components and hooks from the library.
2. Initialize the recorder controls using the useVoiceVisualizer hook.
3. Use the provided state and functions to manage audio recording and playback.
4. Render the VoiceVisualizer component to display the real-time audio visualization.
5. Use the provided buttons to start, pause, stop, and save the audio recording.

Remember to include necessary CSS styles to customize the components and buttons according to your design preferences.

API Reference

useVoiceVisualizer() Hook

A hook that provides recorder controls and state for audio visualization.

Usage

const recorderControls = useVoiceVisualizer();

Parameters (All parameters are optional)

Returns

VoiceVisualizer Component

A component that visualizes the real-time audio wave during recording.

Props for AudioVisualizer Component

License

This library is distributed under the MIT License.

Issues

If you encounter any bugs or have suggestions for improvements, please report them in the GitHub Issues section.

Support

For support or general questions, you can reach out to zarytskyi222@gmail.com.

If you find my project valuable and would like to support its development, you can buy me a coffee ☕. Your contribution helps keep this project active and growing.

Your contribution is greatly appreciated! ❤️🚀

Credits

This library was created by Yurii Zarytskyi

LinkedIn