Waveform-bpm NPM

waveform-bpm

Creates a configurable waveform or gets the bpm from an audio url

Installing

The usual

npm i waveform-bpm --save

Example

Add a url and a html element and you're good to go. The config variable is optional and can be added on the constructor or as the second param on drawWaveform. If added to drawWaveform it's pretty easy the change the color later by calling drawWaveform again.

Make sure you initialize the class after DOM load or you might have a bad time.

import WaveBpm from 'waveform-bpm';

var config = {
  canvasWidth:500,
  canvasHeight:200,
  canvasScale:200,
  topColor:'cyan',
  middleColor:'white',
  bottomColor:'cyan'
}

var urlToSong = 'ADD URL HERE';

var htmlElement = document.getElementById('ADD ID HERE');

new WaveBpm(config)
.loadMusic(urlToSong)
.then((wave)=>{

  wave.getBpm()
  .then((bpm)=>{
    console.log('BPM: ',bpm);
  });

  wave.drawWaveform(htmlElement,config)
  .then((canvasContext,htmlElement)=>{
    console.log('Waveform Drawn');
  });

})
.catch((e)=>{
  console.error('loadMusic failed',e);
});