01-DrumKit

#JavaScript30

#1: JavaSctipt Drum Kit

A web keyboard drum kit.

User can press any key which shows up on the page. Each key plays different sound. A transforming motion presents when user press any of those keys, and it ends right away.

Keywords

HTML / JS

• <audio>
• Attribute: data-*
• Event property: key  keyCode
• Event: transitionend
• element.classList.add()  .classList.remove()  .classList.toggle()

CSS

• transition: all 0.07s
• transform: scale(...)

Credit

Images

• Background image
  • File Path: StockSnap_drum.jpg
  • Source: StockSnap.io (Originally from freestocks.org)
  • Photographer: Joanna M. Foto
  • License: Creative Commons CC0

Sounds

• Sound Effects
  • Please see the credit_of_sounds.md file in the sounds folder.