Klarala13/step-sequencer

Extended JS Drum Kit

Create a virtual Drum Set using HTML5, JavaScript 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

Resources

Step Sequencer

• http://highlinux.com/sequencer/
• http://jxnblk.com/stepkit/?tempo=96&currentKit=1&currentBank=2&loopLength=16
• https://afuh.github.io/sequencer/
• https://learningmusic.ableton.com/make-beats/make-beats.html
• https://codepen.io/njmcode/pen/PwaXwB

Synth Pad

• https://www.sitepoint.com/html5-web-audio-api-tutorial-building-virtual-synth-pad/
• https://code.tutsplus.com/tutorials/the-web-audio-api-make-your-own-web-synthesizer--cms-23887
• http://www.keithwhor.com/music/
• https://mrcoles.com/piano/
• https://codepen.io/matt-west/pen/lAFnx

Drum Kit

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

Arpeggiator

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

Play / Stop Buttons

• https://codepen.io/renerenerene/pen/gBYXKV?editors=1100

Mouse Effect Modulation

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

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/
• https://github.com/danrouse/react-audio-recorder