Skip to content
Snippets Groups Projects
Commit da9f12d5 authored by bjv33's avatar bjv33
Browse files

Drum Kit Index HTML

parent ae64ba38
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
JavaScript/Drum Kit/Drum Index.html 0 → 100644
+ 90
− 0
View file @ da9f12d5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
</head>
<body>
<h1 class="title">JavaScript Drum Kit</h1>
<!--Data Key Index-->
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>
<!--Links data keys to sound files-->
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
<script>
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); //selects audio to data keycode
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!audio) return; //stops function
audio.currentTime = 0; //rewinds to start
audio.play(); //plays audio
key.classList.add('playing');
}
function removeTransition(e) { //removes highlight transition
if (e.propertyName !== 'transform') return; //skip if no transform
this.classList.remove('playing');
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
</script>
</body>
<footer>
<p>Brian Vojtko</p>
<p>Contact information: <a href="mailto:vojtko@bvojtko.com">
vojtko@bvojtko.com</a>.</p>
</footer>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment