# Install from npm
npm install react-audio-visual
# Install from yarn
yarn add react-audio-visual
usage
importAudioVisualfrom"react-audio-visual";constTestAudioPlayer=()=>{constaudio=useRef<HTMLAudioElement>(null);return(<divstyle={{width: "100%",maxWidth: 600,margin: "0 auto",}}><audioref={audio}preload="audio"src="/react-audio-visual/test/Tom Fulp-Dad n Me.mp3"controls/><divstyle={{height: 200,backgroundColor: "#000",}}><AudioVisualaudio={audio}/></div></div>);};
options
interfaceAudioVisualProps{/** * the audio element ref created by useRef() or React.createRef() */audio: RefObject<HTMLAudioElement>;/** * frequencyBinCount for AnalyserNode * optional, * default: 1024 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/AnalyserNode/frequencyBinCount) */fftSize?: number;/** * colors for gradient fill color * optional * default: ['#ff0000a0', '#ffff00a0', '#00ffffa0'] */colors?: string[];/** * interval of bar, default 4, not equivalent to bar width */barInternal?: number;/** * space between bars, default 1 */barSpace?: number;/** * height of caps, default 2 */capHeight?: number;/** * gap between caps, default 2 */capGap?: number;}
