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
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”
Thanks For This Tutorial
https://github.com/abdibogor/JavaScript
wow great bro . one day u will trigger nuclear missile too with java script now or Css 8 In future hehehhehe
how i get just the code html and css files ??
Thanks so much for JS30! I'm just learning how to code.
What is the prerequisites for this js30?
What text editor are you using?
i love you <3 <3 Great tutor. 30 day 30 tutors 30 projects
Hey there's someone doing this same tutorial at :https://www.youtube.com/watch?v=6RupvNzw79c
Who's the original creator of this drum kit?
imma need your plugins bro
Thanks. You inspired me to make a piano 🙂
https://drive.google.com/drive/folders/1i1LphF_yxZLxWcOj3KNj-K_-vGKtsWZW?usp=sharing
https://codepen.io/Roman-First/project/editor/ZdeoOq (This version doesn't have the needed audio files)
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']");
I liked this it was really fun. has anyone made a stop button for stopping all the sounds?
Whats the song on intro??? seems like djent metal
All hail The Odin Project WEB Development 101 😉
What would you recommend, do the 30 days challenges by following along or code it yourself?
When add 'transitionend' eventListener to 'key', using (event) => { key.classList.remove('playing') } would be better
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?
can i use id instead of data-key ?
Whoah man another programming genius
why does the yellow transition stuck when I long press a key
please reply soon
How to get audios?
what does " if(!audio) return; " mean?
I'm surprised how many new things I've learned from this vid.
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.
Is there a video that explains how to edit the code and bring up those consoles? I have used Matlab before but that has its own separate interface and I'm confused how Javascript works.
which theme and color scheme is this? Anyone knows that then please reply….
And for the colors in hexvalue which extension you are using?
Whare I can find the sound effects?
thank you so much! Great dialog
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.
Before discovering you channel I never really liked JavaScript cos I didn't think it was possible to write such concise yet powerful code! Subscribed! Keep up the amazing work. 🙂
06:25
For the es6 template string make sure you are using the ` apostrophe/backtick and not the single quote '
You should have watched for a keyup instead of a transition end to remove the class, that way if they press and hold it will stay yellow
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)
Thanks! I downloaded your project to look over the code myself. I found out that if you just spam one of the keys hard enough, the transition end event stops working.
ASTA LA BISTA BABY
what a opening song?