Javascript Drum Machine Demo
If you’re on a laptop, press the letter “A” , then “F” - Cool, right? (This demo works on non-mobile devices only. Sorry, iPhone and Android users.)
Recently, my friend Ben shared a link to Web Bos’ free new Javascript course, Javascript30. I’ve known Wes’ name around for quite a while being that he has created what is known as the de facto ReactJs course, so I was curious to what his free course would offer. I’ve recently decided to give it a spin and was happy to see that the first course is building a javascript drum machine. I’ve always wanted to build one of these.
Long story short, you create a directory in your project full of .wav sound files. In your HTML, you have various audio tags - each one has a custom data-key attribute assigned to a different keyboard letter. In your javascript, you have a window listener waiting and watching for keyboard presses. When a key on the keyboard is pushed that corresponds to an audio file, that file is played via the audio HTML API. Otherwise, if a key is pressed that is NOT associated with an audio file, the function is exited and begins again, waiting and listening for the next keypress. I’m happy with Wes’ course so far and am looking forward to the rest of it.