React-music-visualizer NPM

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