[JavaScript30] 1. Drum Kit | data-*, audio, transitionend

📃 요구사항

1. 키보드를 눌렀을 때, 눌린 키에서 해당 오디오 소리가 재생되게 한다.
2. 눌린 키 요소에 playing 클래스를 추가하여 특정 css를 적용한다.
3. 모든 이벤트가 끝나면, playing 클래스를 제거하여 초기 상태로 복구한다.

 

✨ 결과화면

 

💻 소스코드

document.addEventListener("keydown", playSound); // 키 눌렸을 때

const keys = document.querySelectorAll(".key"); // 이벤트 끝났을 때
keys.forEach((key) => key.addEventListener("transitionend", removePressed));

// Key가 눌렸을 때 동작하는 함수
function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

  if (key == null || audio == null) {
    // 눌린 key 또는 audio가 null 이면 아무것도 하지 않는다.
    return;
  }

  audio.currentTime = 0; // 재생 지점을 0으로 설정하여 누를 때마다 재생 지점 초기화
  audio.play();

  key.classList.add("playing");
}

// 이벤트가 끝나면 실행될 함수
function removePressed(e) {
  if (e.propertyName != "transform") return; // transform이 아닌 border, shadow 등의 경우에는 무시
  // console.log(e.propertyName); // 이 때, transform속성만 출력된다.
  this.classList.remove("playing");
}

 

📖 TIL

data-*

HTML5부터 추가된 속성으로, HTML 요소에 간단한 데이터를 저장할 수 있도록 해준다. data-* 속성의 이름 생성 규칙과 문법은 다음과 같다.

• 대소문자 여부에 상관없이 xml로 시작하면 안된다.
• 세미콜론(U+003A)을 포함해서는 안된다.
• 대문자를 포함해서는 안된다.

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

JavaScript에서 data-*에 정의된 속성 값들을 읽는 방법은, dataset 속성을 사용하는 것이다. 이 때, HTML에서 대시(-)로 구분되었던 이름 문자는 camelCase로 변환된다.

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

 

Drum Kit 소스코드의 data-* 접근 방식을 살펴보면 다음과 같다.

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

여기에서는 백틱(`)을 통해 접근한 것을 볼 수 있다. audio와 key를 상수로 선언한 후, audio는 <audio>태그 중에서 data-key가 눌린 키보드의 KeyCode인 것을, key는 클래스명이 key인 것들 중에서 data-key가 눌린 키보드의 KeyCode인 것을 가져온다.

 

audio

HTML5부터 도입된 <audio> 태그는 문서에 소리 콘텐츠를 포함할 때 사용한다. 기본적으로 <audio src="파일경로">로 선언하고, controls, autoplay, loop 등의 다양한 속성을 추가할 수 있다. Drum Kit의 HTML 소스코드에서는 다음과 같이 작성되어 있다.

    <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>

JS에서의 접근은 다음과 같은 방식으로 했다.

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

audio.currentTime = 0;
audio.play();

audio 상수를 통해 querySelector로 눌린 KeyCode를 가진 <audio> 태그로 접근한 후, play() 메소드를 사용해서 음악을 재생한다. 그런데, 단순히 audio.play(); 만 선언을 하면 이전에 재생했던 지점이 적용되어 몇 초간의 텀이 발생한다. 그래서 currentTime 속성을 이용하여 재생 지점을 초기화 해준다.

속성	설명
autoplay	브라우저가 load될 때 자동 재생 여부를 결정한다. boolean 값을 갖는다.
currentTime	재생 지점을 설정한다. 초 단위로, 0이면 처음부터 재생한다.
loop	반복 재생 여부를 결정한다. boolean 값을 갖는다.
src	audio의 경로(URL)를 설정한다.
volume	음량을 지정한다. 0.0~1.0 사이의 값으로 지정할 수 있다.

 

transitionend

transitionend는 CSS의 transition이 완료된 이후에 발생하는 이벤트로, transition과 함께 사용되는 함수이다. 

const transition = document.querySelector('.transition');

transition.addEventListener('transitionend', () => {
  console.log('Transition ended');
});

위와 같이 addEventListener를 통해 transitionend이벤트를 등록하여 사용할 수 있다. Drum Kit에서는 키가 눌렸을 때 key.classList.add("playing")을 통해 해당 요소에 playing 클래스를 추가해준다. 그런데 transitionend를 하지 않으면, 키가 눌린 효과가 지속된다. 그래서 우리는 해당 이벤트가 끝나면, playing 클래스를 remove 해서 상태를 원상복구 시켜줘야 한다. Drum Kit 소스코드에서는 다음과 같이 작성했다.

const keys = document.querySelectorAll(".key");
keys.forEach((key) => key.addEventListener("transitionend", removePressed));

function removePressed(e) {
  if (e.propertyName != "transform") return;
  this.classList.remove("playing");
}

keys 상수를 선언하여 key 클래스를 가진 모든 요소들을 가져온다. querySelectorAll()을 이용해서 가져왔는데, querySelectorAll()은 조건에 맞는 모든 요소들을 NodeList로 반환한다. 그래서 keys.addEventListener와 같이 선언하면 모든 요소들에 이벤트 리스너를 추가할 수 없다. 그래서 forEach를 사용해서 모든 요소들을 순회하며 각각의 요소들에  이벤트를 걸어줘야 한다.

그리고 실행 시간이 가장 긴 transform만 뽑아서 얘가 끝나면 모든 transition 요소들이 자동으로 끝날 수 있도록 해 주면 된다. propertyName속성을 활용해서 transform을 뽑아낸 후, 해당 이벤트가 끝나면 classList.remove("playing")을 통해 playing 클래스를 제거하여 CSS 요소를 처음으로 초기화하면 된다.

(영상에서 "this"는 always equal to the whatever got called against it. 이라고 한다. 나중에 this에 대해서도 한 번 공부하고 정리해야겠다.)

 

 

 

👀 참고

youtube Wes Bos

https://www.youtube.com/watch?v=VuN8qwZoego&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH 

 

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event