JavaScript Soundboard

a single div component for the “A” key and it’s sound
  • 18) add an event listener for a keydown action. Callback function is playSound()
  • 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.
  • : 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



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ryan Bollettino

Ryan Bollettino

Current Software Engineer student at Flatiron School, 11 year Math Teacher, 20 year thespian.