들어가며

오디오 재생하는 기능을 구현하고 테스트하던 과정에서 발생한 현상이다. 에러가 발생하고 오디오가 나오지 않았다. 왜 어떤 때는 잘 재생되고 어떤 때는 재생이 안될까.

증상

onClick 또는 onTouchend 이벤트가 걸린 엘리먼트를 꾹 누르고 한참 기다렸다가 땔 때 해당 에러가 나오면서 오디오 재생이 안됐다.

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

원인

브라우저는 페이지에 들어오자마자 자동 재생하는 오디오를 차단한다. 기준은 사용자가 의도했는지 여부다. 의도치 않는 오디오 재생은 사용자 프라이버시를 위해 브라우저가 차단한다.

원인이 됐던 꾹 누르고 때는 테스트의 경우, 사용자의 입력이 들어오고 일정 시간이 지났기 때문에 사용자가 의도하지 않았다고 판단했다.

오디오가 포함된 비디오도 포함된다. muted 옵션으로 음소거 설정 후 자동 재생을 달아두면 의도한대로 작동할 것이다.

The Autoplay Policy launched in Chrome 66 for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome.
https://developer.chrome.com/blog/autoplay/

파일을 비동기로 받는 도중 실행할 경우

• 아직 비디오/오디오 파일을 불러오지 않았는데 Play로 실행하면 동일한 에러가 발생한다.
• oncanplaythrough 메소드로 실행할 수 있게 된 다음 play 메소드를 실행하면 해결할 수 있다.

https://developer.chrome.com/blog/play-request-was-interrupted/
https://blog.naver.com/PostView.nhn?blogId=clean_up_&logNo=221317484971&parentCategoryNo=&categoryNo=19&viewDate=&isShowPopularPosts=true&from=search