React Music Visualizer

The intentions of this project is to expose a basic and flexible waveform audio/music visualizer as a modern functional react component. A resizable <Canvas /> component is also exposed.

Installation

npm install react-music-visualizer --save

The library is built using hooks so you will need to have react and react-dom version 16.8 or higher.

Usage

<Visualizer audioPreviewUrl='example.com/audio-url' />

Example

More examples on how to use the component can be found in the repo example page. You can run the example page locally by first running npm install and then npm run dev.

Visualizer Props

Prop	Type	Default	Notes
audioPreviewUrl	String	null	---
canvasWidth	Number	null	Will resize when viewport is below this number
canvasHeight	Number	540	---
drawFunc	Function	null	---
drawOptions	Object	See below	---
fftSize	Number	128	For an explanation check MDN

Default Drawing Options

Option	Type	Default	Notes
canvasColor	String	'#000000'	Background color
lineColor	String	'#7200ab'	Color of drawn lines
lineAmount	Number	16	Amount of lines to sequentially draw
strokeWidth	Number	3	Width of each line
strokeTightness	Number	5	Space between each line
mirrored	Boolean	true	If visual peak is centered

Canvas Props

Prop	Type	Default	Notes
height	Number	null	---
maxWidth	Number	3840	---
className	String	null	---
...props	Any	null	Any HTML canvas properties