Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1/30




Day 1 of 30. Let’s make a JavaScript Drum kit and bunch along the way. Get all 30 videos and Starter files for free over at JavaScript30.com.

Original source


38 responses to “Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1/30”

  1. const audio = document.querySelector ("audio[data-key='${e.keyCode}']"); , This code always returns null. Please advice. How can we assign the e.keyCode to variable and then use the variable value in document.querySelector ("audio[data-key='HERE HERE']");

  2. Hey,
    is there a chance someone can explain why are we checking this line:
    if (e.propertyName !== 'transform') return;
    Like what is the purpose of it and why it is not important which propertyName will we choose?

  3. I'm loving this series so far. I made my drum kit an instrument kit by adding more sound effects (feel free to use my code). So far, I have animal noises and a tiny piano I like to play Twinkle Twinkle Little Star on and a simplified version of the first part of Für Elise. Separating the instruments and making the piano was probably the trickiest part. And giving the musicians the credit they deserve for letting me use their sounds for free was the most taxing. Anyway you can see it here:

    https://codepen.io/DezHpen/full/YaEPYe/

    Again, you can use my code, and make your own instrument kit, but I can't give you permission to use the sounds. But you can find the music source by clicking "credits" at the bottom. That way you won't need my permission.

    Edit: You may have to refresh if not all the sounds work properly.

  4. Just started the course, but I'm unable to download the sound files from github. Does anyone know another website that I can get these files from? i looked online, but I can't find these exact sounds.

  5. For some reason the "tink" sound just won't play. The button glows but there's just no sound on that particular key. I checked if the file is okay – it is. I tried re downloading the files and running the completed version – problem still persists. (I'm on Mozilla if that makes any difference)

Leave a Reply