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);
});

Authors

• Zach Fagerness

License

This project is licensed under the MIT License

Help

If anyone can find a good way to do this on a node server let me know node doesn't have access to AudioContext or OfflineAudioContext