audio 태그 대신 Audio 객체로 조작하기

Audio 객체 생성 후 사용 시 장점!

 

 

1. javascript로 세밀하게 조작이 가능함.

const introSound = new Audio("intro.mp3");

introSound.play(); // 재생
introSound.pause(); // 일시 정지
introSound.currentTime = 10; // 특정 시간으로 이동
introSound.volume = 0.5; // 볼륨 조절

 

 

2. DOM을 직접 조작할 필요 없음

 

- <audio> 태그를 사용하면 HTML에서 오디오 요소를 찾고(document.querySelector) 조작해야 함.
  => 코드가 더 깔끔해

// audio 태그 사용
<audio id="audio" src="intro.mp3"></audio>
<script>
  const audio = document.getElementById("audio");
  audio.play();
</script>


// Audio 객체 생성하여 접근
const introSound = new Audio("intro.mp3");
introSound.play();

 

 

3. 여러 개의 오디오 인스턴스를 만들 수 있음

 

- <audio> 태그를 사용하면 같은 파일을 재생할 때 동시에 여러 개를 실행하는 것이 어려움.

- new Audio()를 사용하면 여러 개의 독립적인 오디오 인스턴스를 만들 수 있음.

  => 같은 소리 겹쳐 재생할 시 유용

const sound1 = new Audio("click.mp3");
const sound2 = new Audio("click.mp3");

sound1.play(); // 첫 번째 사운드 재생
setTimeout(() => sound2.play(), 500); // 0.5초 뒤에 두 번째 사운드 재생

 

 

4. 이벤트 핸들링이 더 쉬움

const introSound = new Audio("intro.mp3");

introSound.addEventListener("ended", () => {
  console.log("오디오 재생 완료!");
});

// 예) 재생 완료 시 log가 찍히도록 이벤트를 추가함.