[iOS] 아이폰,아이패드에서 간헐적으로 audio 안나올 때

왜

웹은

나를힘

들게하는

가

 

1. 사용자 동작 있나 확인

보통 이 케이스는 pc에서도 발생하는 문제인데, 브라우저가 거진 자동재생은 막기때문에 뭔가 click버튼을 만들거나 해서 play() 해줘야함.

button.addEventListener("click", function() {
  audio.play();
}

 

 

2. load() 했나 확인

가끔 모바일에서는 load()먼저 해줘야한다고 들은게 있음.

button.addEventListener("click", function() {
  audio.load();
  audio.play();
}

 

 

3. setTimeout안에 있지 않나 확인

나는 이 경우였는데 일단 미리 url까지 넣어서 선언된 new Audio가 제일 바깥에 있었고, play()는 click함수 안에 있는 setTimeout에 있었는데, 이 경우 특히 iOS에서 인식을 못한다고 함. 그래서 그 안에서 new Audio로 객체를 불러와서 실행함.

button.addEventListener("click", function() {
  const audio = new Audio("song.mp3");
  
  setTimeout(() => {
    audio.play();
  }, 1000)
}

 

 

 

+ 또 다른 방법

const audio1 = new Audio("song1.mp3");
const audio2 = new Audio("song2.mp3");
const audio3 = new Audio("song3.mp3");

button.addEventListener("click", function() {
  // 이걸 new Audio 객체 개수만큼 여러번 해줌
  audio1.load();
  audio1.muted = true;
  audio1.play();
  audio1.pause();
  audio1.muted = false;
  audio1.currentTime = 0;
}

일부러 한번 재생 해주는 방식인데(어차피 소리는 muted해서 괜춘), 나중에 진짜 재생하면 그때는 제대로 들림.