JavaScript Soundboard

part of the #JavaScript30 challenge

I’m super thankful for the #JavaScript30 challenge. It’s letting me build some fun, useful apps and have served as a springboard for some potential other uses.

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.”.

a single div component for the “A” key and it’s sound

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.

Using an <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 keydown action. Callback function is playSound()

Walking thru the action playSound() function:

• playSound() : handles the event (e) of a keydown action.
• we define audio and key by 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 div and audio tags.
• 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 Promise on 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.

playSound() will add this style to the key element, making it grow and flash a different color

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 keydown :

For each .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!

- https://keycode.info/table-of-all-keycodes

- https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

- https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-tricks

- https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units (REM)