The concept is simple, create a div element that pertains to a specific key on the keyboard, and assign a sound to it. On a
keydown action, hitting the letter “A”, for example, the element will visibly change, and the sound will play.
First, we need some data from our keys to differentiate them, and some sounds! Every key has a “key-event” code and they can all be found here. When I press “A”, that matches up with a JS event code of “65”. I can attach that information to a data set
(data-key) within my
div. And I’ll wrap my keys in a
<kbd> tag which says, “hey! this key is going to create some input.”.
Thanks to Wes Bos for supplying some audio .wav files. There are also a ton online to be found — I included a Peter Gabriel snippet and a few wacky sounds from my kids and integrated that into the soundboard.
<audio> tag, you can see how the data-tag is linked to the audio file. We’ll use those links to access the sounds in the actual functions. Speaking of, I thought I’d show you all the code at first and then we can break it down. As with all eventListeners, you’ll need to get into the event itself to check for the correct values.
- 18) add an event listener for a
keydownaction. Callback function is
Walking thru the action
- playSound() : handles the event (e) of a keydown action.
- we define
keyby their “key-event” keyCode:
A is linked to “65”, and “65” is linked to the “BOOM” audio file.
Notice that the data-key is in both the
- if a key is pressed and doesn’t have a data-key attached — return nothing.
- audio.currentTime : resets the audio file to play from the beginning. Which is helpful if you want to hit the same key a few times per second, instead of waiting for the whole file to play out before it can start again.
- audio.play() : does just that, by returning a
Promiseon any media file that is resolved when playback begins.
- key.classList.add(playing) : this is some CSS magic (that I’m still learning) that add some extra style to our key div when it’s pressed.
That last bit of style (.playing), makes the key element grow, and its border change to a new color for as long as want. But! We don’t want it to be long at all. Less than 1/2 a second, ideally.
So as soon as we change our key style, we want to revert it back. Inside of our style for
.key , we have a transition lasting .04 seconds (see line 22 below).
As soon as that transition is done, we want to revert it back to its original state. There is the transitionend element that will fire at the end of the transition. So, we can write a quick function that removes that style that we just added on at
.key we add an eventListenter that listens for the
transitionend element, and if it hits, run the
removeTransition() callback function. That function (line 12) removes the .playing style from the key div element.
I learned some new CSS styling, especially the transitioning with elements that will definitely become intertwined in my next practice projects.
My follow-up challenges to these, is to recreate them using React. While they work, I do see a lot of redundancy in the code, and I’m eager to find a way to streamline the code using a simple object that holds.
Stay tuned for the updated version!