크롬 브라우저에서는 Autoplay 가 되지 않는다.

음악 자동재생 오류 발생!

리액트로 간단한 토이프로젝트를 하는데, 배경음 자동 재생이 막혀서 삽질하다가 쓰는 글이다. 결론부터 말하자면, 에러메세지를 제대로 안 읽는 내가 잘못했다.

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

웹 사이트에 배경음악을 자동재생해놓고 크롬 브라우저에서 열면 다음과 같은 에러메세지가 나타난다. (정책상의 문제기 때문에 엣지 브라우저에선 되더라) 사용자가 문서(사이트)와 상호작용하지 않았기 때문에 play()가 실패했다는 말이다. 왜 이걸 제대로 읽지 않아서 몇시간을 허비한 것일까...

오류 발생 원인과 해결 방법

아무튼, Chrome의 자동 재생 정책은 다음과 같다. (구글 자동 번역의 힘을 빌렸다.)

• 음소거 된 자동 재생은 항상 허용됩니다.
• 다음과 같은 경우 소리와 함께 자동 재생이 허용됩니다.
  • 사용자가 도메인과 상호작용했습니다 (클릭, 탭 등).
  • 데스크톱에서 사용자의 미디어 참여 지수 임계 값이 초과되었습니다. 이는 사용자가 이전에 사운드가 있는 비디오를 재생했음을 의미합니다.
  • 사용자가 모바일의 홈 화면에 사이트를 추가했거나 데스크톱에 PWA를 설치했습니다.
• 상단 프레임은 자동 재생 권한을 iframe에 위임하여 사운드와 함께 자동 재생을 허용 할 수 있습니다.

사이트를 보니 사용자 경험을 개선하기 위한 정책으로 보인다. 자세한 내용은 아래 사이트에 나와있다.
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Autoplay Policy Changes  |  Web  |  Google Developers

나는 버튼을 누르면 재생되는 것으로 해결했다. (사용자가 도메인과 상용작용하는 조건 만족)

ex. 다음으로 버튼을 누르면 본래 기능 + 오디오 재생도 함께

오늘의 교훈 : 에러 메세지는 꼼꼼히 읽자....