Drum Machine
A Visual drum machine with Pure Javascript HTML and CSS
Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Prerequisites
These files maybe viewed locally by opening index.html or by placing them on a webserver. No webserver required.
Installing
Clone the repo and open the index files in a browser.
Open Terminal
git clone https://github.com/zoobot/drum_machine.git
cd drum_machine/drum_machine
or
cd drum_machine/noise_machine
or
cd drum_machine/onedrum
open index.html
For Testing run npm install on command line
Details
All code runs in latest Chrome, and FireFox
Function Summaries
drum_machine.js
@drumOnOff toggles drum beat calls patternFakerIsOn for DOM manipulation
@fourToFloor Returns indexes of 4/4 depending on step
@createEmptyPattern Creates array of beats in drums[preset].pattern
@patternFaker Creates random drum pattern
@presetSaver saves and loads presets
@initDOMDrumMachine Creates DOM elements for each drum, calls createEmptyPattern and patternFaker
@addClass adds class to DOM element
@addClass removes class from DOM element
@toggleOnOff toggles drum beat bools
@isOn calls toggleOnOff and calls add/removeClass
@patternFakerIsOn DOM manipulation after drumOnOff
@toggleSelectedDrumBeat onclick calls isOn
@selectPresetOnOff toggles DOM element classes for Presets, calls patternFaker and presetSaver
@removeAllActive removes all DOM element classes
@playback plays the beats with setTimeOut
@selectOnOff toggles playback
@changeStep changes step and calls initDOMDrumMachine to rebuild drum DOM
timers
@delay returns step divisor for bpm
@tempoConversion bpm to ms for setTimeOut
@rand plays the beats with setTimeOut
@bpm_ms tempoConversion call