A Drum machine Made with Vue and the web audio api

by Vue.js Examples

TR-101

A Drum machine. Made with Vue and the web audio api.

View demo Download Source

Local Setup

# ? If you don't have yarn, run `npm install --global yarn`
# Install dependencies
yarn
# Start development version of app locally
yarn start
# Build optimized production version of the app
yarn build

Planned Additions

  • [ ] Mobile support (touch interface for knobs)
  • [ ] Make tempo changes and pauses/plays restart from the same place (probably with some accumulator parameter)
  • [ ] Accent / velocity editing
  • [ ] Audio to keep running in the background (even when requstAnimationFrame isn't being called)
  • [ ] Different waveforms
  • [ ] Master volume
  • [ ] Filters (HP/LP)
  • [ ] Keyboard shortcuts
  • [ ] Shareable presets
  • [ ] Effects (distortion, delay, reverb)
  • [ ] Animated knob changes for preset loading / randomisation
  • [ ] Sampler capabilities
  • [ ] Knob configurable color and size

GitHub