< Back to JavaScript 30

Drum Kit

• Project Synopsis and Code

  In this lesson I create a Drum Kit application. First I listen for the following events:

  • 'window'
    • 'keydown', playSound(e)
  • '.key'
    • 'transitionend', removeTransition(e)

  In playSound(e) - Query the 'document' for two types of elements. The <audio> element, and elements that have a class of '.key'. Check if the event 'keyCode' (e.keyCode) matches the data attribute 'data-key' of the element. If the <audio> element does not exist, exit the function.

  Next reset the audio time to 0 (audio.currentTime = 0). Then play the <audio> (audio.play();). Also add a class of '.playing' to the '.key' element to animate the UI.

  In removeTransition(e) - First check if the event .propertyname is not 'transform' If so, exit the function. Otherwise, add a class of '.playing' to the '.key'.

  See the Pen JavaScript30 - 1 - Drum Kit by Corey Noble (@CoreyNoble) on CodePen.