반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
<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}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if(!audio) return;
key.classList.add("playing");
audio.currentTime = 0; //바로 실행시킨다. 딜레이타임 없이.
audio.play();
};
function removeTransition(e) {
console.log(e)
if(e.propertyName !== "transform") return;
e.target.classList.remove("playing")
}
window.addEventListener("keydown", playSound); //키를 누를 때 이벤트가 발생한다.
const keys = document.querySelectorAll(".keys");
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
</script>
</body>
</html>
30일 미니프로젝트 만들기가 있어서 오늘 처음으로 해보았다. 이전에 보고 해볼까하다가, 강의가 다 영어라서 망설여졌었는데, 오늘부터 하나씩 해보자는 마음으로 시작했다. 기본 html과 css는 git에서 받아오고 JS부분을 학습하는 부분이였다. 영어로 되서 조금은 아쉬웠지만 강의를 들으면서 따라해보고, 직접 MDN으로 찾아보면서 이전에는 사용하지 않았었던 event부분이라던지, html과 css 부분을 보면서 학습할 수 있다.
https://javascript30.com/ 홈페이지에 들어가면 30일 챌린지에 동참할 수 있으니 한 번 해보면서 JS도 공부하고 영어도 공부하면 좋을 것 같다.
반응형
'Frontend' 카테고리의 다른 글
| 사이드작업 / 웹페이지 따라 만들기 (0) | 2021.08.18 |
|---|---|
| HTML과 CSS 복습 및 기초다지기 (0) | 2021.07.25 |
| 계산기 만들기 (0) | 2021.06.28 |
| 바닐라코딩 마지막 과정_koans (0) | 2021.06.26 |
| 화면 속도 반응 측정기 만들기 (0) | 2021.06.25 |