Javascript30은 부담되지 않는 강의 시간과 함께 HTML과 CSS의 다양한 기능, DOM 조작, 자바스크립트 문법을 활용하는 방법을 배울 수 있는 장점이 있다.
Day1 - Drum kit
🎯 기능 요구사항
- 사용자의 정해진 입력 값에 따라 오디오를 재생한다.
- 입력 값에 따라 CSS 효과가 발생한다.
- CSS 효과가 끝나고나면 다시 원래 값으로 돌아온다.
🚀 배운 점
keydown 이벤트 및 오디오 재생
keydown 이벤트를 이용하여 사용자의 입력 값을 받아 정해진 오디오를 재생할 수 있었으며 동일한 키 값 입력시 재생중인 audio의 시간을 0으로 설정하여 지연없이 바로 실행가능하게 하였다.
window.addEventListener("keydown", playAudio);
audio.currentTime = 0;
audio.play();audio 태그
audio 태그의 controls attribute를 이용하면 오디오 컨트롤을 브라우저에서 제공받을 수 있다.
<audio
controls
src="sounds/clap.wav">
Your browser does not support the
<code>audio</code> element.
</audio>transitionend 이벤트
transition의 완료를 감지 할 수 있는 이벤트로 css에서 적용한 transition이 완료된 후에 css효과를 원래 값으로 바꾸기 위해 사용하였다.
[...keys].map(key => {
key.addEventListener("transitionend", resetKeyFrame);
});demo:
