README
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
.
Props Visualizer
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 |
Props Canvas
Prop | Type | Default | Notes |
---|---|---|---|
height |
Number | null | --- |
maxWidth |
Number | 3840 | --- |
className |
String | null | --- |
...props |
Any | null | Any HTML canvas properties |