react-music-visualizer

Basic visualizer that hooks into audio context api

Usage no npm install needed!

<script type="module">
  import reactMusicVisualizer from 'https://cdn.skypack.dev/react-music-visualizer';
</script>

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.

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