BOM을 사용하여 브라우저의 사운드 제어하기

13 Oct 2023

브라우저 개발에서 사운드는 사용자 경험을 향상시키는 중요한 요소입니다. 웹 애플리케이션에서 사운드를 재생, 일시 중지 또는 제어하는 기능은 사용자에게 더욱 풍부한 인터랙티브 환경을 제공할 수 있습니다. 이를 위해 브라우저 객체 모델(Browser Object Model, BOM)을 사용하여 사운드를 제어하는 방법을 알아보겠습니다.

1. 사운드 파일 재생하기

사운드 파일을 재생하기 위해서는 HTML의 <audio> 요소를 사용할 수 있습니다. 다음은 <audio> 요소를 사용하여 사운드 파일을 재생하는 예제입니다.

<audio id="myAudio" src="sound.mp3"></audio>

<script>
  const audio = document.getElementById('myAudio');
  audio.play();
</script>

위의 코드에서는 audio 요소를 선택하여 play() 메서드를 호출하여 사운드 파일을 재생합니다.

2. 사운드 일시 중지하기

사운드 파일을 재생 중이던 도중에 일시 중지하고 싶다면 pause() 메서드를 사용할 수 있습니다. 다음은 사운드 파일을 재생하고 일시 중지하는 예제입니다.

<audio id="myAudio" src="sound.mp3"></audio>

<button onclick="togglePlay()">재생/일시 중지</button>

<script>
  const audio = document.getElementById('myAudio');

  function togglePlay() {
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  }
</script>

위의 코드에서는 <button> 요소를 추가하여 togglePlay() 함수를 호출하도록 설정하고, togglePlay() 함수 내에서 paused 속성을 사용하여 일시 중지 또는 재생 여부를 확인하고, 이에 따라 적절한 메서드를 호출합니다.

3. 사운드 제어하기

사용자에게 사운드 제어 기능을 제공하려면 표준 HTML 요소 외에 사용자 정의 인터페이스를 구현해야 할 수도 있습니다. 이를 위해서는 BOM의 Audio 객체를 사용할 수 있습니다. Audio 객체를 사용하면 소리 파일을 로드하고 재생, 일시 중지, 정지 등과 같은 기능을 수행할 수 있습니다. 다음은 Audio 객체를 사용하여 사운드 파일을 제어하는 예제입니다.

<button onclick="playSound('sound.mp3')">사운드 재생</button>
<button onclick="pauseSound()">일시 중지</button>
<button onclick="stopSound()">정지</button>

<script>
  let audio;

  function playSound(soundFile) {
    if (audio) {
      audio.pause();
    }
    audio = new Audio(soundFile);
    audio.play();
  }

  function pauseSound() {
    if (audio) {
      audio.pause();
    }
  }

  function stopSound() {
    if (audio) {
      audio.pause();
      audio.currentTime = 0;
    }
  }
</script>

위의 코드에서는 playSound(), pauseSound(), stopSound() 함수를 정의하여 각각 사운드 파일을 재생, 일시 중지, 정지하는 기능을 수행합니다. playSound() 함수는 이전에 재생한 사운드가 있다면 일시 중지하고 새로운 사운드를 재생합니다. stopSound() 함수는 사운드를 정지하고 재생 위치를 처음으로 되돌립니다.

BOM을 사용하여 브라우저의 사운드를 제어할 수 있으므로 사용자에게 더욱 풍부한 경험을 제공할 수 있습니다. 자유롭게 BOM을 활용하여 브라우저의 사운드를 제어해보세요!

참고 자료:

MDN web docs - HTMLMediaElement

MDN web docs - Audio