[Javascript30] 1. JS Drum Kit

[Javascript30] 1. JS Drum Kit

Javascript30은 바닐라 자바스크립트(Vanila Javascript)로 30일 동안 매일 한 개의 프로젝트를 만들며 기본기를 익히는 챌린지입니다. 이 챌린지를 수행하면서 새로 알게 된 내용을 정리합니다. 참고로 HTML, CSS 소스 코드는 생략되며 필요하다면 여기에서 확인하시길 바랍니다.

전체 소스 코드

function removeTransition(e) { if (e.propertyName !== 'transform') return; e.target.classList.remove('playing'); } function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`div[data-key="${e.keyCode}"]`); if (!audio) return; // A ~ L을 제외한 key의 경우 종료 key.classList.add('playing'); audio.currentTime = 0; // 현재 재생 위치를 설정 audio.play(); } // forEach를 사용하기 위해서 NodeList를 Array로 변환 const keys = Array.from(document.querySelectorAll('.key')); // key에 transtionend 이벤트 추가 keys.forEach((key) => { key.addEventListener('transitionend', removeTransition); }); // window에 keydown 이벤트 추가 window.addEventListener('keydown', playSound);

주요 문법

document.querySelector(`엘리먼트[속성="${변수}"]`)

백틱 표현식과 엘리먼트[속성=""]을 사용하면 보다 쉽게 속성 값을 가진 엘리먼트들을 가져올 수 있다.

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

transitionend 이벤트 타입

많은 이벤트 타입들 중 하나인 transitionend는 CSS의 transition 효과가 종료된 시점에 실행된다. 이외의 이벤트 타입들은 여기를 참고하자.

keys.forEach((key) => { key.addEventListener('transitionend', removeTransition); });

Audio 객체

Web API들 중에서 소리 재생을 위한 Audio 객체가 있다. 자세한 내용은 여기를 참고하자.

audio.currentTime = 0; // 현재 재생 위치(s)를 설정 audio.play(); // 오디오를 재생

from http://leo-xee.tistory.com/5 by ccl(A) rewrite - 2021-11-27 19:02:01