-
[Javascript] Mac용 사파리(Safari) 브라우저 및 iOS 브라우저에서 audio 재생 실패할 때 의외의 원인Javascript & TypeScript 2023. 9. 13. 23:36반응형
2021년 2월 React 찍먹 겸 안드로이드 -> 아이폰 변경 기념(?)으로 브라우저 기반의 mp3 player 를 개발하여 현재까지 잘 사용중이다.
해당 웹 개발 프로젝트는 아래 카테고리로 정리한 적 있었다.
지금은 Svelte에 꽂힌대다 Supabase이란 강력한 백엔드 도구를 알게되어 리뉴얼 겸 웹 기반 mp3 player를 재개발하고 있다. 파일 추가 기능과, Playlist, 디자인 작업 등 부가적인 부분을 추가하고 있지만, 근본적으로 음악파일을 blob 형식으로 브라우저 로컬 저장소에 저장시켜 재생하는 점은 그대로이다.
2021년도에 iOS에서 정상 동작하는 것을 확인했으며 현재까지도 잘 쓰고 있기 때문에 재생부분에 대해선 이슈가 없을 것이라 생각했고, 주로 쓰는 chrome 기반 브라우저에서 테스트할 때 정상적으로 음악이 실행되서 개발은 순탄하게 진행 될 줄 알았다.
그러나 아래와 같은 오류가 발생했다.
Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
해당 오류는 맥(Mac)용 Safari 브라우저와 iOS용 Chrome 브라우저 및 Safari 에서 발생했다.
오류 내용을 구글링해보면 'async await를 통한 Promise 비동기는 지원이 안된다. 동기방식으로 바꿔라', 'Safari의 설정 -> 웹 사이트 -> 자동재생에 대한 허용설정을 바꿔라' 등 주로 보안관련한 얘기가 검색되었는데, 모두 시도해봤지만 실패하고 말았다.
도저히 안되서 Svelte의 버그라고 생각이 들 정도였는데, 원인은 아주 의외의 곳에 있었다.
잘못된 포맷에 대한 브라우저간 차이
원인은 파일 이슈였다. 다만 정확한 원인은 파악이 안되는데, 내 오디오 코덱이 mp3 가 포함되어있기 때문에 mp3 확장자를 가진 상태였어도 Mac용 Chrome 브라우저에선 이를 호환할 수 있도록 내부적으로 처리되어 있었던 듯 하다. (확실치 않다)
반면 개복치(?) 같은 사파리(Safari)는 확실히 거부했다.
iOS에선 왜 다 안되는가?
Mac과 달리, iOS에선 크롬을 포함한 모든 브라우저에서 재생이 불가능했는데, 정확한 원인은 알 수 없지만 iOS 정책상 javascript 엔진을 각 브라우저 개발업체의 자체 엔진(V8)이 아닌 Safari에서 사용하는 Nitro 엔진으로 강제하기 때문인 것으로 추측된다. iOS에선 브라우저 아이콘만 다를 뿐 사실상 모두 Safari로 봐도 무방하다.
확인방법
Mac 용 사파리(Safari) 브라우저에 확인이 필요한 음악 파일을 드래그 앤 드랍해보자. 이슈가 없는 파일이라면 재생시간 표기와 함께 자동 재생될 것이다.
마치며
이 글이 나처럼 iOS에서 별 짓을 다 해도 재생이슈를 해결하지 못한 사람들에게 한 줄기 희망이 되길 고대한다. 이것 때문에 몇 칠동안 잠도 제대로 못자고 삽질 했다.
참조
https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability
반응형'Javascript & TypeScript' 카테고리의 다른 글
[Javascript] reduce 함수를 통한 합산, 감산, 비교 예제 및 유의사항 (2) 2023.12.06 [Javascript] canvas에서 S펜, Stylus pen 으로 선 그릴 때 끊어짐 해결 (0) 2023.09.28 [Javascript] 일부 Chrome 환경에서만 Uncaught DOMException: Blocked a frame with origin 오류 이슈 (0) 2023.08.23 [Javascript] navigator.clipboard.write 사용시 PC와 아이폰은 되지만 안드로이드만 실패할 경우 (0) 2023.07.03 [Svelte] Scrolling 되는 태그 엘리먼트에 대해 Scroll 값 구하기 예제 (0) 2023.03.01