Skip to content
a drum machine and sequencer engine.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
src
.gitignore
README.md
package-lock.json
package.json
prettier.config.js

README.md

Drum Sequencer

laptop view

Drum Sequencer screenshot1

ipad portrait view

Drum Sequencer screenshot2

ipad landscape view

Drum Sequencer screenshot3

mobile portrait view

Drum Sequencer screenshot4

https://drumsequencer.jasonbelcher.dev

Libraries & Tools

Audio Browser Support

  • Google - fair
  • Edge - fair
  • Firefox - bad :(

Install Instructions

git clone git@github.com:JasonBBelcher/drum-machine.git

npm i

// starts parcel dev server for development
npm run start:dev

// builds parcel bundle

npm run prod:build

// starts production server

npm start

Notes on the Challenge

Performance varies depending on the browser. Stuttering and shaky tempo can be heard due to setInterval not being as accurate as I once thought. The amount of jitter is absolutely unacceptable in firefox and I had no idea how bad till later. In hindsight I would have found a better solution. This project is my first foray into audio in the browser.

Regardless of the difficulties with setInterval I accomplished my goal of making a drum sequencer without the help of any framework such as React, Angular, or Vue. Web audio is a deep subject and I'm sure I'll be learning more about it for a long time to come.

My next iteration will be done with the webaudio api or Tone.js. Until I have the time to embark in another adventure in web based audio projects this one will have to do.

You can’t perform that action at this time.