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

Delete Drum Index.html

parent cd6fea8a
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
JavaScript/Drum Kit/Drum Index.html deleted 100644 → 0
+ 0
− 90
View file @ cd6fea8a
<!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