Welcome to my “Build 30 Js Projects in 30 Days” Series .This is day 1 and project 1. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.
As mentioned in my previous article. This is the Day 1 challenge of Wes Bos Javascript30 course.
Here is the final result:
As always before starting, download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.
PART 1:HTML
<body> <div class="container"> <div class="bg-wrap"> <img class="bg-image" src="background.jpg"> </div> <table> <tr> <td class="drum-key"><button value="65">A <span>Clap</span></button></td> <td class="drum-key"><button value="83">S <span>Hihat</span></button></td> <td class="drum-key"><button value="68">D <span>Kick</span></button></td> <td class="drum-key"><button value="70">F <span>OpenHat</span></button></td> <td class="drum-key"><button value="71">G <span>Boom</span></button></td> <td class="drum-key"><button value="72">H <span>Ride</span></button></td> <td class="drum-key"><button value="74">J <span>Snare</span></button></td> <td class="drum-key"><button value="75">K <span>Tom</span></button></td> <td class="drum-key"><button value="76">L <span>Tink</span></button></td> </tr> </table> </div> <script src="script.js"></script> </body> The thing to notice here is that I've given value of buttons as ascii value of characters mentioned on drum keys. I've created a table with 1 row and each data cell is a button.
PART 2:CSS
Now we are going to style our project.
*{ margin: 0; padding:0; } body{ overflow: hidden; } .container{ position: relative; } .bg-image{ background: url('background.jpg') center; opacity: 0.7; position: absolute; top:0; bottom:0; width:100%; height:auto; z-index:-1; position: relative; } table{ margin-left: auto; margin-right: auto; position: absolute; top: 55%; z-index:2; } table td button{ width:3.5em; height:3em; font-size:2rem; color: white; background: transparent; border:2px solid black; transition: all 0.06s; margin:1rem; } table td button span{ font-size: 1rem; color:gold; display: block; } .bright{ border: 2px solid gold; box-shadow: 0px 3px gold; transform: scale(1.2); } Here bright class will be called when a sound is being played.Now as this article focuses mostly on javascript, I'm not getting deep into css explanation part. Try to read through it and if you've any suggestions or doubts, feel free to comment below.
PART 3:JAVASCRIPT
Now we will make our project interactive.
So the idea of this project is to play sound when
- Key mentioned on the button is pressed on keyboard: Here we will use event listener keydown. We will use keyCode to get the key pressed by user. Then we will pass it to a function to play the corresponding sound.
- We click the button using cursor. Here we will get the value of button clicked by using event listener click and then we will pass it to the function to play the sound.
Initialising audio variables –>
let clap= new Audio('sounds/clap.wav'); let boom= new Audio('sounds/boom.wav'); let hihat= new Audio('sounds/hihat.wav'); let kick= new Audio('sounds/kick.wav'); let openhat= new Audio('sounds/openhat.wav'); let ride= new Audio('sounds/ride.wav'); let snare= new Audio('sounds/snare.wav'); let tink= new Audio('sounds/tink.wav'); let tom= new Audio('sounds/tom.wav'); Now we will solve the cases as explained above.
let keys=document.getElementsByClassName('drum-key'); for(let key of keys){ //This will play sound when any key is pressed key.addEventListener('keydown',(e)=>{ //******adding bright class***** //will call button having keycode as value. let keyboardvalue=document.querySelector(`button[value="${e.keyCode}"]`); //if any non displayed key is pressed. if(keyboardvalue) keyboardvalue.classList.add('bright'); playSound(e.keyCode); //since transitioning is already a time bound property, using another time bound function is not recommended. // setTimeout(()=> // {keyboardvalue.classList.remove('bright'); // },500); }) //*******to remove bright class******* // we will use property transitionend. key.addEventListener('transitionend',(e1)=>{ //since transitionend triggers every time transition is made i.e. for change in borders etc. as well , we are returning if transitionend is not triggered for property transform. if(e1.propertyName!='transform') return; e1.target.classList.remove('bright'); }) //******when button is clicked**** key.addEventListener('click',(e2)=>{ console.log(e2.target.value); if(e2.target.value) {playSound(parseInt(e2.target.value)); //Value data type is string so we will convert it to integer as switch case takes integer as parameter. e2.target.classList.add('bright');} }) } Now we will create function playSound which takes the ascii value of key as parameter and plays the corresponding sound using swich-case.
function playSound(ch){ switch(ch) { case 65: {clap.currentTime=0; //if one audio is playing then same audio will not play again as function is already running. to prevet this we et currenttime=0. clap.play();} break; case 83: hihat.currentTime=0; hihat.play(); break; case 68: kick.currentTime=0; kick.play(); break; case 70: openhat.currentTime=0; openhat.play(); break; case 71: boom.currentTime=0; boom.play(); break; case 72: ride.currentTime=0; ride.play(); break; case 74: snare.currentTime=0; snare.play(); break; case 75: tom.currentTime=0; tom.play(); break; case 76: tink.currentTime=0; tink.play(); break; } } I hope you understood the whole code.
Source code: Click here
Things I learnt
1.keydown event listener.
2.transitionend event listener.
3.transform and transition.
4.Alternative to using setTimeout function with transition.
5.How to play audio again even if play() function is already running for that audio.
Previous article from this series::
Conclusion
That's it for today's project.Next project will be an Alarm Clock .
If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.
If you like this series and want to be a part of it, do consider following me at @prachigarg19
Thanks for reading. 🙂