ipad portrait view
ipad landscape view
mobile portrait view
Libraries & Tools
- flexbox grid 12 column grid for flex box
- Howler web based sound player
- parceljs zero configuration web application bundler
Audio Browser Support
- Google - fair
- Edge - fair
- Firefox - bad :(
git clone email@example.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.