React Voice Visualizer

https://github.com/yzarytskyi/react-voice-visualizer

Admin

React library for audio recording and visualization using the Web Audio API

Tokens:323

Snippets:3

Trust Score:7

License:MIT

Update:1 year ago

Show doc for...

Tokens:

Raw

### Install react-voice-visualizer Library

Source: https://github.com/yzarytskyi/react-voice-visualizer/blob/main/README.md

Use npm or yarn to add the react-voice-visualizer package to your project dependencies.

```Bash
npm install react-voice-visualizer
```

```Bash
yarn add react-voice-visualizer
```

--------------------------------

### Initialize Recorder Controls with useVoiceVisualizer Hook

Source: https://github.com/yzarytskyi/react-voice-visualizer/blob/main/README.md

Shows the basic syntax for calling the useVoiceVisualizer hook to obtain the necessary controls and state for managing audio recording and visualization.

```JSX
const recorderControls = useVoiceVisualizer();
```

--------------------------------

### Integrate VoiceVisualizer in React Component

Source: https://github.com/yzarytskyi/react-voice-visualizer/blob/main/README.md

Demonstrates importing and using the useVoiceVisualizer hook and VoiceVisualizer component in a functional React component, including handling recorded audio and errors.

```TypeScript
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;
```

Tokens:

Raw