사파리 audio 크로스 브라우징 이슈

소켓에서 true를 주면 소리를 재생하는 컴포넌트가 있는데

작동하지않는다.

 

잠시 검색해보니 상호작용을 하기전까진 소리의 재생을 막는다고한다.

 

터치 또는 클릭 시 소리가 없는 소리파일을 재생하여 몰래 상호작용 시키기

또는 ui적으로 알람켜기 버튼을 만들어 상호작용하기.

 

둘 다 시도해봤는데 되지가않는다.

다른 이슈가 있는걸까?

 

아이패드의 web inspector를 통해 콘솔을 확인했다.

DOMException line:2 column:576920 라고 떠서 가보니 play()를 호출이 제대로 안된듯 하다...

 

 

수많은 테스트끝에 시작점이 상호작용이 아니라면 사파리에선 사운드를 재생시켜주지않는듯하다 결론을 내렸다.

아래 사이트는 그에 대한 대책을 알려준다,.

https://d0gf00t.tistory.com/34

[번역] macOS를 위한 자동 재생 정책 변경사항

 

 

여러가지 경우를 테스트 했다.

 

1. audio.play()를 직접 실행하지않고, onClick 함수에 넣어 click()함수로 이벤트를 호출하는 것

결과 : 사파리는 상호작용을 하기전의 상태에선 절대로 재생되지않는다.

 

대책

알람켜기 버튼을 생성하여 상호작용을 유도한다.

알람은 기본적으로 false여야하며 눌러서 true가 됐을때만 emit 후 audio.play()한다.

 

 

테스트한 경우 - 아이패드 사파리

1. 아이패드를 잠금해제 후 다시 열어서 화면을 본 직 후 O

1-1.

2. 탭을 전환했다가 다시 화면을 본 직 후 X 

2-1. 탭을 전환했다가 다시 화면을 본 직 후 상호작용 한 후 O

3. 백그라운드 앱 목록에서 다시 화면으로 본 직 후 O

4. 홈으로 이동한 뒤 다시 화면으로 이동한 직 후 X

5. 새로고침 직 후 X

5-1. 새로고침 후 상호작용한 후 O

6. 상호작용전 웹 스크롤만 한 후 X

7. 화면 열린채로 화면잠금 후

 

테스트한 경우 - 아이패드 크롬

비교적 되는게많지만 새 세션에서는 상호작용이 꼭 있어야했다.

1. 홈갔다가 돌아온 후 O

2. 백그라운드 리스트 상태 O

3. 사이트 들어가져있고 다른 탭을 보고있을 때 O

4. 다른탭에서 유튜브를 보고있을때는 영상이 멈추고 알람이 재생됨 O

5. 심지어 홈을 보고있어도(백그라운드에서 실행중) O

6. 아예 종료 후 다시 들어가면 X

 

갤럭시 크롬

되는게 많지만 새 세션에서는 상호작용 필요

 

1.마지막으로 켜져있는 화면이 포레이드면 홈에서도 O

2.다른 탭을 켜고있어도 포레이드가 들어가져있으면 홈에서도 O

3.다른 탭을 켜고 서핑을 해도 소리가 O

 

 

꼭 해당 페이지에서 상호작용이 필요했다.

 

-추가

크롬과 사파리에서 소리 테스트를 통해 직접 상호작용과 함께 소리를 재생시키고난 뒤에는

소켓통신으로 인한 알람도 정상적으로 재생됐다.

그러면 상호작용을 통해 mp3파일을 한번 재생시켜야한다...?

우선 autoplay를 true로 두고 다시 테스트해보자