JavaScript Drum Kit

The idea behind this first project is to imitate the functionality of a keyboard. Through audio tags we will allow the user to reproduce up to 9 different sounds.

Notes

We make use of two new concepts of HTML5:

The HTML data-* attribute allows us to store custom data on any HTML element. Each div.key and audio element have a data-key attribute that binds them together.
The audio tag offers an API that makes simpler to reproduce audio files in the browser.

The logic behind it, is very simple, we listen for two events:

User presses a key: get audio element, add class to the key and play it:

function keyPressed(e) {
	const audio = document.querySelector(`audio[data-key="${e.charCode}"]`),
		key = document.querySelector(`div[data-key="${e.charCode}"]`);
	if (!audio) return;     // Not a valid key
	key.classList.add("playing");
	audio.currentTime = 0;
	audio.play();
};

css-transition-end: We remove the style previously added:

function removeStyle(e) {
	if (e.type !== "transitionend") return;
	e.target.classList.remove("playing");
}

Events

keypress: user presses a key
transitioned: a css transition has completed.