Quickstart: Use the VoiceVisualizer component and useVoiceVisualizer hook
mainTo implement audio recording and visualization, follow these steps:
- Import
useVoiceVisualizerandVoiceVisualizerfromreact-voice-visualizer. - Initialize the recorder controls by calling
useVoiceVisualizer(). - Pass the returned
recorderControlsobject to theVoiceVisualizercomponent via thecontrolsprop. - Access states like
recordedBloborerrorfrom the hook to handle the recording lifecycle.
Note: In version 2.x.x, audio references (audioRef) are managed internally; you no longer need to pass a ref to the component manually.
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;