In this project, you'll be creating a drum machine that runs in the browser!
Check out the starting point for this project here: https://ci-wdi-900.github.io/drum-machine/
We're given a ticking metronome that plays a sound every 600ms. In this assignment, we'll transform this simple metronome into a drum machine that lets us make a variety of different beats!
Make at least one commit per part of this assignment.
Check out GUIDANCE.md for more specifics on how to accomplish the following tasks.
The first thing to do for this assignment is to improve the metronome. Right now, the metronome only plays the 'tick.mp3' sound. Lets improve this to play the 'tock.mp3' sound every fourth beat. The metronome should continue to play 'tick.mp3' for the three prior beats.
i.e.: tick tick tick tock tick tick tick tock ...
Additionally, let's display the current count in the metronome. This count should start at 1 and increment everytime the metronome ticks. After 4, it whould reset back to 1.
i.e.: 1 2 3 4 1 2 3 4 ...
We've improved the metronome, now lets allow users to make the drum machine play different instruments.
In the HTML, create a new element. This element will contain inputs that the user can use to control the drum machine.
Inside this container, add more HTML (this can also be done via Javscript) that creates four checkboxes labelled "metronome", "kick drum", "snare drum", and "hi hat". By default, "metronome" should be the only checkbox that is checked.
Make it so that if the "metronome" checkbox is un-ticked, the metronome sounds stop playing.
Additionally, make it so that if "kick drum" is checked, kick-drum.mp3
is played every beat.
Do the same for hi-hat.mp3
nd snare-drum.mp3
.
Now that we have custom instruments, lets allow users of our drum machine to choose when their sounds are played.
Next to each checkbox (excluding "metronome"), add a number input.
Now write some Javascript so that if the input beside an instrument contains "1", that instrument only plays on the 1st metronome count (out of 4).
If the input contains 3, that instrument will play on the third metronome count.
-
Customize the look of the page! Use your CSS skills to make the page look nice. Consider switching out the metronome for a different animation.
-
Add more sounds! You can find loads of sounds at https://freesound.org/ (you'll need to make an account to download)
-
Add an input to the page that allows the user to change the drum machine's tempo! To do this, you'll need to modify both the Javascript and the CSS that controls the metronome animation.
-
Allow the timing inputs to contain multiple values. For example, allow a user to input "2, 3" to play an instrument on both counts 2 and 3.
-
Add an input to the page that allows a user to change maximum metronome count. For example, this could allow the metronome to count up to 5 instead of 4.
-
Create your own feature(s)! Think up a feature that you'd like to add and implement it!
-
Make it look nice on mobile devices.