This is a customizable audio visualizer React component created with TypeScript.
npm i react-ts-audiovisualiser
Import the AudioVisualizer component and pass in the necessary props:
import { useState } from "react";
import AudioVisualiser from "react-ts-audiovisualiser"
function App() {
const [data, setData] = useState<FileList>();
return (
<div id="container">
<div id="items_container">
<audio id="audio" controls></audio>
<input
onChange={(e) => {
if (e.target.files) {
setData(e.target.files);
}
}}
type="file"
id="fileupload"
accept="audio/*"
/>
</div>
<AudioVisualiser data={data || []} />
</div>
);
}
export default App;
type - "circular","blocks"
liquidStyle - "boolean"
color - "white" , "colorfull"
customColor - "any css acceptable color"
fftSize - 64 , 128 , 512 , 1024
height - "number" // by default its window.innerHeight/2
width - "number" // by default its window.innerWidth
I would love to see your views on this small package. Thanks for checking it out.