Extended JS Drum Kit

Create a virtual Drum Set using HTML5, JavaScript and possibly the Web Audio API.

Possible extended features

• Load different Drum Sets
• Create a piano Synth Pad
• Adjust a global BPM & arpeggiate aamples
• Record music session
• Mouse effects, using JavaScript event tracking
• Touch effects for mobile devices

Inspiration & Resources

Drum Kit

• https://www.youtube.com/watch?v=VuN8qwZoego

Synth Pad

• https://www.sitepoint.com/html5-web-audio-api-tutorial-building-virtual-synth-pad/
• http://www.keithwhor.com/music/
• https://mrcoles.com/piano/

Arpeggiator

• https://arpeggiator.desandro.com/
• https://www.youtube.com/watch?v=ZTBekkqA2rM

Mouse Effect Modulation

• https://codepen.io/laurent-thevenet/pen/QgyQNb?editors=0010

Grid to create Musical Patterns

• https://learningmusic.ableton.com/make-beats/make-beats.html

Record Music Session

• https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
• https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/