카카오톡 인앱 브라우저에서 오디오 플레이어 에코 문제 해결

웹페이지에 오디오 플레이어를 삽입하기 위해 react-h5-audio-player 패키지를 사용했다.

자동재생이 되게 하고 싶었는데, 일반적인 브라우저 정책 상 사용자 동의 없는 자동재생은 막히기 때문에...

뭐 이런.. useEffect를 이용해 어떤 사용자 상호작용이 1회라도 있으면 재생되게 했다.

아니 그런데 ... 어떤 상황에서는 갑자기 에코가 발생하는 것이 아닌가?
확인해 봤더니 카카오톡 인앱브라우저를 사용할 때 그랬다.

카카오톡 인앱브라우저는 Autoplay를 막지 않는 것이다....

Autoplay 옵션으로 재생이 되고 있는데 상호작용 이벤트로 또 재생을 시키니까 에코같은 효과가 났던 것이다.
그래서 플레이어에서 재생 버튼을 눌러도 배경음악이 절대 안 꺼졌다...(당연히 에코는 꺼짐)

Autoplay를 제거하면 카톡 인앱브라우저, 크롬 모바일웹, 크롬 PC웹 등등에서 원하는 대로 autoplay되는 것 없이 사용자 상호작용 이후 재생된다.

 

🔍 요약

1. 카카오톡 인앱 브라우저에서 autoPlay가 동작 → 음악이 재생됨
2. 사용자가 페이지를 터치 → handleInteraction() 실행됨 → play() 호출됨
3. 이미 autoPlay로 재생 중이지만, 별도의 play() 호출로 같은 음원이 다시 재생됨
4. 결과적으로 음악이 두 겹으로 겹쳐서 들리는 현상 발생
5. autoPlay 옵션을 제거하여 해결