💥임의 src로 미디어 자동재생 우회하기

미디어 자동재생이 안된다

새로운 프로젝트를 만드는데, 오디오를 자동재생하는 기능이 들어간다.
즉, 음소거가 아닌 상태에서 오디오가 자동재생되어야 한다.
데스크탑 크롬과 모바일 크롬, 데스크탑 사파리에서는 잘 동작하는데, 모바일 사파리에서 해당 기능이 동작하지 않았다.
모바일 사파리에서 띄운 에러는 다음과 같다.

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.

이번 프로젝트에서 가장 중요한 기능이라서(😱) 어떻게든 돌아가게 해야 해서 꼼수 부릴우회할 방법에 대해 고민해보았다.

💡 tl;dr
1. 브라우저마다 미디어 자동재생 정책이 다르므로 정책을 잘 알아보자.
2. 사용자 제스처의 직접적인 결과로 미디어 자동재생하는 것은 가능하다.
3. 클릭 혹은 submit 이벤트가 발생하자마자 임의 오디오를 음소거로 재생하고, 실제 재생되어야 할 src를 받으면 오디오의 src를 교체 및 음소거 해제한 후 재생하여 해결했다.

미디어 자동재생 상황

이번 프로젝트는 사용자가 특정 버튼을 클릭하거나 입력값을 Submit하면 API와 통신하고 응답의 결과를 보여준 후 오디오가 자동재생되는 플로우이다.
즉, 사용자가 직접 오디오를 재생하는 상황이 아니며 API의 결과가 렌더링된 후 자동재생되도록 코드를 작성하였다.

브라우저 정책

미디어 자동재생에 대한 브라우저 정책을 참고해서 우회할 방법이 있는지 고민해보자.

먼저 MDN으로 autoplay 허용 조건을 찾아봤습니다. 문서에 따르면 아래 조건 중 적어도 하나를 충족해야 autoplay를 사용할 수 있습니다.

• 오디오가 음소거 상태거나 볼륨이 0으로 설정될 것
• 사용자가 사이트와 상호작용 (클릭, 탭, 키 누르기 등) 할 것
• 사이트가 autoplay 허용 사이트일 것 (브라우저가 자동으로 등록하거나 사용자가 수동으로 사이트에 autoplay를 허용하는 경우)
• Permissions Policy를 사용해 <iframe>과 도큐먼트에 autoplay 권한을 부여하는 경우

출처: React Safari 오디오 재생 트러블 슈팅

MDN 문서대로라면 클릭과 submit처럼 사용자와 사이트의 상호작용이 있기 때문에 자동재생이 되어야 한다.
그래서 크롬에서는 문제가 없었던 것으로 보인다.
브라우저마다 미디어 자동재생 정책이 다른 것으로 추정되어 조금 더 찾아보았다.

A note about the user gesture requirement: when we say that an action must have happened “as a result of a user gesture”, we mean that the JavaScript which resulted in the call to video.play(), for example, must have directly resulted from a handler for a touchend, click, doubleclick, or keydown event. So, button.addEventListener(‘click’, () => { video.play(); }) would satisfy the user gesture requirement. video.addEventListener(‘canplaythrough’, () => { video.play(); }) would not.
사용자 제스처 요건에 대한 참고 사항: "사용자 제스처의 결과"로 동작이 발생해야 한다는 것은, 예를 들어 video.play()를 호출한 자바스크립트가 touchend, click, doubleclick 또는 keydown 이벤트의 핸들러에서 직접 발생했어야 한다는 의미입니다. 따라서 button.addEventListener('click', () => { video.play(); })는 사용자 제스처 요구 사항을 충족하지만, video.addEventListener('canplaythrough', () => { video.play(); })는 충족하지 못합니다.
출처: New <video> Policies for iOS

Webkit 문서에서 directly resulted라고 명시되어 있다.
즉, 사용자 제스처의 직접적인 결과로 재생과 같은 JavaScript 호출은 허용한다는 뜻이다.
내 생각엔 현재 click과 submit의 직접적인 결과로 렌더링하고 있지, 오디오를 재생하는 것이 아니므로 브라우저(모바일 사파리)에서 에러를 출력한 게 아닌가 싶었다.
여기서 아이디어를 착안했다!

click과 submit이 발생하자마자 아무 오디오를 음소거로 재생하다가 재생하려던 오디오 소스를 받으면 그때 오디오를 재생하면 되지 않을까?
결과적으로만 보면 사용자의 직접적인 상호작용으로 오디오가 재생되고, 심지어 음소거로 재생되고 있었으니까 브라우저에서 안 막을 거 같은데??

코드 구현

기존 코드

기존에는 오디오가 자동재생되어야 할 때 바로 재생하도록 작성했다.
예시 코드이므로 이런 느낌으로 작성했구나 정도로만 참고하면 좋겠다.

const audioRef = useRef<HTMLAudioElement>(null);
const [audioSrc, setAudioSrc] = useState<string | null>(null);

const fetchAudioSrc = useCallback(() => {
  // 3초 후 오디오 소스 가져오기
  setTiemout(() => {
	const src = "new audio source";
	  setAudioSrc(src);
  }, 3000);
}, []);

useEffect(() => {
  if (audioRef.current && audioSrc) {
	audioRef.current.src = audioSrc;
 	audioRef.current.onplay = () => { ... };
	audioRef.current.onended = () => { ... };
	audioRef.current.play();
  }
}, [audioSrc]);

return (
  ...
  <audio hidden ref={audioRef} />
  <button onClick={fetchAudioSrc}>Fetch Audio Source</button>
  ...
);

오디오 재생(audioRef.current.play())이 사용자의 직접적인 클릭으로 발생한 게 아니고 상태(audioSrc) 변경으로 인해 발생된 것이기 때문에 모바일 사파리에서 에러를 내는 것으로 의심되었다.

바뀐 코드

button의 click 이벤트에 오디오를 바로 재생하도록 수정하였다.

const audioRef = useRef<HTMLAudioElement>(null);
const [audioSrc, setAudioSrc] = useState<string | null>(null);

// 추가
const playFakeAudio = useCallback(() => {
  if (audioRef.current) {
	audioRef.current.src = "아무 오디오 소스";
	audioRef.current.muted = true;
	audioRef.current.onplay = null;
	audioRef.current.onended = null;
  }
}, []);

const fetchAudioSrc = useCallback(() => {
  playFakeAudio(); // 추가
  setTiemout(() => {
	const src = "new audio source";
	setAudioSrc(src);
  }, 3000);
}, []);

useEffect(() => {
  if (audioRef.current && audioSrc) {
	audioRef.current.src = audioSrc;
	audioRef.current.muted = false; // 추가
    audioRef.current.onplay = () => { ... };
    audioRef.current.onended = () => { ... };
  }
}, [audioSrc]);

return (
  ...
  <audio autoPlay hidden ref={audioRef} /> {/* autoPlay 추가 */}
  <button onClick={fetchAudioSrc}>Fetch Audio Source</button>
  ...
);

audio 태그에 autoPlay 속성을 추가하여 미디어가 재생 가능할 때 자동으로 재생되게 하였다.
그리고 버튼을 클릭하면 playFakeAudio()를 호출하여 3초 전까지 audio가 음소거 상태에서 재생되게끔 하였다.(audioRef.current.muted = true;)
3초 후에는 실제 재생되어야 하는 소스를 가져오기 때문에 useEffect에서 audio의 src를 바꾸고 muted를 해제하여, 클릭 이벤트 때문에 이미 재생 중이던 오디오가 소리와 함께 재생하게 처리하였다.

결과

계획대로 (테스트 가능한..) 모든 브라우저에서 오디오가 자동재생되었다.
모든 사파리 모바일 버전에서 테스트해보지는 못했으나, iOS 15~17에서는 문제 없었다.
기능 구현을 위해 불필요한 리소스를 다운받아야 하는 단점이 있지만, 크기가 작은 소스를 사용한다면 사용자에게 부담을 덜 줄 것으로 예상한다.
미디어 자동재생을 구현할 때 브라우저 정책을 읽어보고 프로젝트 상황에 맞게 우회할 방법을 고민하는 것을 추천한다.
그리고 우회한 다른 아이디어나 경험이 있다면 공유해주면 너무 감사하겠다..!

참고

React Safari 오디오 재생 트러블 슈팅
[JS] audio 태그로 bgm 재생, play() failed because the user didn't interact with the document first 에러
New <video> Policies for iOS