웹페이지에 배경음악 넣기 (버튼으로 음악 재생/정지 제어)

웹페이지에서 배경음악을 자동으로 재생하는 것은 사용자 경험을 향상시킬 수 있는 흥미로운 기능 중 하나입니다. 그러나 최신 브라우저의 정책으로 자동재생이 차단되고 있습니다. 이 문제를 해결하기 위해 사용자가 직접 음악을 제어할 수 있는 버튼을 추가하여, 사용자가 음악을 듣고 싶을 때 수동으로 재생할 수 있도록 하는 방법을 알아보겠습니다.

1. HTML 코드

먼저, HTML 코드를 통해 버튼 및 오디오 요소를 생성합니다.

<a onclick="play()" class="musicBtn">재생</a>
<a onclick="stop()" class="musicBtn">정지</a>

<audio autoplay id="music">
  <source src="/templates/audio/eta.mp3" type="audio/mp3">
</audio>

 

2. JavaScript 코드

다음으로, JavaScript 코드를 사용하여 음악을 제어하는 함수를 작성합니다.

var audio = document.getElementById("music");

function play() {
  if (!audio.paused) {
    audio.pause();
  } else {
    audio.play();
  }
}

function stop() {
  audio.pause();
  audio.currentTime = 0;
}

 

위의 코드에서 `play()` 함수는 음악을 재생 또는 일시정지하고, `stop()` 함수는 음악을 정지하고 시작 지점으로 되돌립니다.

 

3. 사용자 경험 개선

이러한 기능을 통해 사용자는 웹페이지에서 "재생" 버튼을 클릭하여 원할 때 수동으로 음악을 재생할 수 있습니다. "정지" 버튼을 클릭하여 음악을 정지하고 다시 시작 지점으로 되감을 수 있습니다.

이러한 방식으로 사용자에게 음악 제어 권한을 넘겨줌으로써, 브라우저의 자동재생 정책을 극복할 수 있습니다. 사용자는 음악을 원할 때 듣고 중지할 수 있어 더 나은 사용자 경험을 얻을 수 있습니다.

 

 

참고 블로그 : https://hongku.tistory.com/364

HTML 오디오 태그 (Audio, iframe) 음악 자동재생