5. 프로젝트 똥파리 - 자동재생 적용하기

서론

마지막 효과로

소리를 적용해보 겠습니다.

 

HTML

   <audio
      autoplay
      controls
      loop
      id="bee-sound"
      src="188708__zywx__flying-mosquito.wav"
      style="display:none;"
    ></audio>

오디오 태그를 추가해준뒤

어트리뷰트로 보이는거처럼 추가해 줍니다.

오디오태그 자동재생은 브라우저에서 막아둔곳이 많아서

다음과 같이 자바스크립트를 수정해 줍니다.

 

const beeSound = document.getElementById("bee-sound");
const [body] = document.getElementsByTagName("body");

function play() {
  if (!beeSound instanceof HTMLAudioElement) return;
  if (beeSound.paused) {
    beeSound.play();
  } else {
    body.removeEventListener("click", play);
  }
  console.log(beeSound.paused);
}
body.addEventListener("click", play);

오디오 태그레퍼렌스를 찾고

바디 태그레퍼렌스도 쿼리로 찾습니다.

 

플레이함수를 만들고

만약 소리가 재생중이아니면 재생

재생중이면 이벤트리스너 제거

 

마지막으로 바디에다가 클릭하면 소리가 재생되도록 해줍니다.

 

이방법이 현시점 자동재생 최선 인거 같습니다.

 

똥파리 프로젝트를 이것으로 마칩니다!