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