Mobile Safari에서 HTML5 오디오 요소를 "자동 재생"하는 방법은 무엇입니까?

Question

나는 차량 대시 디스플레이 유닛 앱을 브라우저에 이식하고있다. 큰 목표는 모바일 사파리에서 완전히 실행되도록하는 것입니다.

jQuery.load를 많이 사용하는 HTML5/JS 뮤직 앱으로 페이지 조각을로드하여 다른 "화면"사이를 이동합니다.

사용자가 재생할 트랙을 선택하면 "현재 재생 중"화면으로 이동하여 트랙 재생을 시작해야하는 문제가 있습니다. 이 화면에 도달 했는데도 트랙이 재생되지 않고 사용자는 오디오 재생을 시작하기 위해이 화면에서 재생을 명시 적으로 클릭해야합니다. 처음으로 이런 일이 발생하면 자동 재생은 앱 기간 동안 작동합니다.

모바일 사파리는 오디오가 자동 재생되지 않도록 의도적으로 차단기를 설치하므로 사용자 입력에 직접 응답하지 않는 한 웹 앱에서 데이터를 소비하지 않도록합니다.

사실, 내 오디오 재생은 사용자 입력에 직접 반응합니다 ... 일종의. 그러나 내 재생이 실제로 시작되기 전에 여러 가지 일이 발생해야하며, 재생중인 페이지 (재생할 트랙의 URL을 가져 오기 API 호출, 사용자가 트랙 재생, 트랙 메타 데이터 가져 오기, yatta yatta yatta) .

이 문제를 해결하려면 시작시 오디오 요소에 무음 .1s mp3 파일을 미리로드해야합니다. 그런 다음 지금 재생중인 화면으로 전환 할 클릭 이벤트에 직접 응답하여 오디오 요소에서 .play()를 호출합니다.

사용자 입력에 대한 직접 응답으로 .play를 호출하면 지금 재생중인 페이지 내에서 .play()를 호출하면 이전에 관찰 한 동작이기 때문에 작동한다고 가정했습니다.

단지 차이가없는 것 같습니다.

지금 재생중인 화면을로드 한 후 오디오 재생을 시작하기 위해 내 흐름을 조정할 수있는 방법에 대한 아이디어가 있습니까?

편집 : 트랙 선택 사용자에 대한 응답으로

Vehicle.audio = { 
     init: function() { 
      audioElement.setAttribute("src", "/audioinit.mp3"); 
      audioElement.play(); 
     }, 

     play: function (source) { 
      log("VEHICLE: playing audio from source " + source); 

      Vehicle.audio.stop(); 
      audioElement.setAttribute("src", source); 
      audioElement.play(); 
     }, 

아래 추가 된 몇 가지 코드 조각 : 지금 재생 페이지에서 다음

$(document).on("click", "a.play-track", function() { 
    Vehicle.audio.init(); 
    /* my wrapper function for jQuery.load() */ 
    replace_wrap("nowplaying.html"); 
}); 

은 Vehicle.audio.play()가 호출 될 .

Answer 1

AFAIK iOS에서 의도적으로 배치 한 제한 사항입니다. 스크립트가 재생을 시작하기 전에 사용자는 장치에 간섭해야합니다 (터치/클릭 이벤트).

Answer 2

내 오디오 재생은 사용자 입력에 직접 반응합니다 ... 일종의입니다. 그러나 내 재생이 실제로 시작되기 전에 여러 가지 일이 발생해야하며, 재생중인 페이지 (재생할 트랙의 URL을 가져 오기 API 호출, 사용자가 트랙 재생, 트랙 메타 데이터 가져 오기, yatta yatta yatta) .아이폰 OS 사용자가 어디 건 드리면 즉시

$(document).one("touchstart", function() { 
    Vehicle.audio.init() 
}) 

이 방법 : 다음 동기 오디오 요소에 .play()를 호출합니다 전체 "지금 재생 페이지"에 "touchstart"이벤트 리스너를 추가

시도 지금 재생중인 페이지에서 오디오가 로딩/재생을 시작해야합니다.