[트러블슈팅] 브라우저에서 자동 재생 제한 정책에 의한 에러

원인된 상황

 

페이지를 띄운 후 웹소켓으로 데이터가 들어올 때마다 화면에 알람을 띄워주는 기능을 작업했으나 아래와 같은 에러가 뜨며 작동이 되지 않았다.

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

 

 

 

원인

 

브라우저마다 정책은 조금씩 다르지만, 기본적으로 자동 재생 기능을 차단하는 편이다.

여기서 자동 재생이란, HTML 속성("autoplay)을 통해 재생하거나 JS 코드(.play())를 통해 소리를 재생하게끔 하는 것이다. 

 

브라우저에서 자동 재생을 제한하는 이유는 사용자 경험을 위함인데, 웹 페이지를 방문한 사용자들이 자신의 의사에 반해 소리가 재생된다면 불편을 느낄 수가 있으며, 또한 자동으로 소리가 재생된다면 그만큼의 데이터 사용량을 소비하게 될 수도 있기에 자동 재생을 차단하는 정책을 설정하고 있다.

 

그럼에도 자동재생이 가능한 상황이 있는데 아래 조건에 하나라도 해당된다면 가능하게 된다. 이 외에도 몇 가지 더 있지만 이는 브라우저마다 약간 씩 다른 것으로 알고 있으니 MDN 웹에서 본 내용을 토대로 써놓겠다.

 

1. 소리의 볼륨이 0이거나 음소거된 상황

2. 사용자가 사이트와 상호작용을 일으킴

3. 사용자가 직접 방문한 페이지를 자동 재생해도 된다고 설정해놓은경우

 

 

 

해결

 

해결은 간단하게 했다. 나의 경우에는 플레이 버튼이 따로 있는 것이 아니기에 사용자가 이벤트를 실행할 수 있는 공간이 마땅치 않았다.

그렇기에 페이지 최초 접속 시 경고 모달창을 띄웠고, 모달창을 닫게 유도함으로써 사용자의 인터랙션을 확보하고 자동 재생이 가능하도록 처리해놨다.

 

 

 

---

참고 문서

• Chrome의 자동재생 정책 - https://developer.chrome.com/blog/autoplay/ 
• 미디어 및 Web Audio API 자동 재생 가이드 - https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide