🙉 왜 음악이 자동으로 재생되지 않죠?

웹페이지를 열자마자 감성적인 배경음악이 흘러나오면 좋겠다는 생각, 한 번쯤 해보셨죠?

저도 그랬습니다.

“사용자가 아무 것도 안 해도, 페이지 로드 시점에 음악이 자동으로 재생되면 좋을 텐데…”

하지만 현실은 달랐습니다. 아무리 audio.play()를 걸어도 브라우저는 요지부동. 콘솔에는 다음과 같은 메시지만 남기고 말이죠.

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

🎧 그래서 찾아봤습니다 — 브라우저는 왜 막을까?

웹에서 자동재생(autoplay)이 논란이 되었던 적이 있습니다.

결국 크롬, 사파리, 파이어폭스 등 주요 브라우저는 공통 정책을 적용하게 되죠.

“사용자의 명시적인 동작(클릭, 터치 등)이 있기 전까지, 오디오/비디오 재생은 금지”

이 정책은 다음과 같은 이유에서 나왔습니다.

사실 하나 있긴 합니다.

🔈 음소거(muted) 상태라면 자동재생이 허용됩니다.

예를 들어 다음 코드처럼 muted 속성을 주면 브라우저가 자동재생을 허용합니다:

<video autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

하지만… 이건 음악을 틀고 싶은 우리의 목적에는 부합하지 않죠. muted 상태로는 소리가 들리지 않으니까요.

const bgm = document.getElementById("bgm");
bgm.play(); // 실패! 사용자의 상호작용 전까지는 재생되지 않음

콘솔: Uncaught (in promise) DOMException: play() failed...

하지만 버튼을 클릭하게 만들면?

document.querySelector("#playBtn").addEventListener("click", () => {
  bgm.play(); // 성공!
});

정상적으로 음악이 재생됩니다. 중요한 건 사용자의 행동이라는 거죠.

아쉽지만 불가능합니다.

이건 단순한 설정이 아니라, 브라우저 레벨의 보안 정책(Security Policy) 입니다. 코드로 우회하거나 설정으로 풀 수 없습니다. 모든 웹사이트에 동일하게 적용됩니다.

현재 대부분의 웹사이트는 이런 방식으로 해결합니다:

예:

<button id="playBtn">배경음악 재생하기</button>

이렇게 하면 브라우저 정책을 준수하면서도 사용자에게 음악을 들려줄 수 있습니다.