Skip to content

JasonBBelcher/drum-machine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

a drum machine and sequencer engine.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published