HTML5 audio — autoplay · loop · 자동재생 차단 우회 완전 정리

 

 

Web Development · HTML5 Audio

HTML5 audio —
autoplay · loop와 크롬 자동재생 차단

자동 재생을 시도하지만 브라우저 정책에 막히는 이유와 우회법

시작 오늘 분석할 코드

autoplay(자동 시작) + loop(무한 반복) 두 속성을 붙인 audio. 의도는 페이지 진입 즉시 BGM 시작이지만, 크롬·사파리는 사용자 정책에 의해 자동재생을 차단한다.

<audio src="media/bgsound.mp3" autoplay loop></audio>

※ 의도는 자동 시작 + 반복이지만, 크롬은 audio·video의 자동 시작을 막아놨다. muted 추가가 우회의 핵심.

용어 용어 정리

autoplay로딩되면 자동 재생 시도

loop끝나면 다시 처음으로

muted소거 상태 — autoplay 차단 우회

자동재생 정책2018년~ Chrome/Safari 차단

User Gesture사용자 클릭 후에는 재생 가능

Promise.play()JS로 재생 시도 — 실패 시 catch

---

1 왜 자동재생을 막았나?

2010년대 웹사이트들이 무차별 자동 재생 광고를 남발해서 사용자들이 시끄러운 페이지에 짜증을 냈다. Chrome 66 (2018)부터 audio·video의 자동재생을 기본 차단.

상황	자동재생 가능?
그냥 autoplay	차단
autoplay muted	가능 (소리 없음)
사용자 클릭 후 .play()	가능
해당 사이트 자주 방문 (high MEI)	가능 (Chrome 한정)
모바일 Safari	거의 항상 차단 — 사용자 제스처 필수

---

2 autoplay 작동시키기

의도대로 안 됨

<audio autoplay loop>
음소거 안 했기 때문에 차단

muted 추가

<audio autoplay loop muted>
소거 상태로 자동 시작 가능

※ BGM은 사실 muted라도 의미 없다 — 소리가 없는 BGM. video 배경에서 muted autoplay가 더 자연스럽다.

---

3 JS로 재생 시도 + 차단 처리

원본 markdown에 있는 코드를 분석해보자. play()는 Promise를 반환한다 — 성공/실패에 따라 다른 처리.

var autoplayInterval = setInterval("autoplayVideo()", 200); function autoplayVideo() { var promise = document.querySelector('video').play(); if (promise !== undefined) { promise.then(function(_) { // 재생 시작 성공! clearInterval(autoplayInterval); }).catch(function(error) { // 자동재생 차단됨 → "Play" 버튼 표시 }); } }

※ 코드 동작

• 200ms마다 play() 시도 반복
• 성공하면 clearInterval로 멈춤
• 실패해도 catch로 안전 처리 (에러 발생 X)
• 실무에서는 무한 시도보다 "Play" 버튼 표시가 더 깔끔

---

 

반응형

 

4 모범 패턴

/* 모범: muted autoplay + JS unmute on click */ <video autoplay loop muted id="bg">...</video> <button onclick="unmute()">소리 켜기</button> <script> function unmute() { const v = document.getElementById('bg'); v.muted = false; } </script>

---

5 자주 하는 실수

실수	증상	해결
BGM에 autoplay만	크롬에서 안 들림	BGM이라면 사용자 액션 후 재생
video 배경에 autoplay만	일부 브라우저 차단	muted 추가
play() 결과 무시	차단 시 콘솔 에러 + 깨진 UI	Promise catch로 처리
iOS에서 자동재생 시도	거의 항상 실패	사용자 탭 후 재생

---

핵심 한 줄 요약

autoplay + loop자동 시작 + 반복 재생 의도

크롬 차단2018~ 사용자 보호 정책

우회 = muted소거 + autoplay는 허용

JS 재생play()는 Promise — catch 처리 필수

실무자동재생 대신 "재생" 버튼 노출이 정공법

Tags

#HTML5 #audio #autoplay #loop #muted #자동재생 #자동재생차단 #BGM #배경음악 #play-promise #controls #미디어속성 #사용자제스처 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

HTML5, audio, autoplay, loop, muted, 자동재생, 자동재생차단, BGM, 배경음악, play-promise, controls, 미디어속성, 사용자제스처, 웹개발, HTML, 티스토리