RealTime BPM Analyzer

Documentation

See the documentation

Checkout gh-pages branch to edit the github-pages.

See the API documentation (lastest: v3)

See the API documentation (v2)

Introduction

This dependency free library allows you to compute the BPM (Beats Per minutes) in realtime of an audio / video node or streams thanks to the WebAudioAPI.

Please, note that the main use case of this tool, is to compute the BPM while the video / audio is playing.

WebAudioAPI

The WebAudioAPI provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.

Motivations

Allegro Project purpose is to permits you to collect the BPM of Youtube musics listened by the user. Once the data collected the tool shall bind it at the begining of the title.

Let's imagine we are listening a song on Youtube. The "raw" title of it is: New Order - Blue Monday, once Allegro have collected the BPM it will bind it at the begining of the title, so we would have: [130BPM] New Order - Blue Monday.

The project is under construction thought and this component realtime-bpm-analyzer is an essential piece of the project.

Installation

To install this module to your project, just launch the command below:

npm install realtime-bpm-analyzer

Development

npm install
npx husky install
npm test

Tests & Coverage

To launch the test suite, just launch the command below:

npm test
npm run test:report

Usage

1. An AudioNode to analyze. So something like this :

   <audio src="./new_order-blue_monday.mp3" id="track"></audio>

2. Create the AudioWorkletProcessor with createRealTimeBpmProcessor, create and pipe the lowpass filter to the AudioWorkletNode (realtimeAnalyzerNode).

   import { createRealTimeBpmProcessor } from 'realtime-bpm-analyzer';
   
   const realtimeAnalyzerNode = await createRealTimeBpmProcessor(audioContext);
   
   // Set the source with the HTML Audio Node
   const track = document.getElementById('track');
   const source = audioContext.createMediaElementSource(track);
   
   // Lowpass filter
   const filter = audioContext.createBiquadFilter();
   filter.type = 'lowpass';
   
   // Connect stuff together
   source.connect(filter).connect(realtimeAnalyzerNode);
   source.connect(audioContext.destination);
   
   realtimeAnalyzerNode.port.onmessage = (event) => {
     if (event.data.message === 'BPM') {
       console.log('BPM', event.data.result);
     }
     if (event.data.message === 'BPM_STABLE') {
       console.log('BPM_STABLE', event.data.result);
     }
   };

3. You also need to expose the file dist/realtime-bpm-processor.js (already bundled) to your public root diretory. Typically, this file must be available at http://yourdomain/realtime-bpm-processor.js.

   // For NextJS see your next.config.js and add this:
   // You also need to install `npm install copy-webpack-plugin@6.4.1 -D`
   // Note that the latest version (11.0.0) didn't worked properly with NextJS 12
   const path = require('path');
   const CopyPlugin = require('copy-webpack-plugin');
   module.exports = {
   webpack: config => {
       config.plugins.push(
         new CopyPlugin({
           patterns: [
             {
               from: './node_modules/realtime-bpm-analyzer/dist/realtime-bpm-processor.js',
               to: path.resolve(__dirname, 'public'),
             },
           ],
         },
         ));
   
       return config;
     },
   };

Technical approch

This tool has been largely inspired by the Tornqvist project, which is actually optimized to compute the BPM of a song as fast as possible and not while playing it.

The algorithm basically detect peaks in the bass frequencies and try to figure out the best BPM candidates.

	Description
	PCM Data are dots with value between the max/min amplitude (1/-1). Each dots have its own index

Feel free to contact me by mail or join the chat if you have any questions.

Credits

This library was been inspired from Tornqvist project which also based on Joe Sullivan's algorithm. Thank you to both of them !

Final

If this project helped you in any way or if you want to support it, you can always leave me a tip here:

BTC 36eHnxCRUDfWNFEx3YebRGw12WeutjkBBt

ETH 0x0F8b4F026624150e9F6267bFD93C372eb98e3010