Using via Provider

How to use

First you have to set up a Container in your React project.

Container

import { SoundyProvider } from  "../../soundy/useSound";

function  Container() {
const  playerRef  =  useRef(null);

return (
    <div>
        <audio
            id="audioPlayer"
            src="your_audio.mp3"
            ref={playerRef}>
        </audio>
        <SoundyProvider  playerRef={playerRef}>
            <YourVisualization/>
        </SoundyProvider>
    </div>
);
}

Then you have to set up a Visualizer component that uses the Features of Soundy-js

Visualizer

import  useSoundy  from  '../useSoundHook';

const  YourVisualization = () => {
const { 
  getLowFrequencyData, 
  getMidFrequencyData, 
  getHighFrequencyData
} =  useSoundy();
return (
  <div>
  ... your visualization elements here	
  </div>
);
};

Props

Prop name	Description	Required	Default value
playerRef	The ref of the audio element you want to get the data of	true	none
bufferSize	The buffer size passed to the audio analyzer. Higher buffer size results in more accurate data.	false	256

warning

The bufferSize prop has to be a power of 2