[#JS 30 challenge] Day 1. Drum kit 배운 점

1. 오디오, 비디오 재생하기

✔️ html에서 오디오를 연결할 때는 <audio> 태그를 쓰고 src로 오디오 소스를 지정한다. 

<audio data-key="65" src="sounds/clap.wav"></audio>

✔️ 그리고 이를 플레이 시킬때는 .play()를 사용한다. 

audio.play();

✔️ 오디오, 비디오 일시정지 시키기

audio.pause();

---

2. 오디오, 비디오 재생 시점 설정하기

audio.currentTime = 0;

➥ 초 단위이고, 0 값인 경우 처음부터 음악을 재생한다. 

 

---

3. 명시된 클래스 추가, 제거하는 메서드

 

 

✔️ 명시된 클래스 추가하기

샐렉터.classList.add("playing");

 ➥ playing이라는 클래스를 추가하기

 

✔️ 명시된 클래스 제거하기

샐렉터.classList.remove("playing");

 

 

✔️ 클래스가 있으면 제거하고 false를 반환하고 없으면 클래스 추가하고 true를 반환하기

샐렉터.classList.toggle("playing");

 

 

5. addEventListener에서 새로운 이벤트 'transitionend'

transition이 완료된 이후에 발생하는 이벤트이다. transition 완료를 감지한다. 

 

test.addEventListener("transitionend", addText);

    const addText = () => {
        test.innerHTML = "이것은 테스트 텍스트입니다..";
    }

➥ transition이 끝나면 addText 함수를 시작한다. 

 

key.addEventListener("transitionend", removeTransition)

➥ transition이 끝나면 removeTransition 함수를 시작한다.