Tap 'n' Tab

HTML5 Audio Drum Simulator

  • HTML5 Audio
  • Javascript

Tap ā€˜nā€™ Tab was the result of an experiment using the HTML5 Web Audio. The application allows the user to click on different parts of a drum kit to play the sound. It also has functionality that allows a user to create their own tab sheets by dragging and dropping notes on to a tab sheet. When the play button is pressed the music on the tab sheet is played.

Each element of the kit has a sound attached to it that when the mouse is clicked down the sound is played. With the tab sheet a jQuery collider function looks for the play bar to hit one of the tabs dragged on by the user and then plays the appropriate sound depending on where it is on the sheet.