Polyrhythmic Drum Machine

A drum machine for creating and sharing grooves with unique time feels. Try it here.

For best results, use with Chrome browser on Mac. Touchscreens are not yet supported.

Overview

This is a drum machine that includes two unusual key features:

1. No limitation on rhythmic divisions.

   • Most drum machines only allow us to create rhythms that are divisible into groupings of 2 or 3 (such as 8th notes and triplets).

   • This drum machine allows us to create rhythms using any whole number of divisions, including odd, prime, and large numbers (such as 7th notes, 13ths, 56ths, etc).

     

2. Shifting rhythmic grid lines.

   • Most drum machines only allow us to place notes in two ways: onto an even rhythmic grid that starts at time 0, or anywhere at all (with no grid).

     

   • This drum machine adds a third option: it lets us shift the rhythmic grid forwards or backwards in time, so that notes uniformly fall "ahead of" or "behind" the beat.

     

Together these features let us create unique rhythms that are difficult (or sometimes impossible) to emulate using most convential sequencers and DAWs.

High-Level Feature List

• Set each note lane to have any whole number of beats (rhythmic grid lines). This allows us to create complex polyrhythms, odd time signatures, and unusual rhythmic divisions.
• Shift each note lane's rhythmic grid lines forwards or backwards in time, so that notes fall ahead of or behind the beat while remaining evenly spaced. Or, remove rhythmic grid lines entirely. This allows us to experiment with and fine-tune the time feels of our grooves.
• Share grooves by copying and pasting the browser URL, which automatically updates every time we make changes.
• Use the browser's 'back' and 'forward' buttons to undo and redo changes.
• All interactive GUI elements show help text on mouse-over. It appears in the gray bar at the bottom of the window.
• Choose from several built-in drum kits for live audio output.
• Output live MIDI to any DAW or MIDI device, or export sequencer patterns to MIDI files.
• Specify tempo as BPM (beats per minute), or as a loop length in milliseconds
  • BPM input mode includes a 'tap tempo' button
  • Millisecond loop length can be useful for making rhythmic transcriptions from an existing sound file
• Load example sequencer patterns from the 'examples' dropdown.
• Adjust the volume of each note using click+v. The louder the note, the larger its circle will be on-screen.
• Press the tab key to toggle an analytics menu showing details about notes and sequencer rows
• Hold the shift key while click-dragging to make edits with higher precision

How To Run Locally

Running the drum machine locally allows you to use your own custom drum kits, change default MIDI output pitches and velocities, update the configuration of the GUI, or make other code changes.

• A local HTTP server may be needed for some browsers, to avoid Cross Origin Request issues when loading assets.

  • For Mac, run one of the .sh files included in this repo from the Terminal to start the HTTP server:

    • If you have Python 2 installed, run sh server.python2.sh.

    • Or, if you have Python 3 installed, run sh server.python3.sh.

  • For Windows, you can't run .sh files, but you should just be able to run the commands that are contained in the .sh files from the Command Line to start the HTTP server.

• Then in a browser go to http://localhost:8000/, and replace 8000 with whatever port number the server says it's running on.

You may need to clear your browser's cache in order for local changes to be applied.

Project Structure

• index.html main HTML webpage
• code/ contains all JavaScript source code
  • drum-machine.js main source code file from which the drum machine is instantiated
  • priority-linked-list.js implementation of a custom linked list data structure, to be used as the backend datastore for each note lane. Unit tests are included here.
  • sequencer.js implementation of the sequencer, including the note scheduling algorithm and logic for reconfiguring sequencer patterns.
  • gui.js implementation of the GUI, including buttons, event listeners, etc.
  • audio-drivers.js interface and implementations for different audio drivers (WebAudio and MIDI) to standardize how the sequencer interacts with different audio output libraries.
  • gui-configurations.js definitions of constants used to define GUI display and behavior, formatted as a JSON object for convenience.
  • lib/ contains all third-party libraries used in the project.
• assets/ contains icons, sound files, and any other assets used by the drum machine.

Acknowledgements

• The colorful and interactive user interface was inspired by the amazing Cync drum machine.
• The scheduling of audio ahead-of-time using the WebAudio API was informed by projects and articles from Chris Wilson, including MIDIDrums, Web Audio Metronome, and especially the article A Tale Of Two Clocks.
• Many thanks to Jon for user testing, and helping brainstorm solutions to tough GUI design problems.
• For an early Python prototype of this drum machine, see my old repo Drum Machine Proof Of Concept.