JavaScript Drum Kit

A~L 까지의 키보드 버튼을 누르면 소리가 들린다.

---

html

<div data-key="65" class="key">
  <kbd>A</kbd>
  <span class="sound">clap</span>
</div>

<audio data-key="83" src="sounds/hihat.wav"></audio>

1. data-

HTML 5에서 새롭게 추가된 Element 속성이다.
data-의 형식으로 어떤 속성명이나 붙일 수 있다.

👇 자바스크립트로 접근하기

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

<script>
  var article = document.getElementById('electriccars');

  article.dataset.columns // "3"
  article.dataset.indexNumber // "12314"
  article.dataset.parent // "cars"
</script>

MDN - 데이터 속성 사용하기

2. kbd

keyboard의 입력을 표현 할 때 사용되는 태그.
<kbd>ctrl</kbd> 👉 ctrl
위 방식처럼 나타나는데 대개 CSS로 좀 더 명확히 한다.

3. audio

문서에 소리 콘텐츠를 포함할 때 사용하는 태그.
문서에 보이지 않지만 controls 속성을 지정한 경우 오디오 재생, 볼륨, 탐색, 일시 정지 컨트롤을 브라우저에서 제공한다.

👇 <audio controls ...></audio>

---

JS

querySelector()

const audio = document.querySelector("audio[data-key='65']");

<audio> 태그에서 속성 data-key 가 65 인 element를 찾는다.

Audio()

아래와 같은 메소드로 플레이하거나 정지할 수 있음.

• audio.play()
• audio.pause()

classList.

CSS에서 효과를 주는 class와 함께 사용하면 좋다.

• classList.add()
• classList.remove()

addEventListener("transitionend")

classList.add 로 효과를 줬을 때 transition이 모두 완료 된 후 를 나타낸다. 여기서 콜백함수로 classList.remove()를 하여 효과를 다시 없앴음.