[Javascript] Mac용 사파리(Safari) 브라우저 및 iOS 브라우저에서 audio 재생 실패할 때 의외의 원인

2021년 2월 React 찍먹 겸 안드로이드 -> 아이폰 변경 기념(?)으로 브라우저 기반의 mp3 player 를 개발하여 현재까지 잘 사용중이다.

해당 웹 개발 프로젝트는 아래 카테고리로 정리한 적 있었다.

https://ddochea.tistory.com/category/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EA%B0%9C%EB%B0%9C/%EB%AE%A4%EC%A7%81%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4%20%EC%9B%B9%EC%95%B1

'프로젝트 개발/뮤직플레이어 웹앱' 카테고리의 글 목록

 

지금은 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://arrangeactassert.com/posts/how-to-fix-the-request-is-not-allowed-by-the-user-agent-or-the-platform-in-the-current-context-possibly-because-the-user-denied-permission/

How to fix: The request is not allowed by the user agent or the platform in the current context, possibly because the user denie

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#autoplay_availability

Autoplay guide for media and Web Audio APIs - Web media technologies | MDN

https://stackoverflow.com/questions/46546744/difference-between-chrome-for-ios-and-chrome-for-android

Difference between Chrome for iOS and Chrome for Android