모바일 사파리 : 오디오 + 캐시 매니페스트

Question

몇 가지 버튼을 클릭 할 때 아주 짧은 사운드 비트를 재생하는 작은 웹 앱이 있습니다. iOS (iPad)의 모바일 Safari를 명시 적으로 타겟팅합니다.

모바일 사파리에서 HTML5 오디오의 몇 가지 "단점"에 대해 읽은 후 몇 가지 "해킹"과 트릭을 시도하면서 사파리가 더 나은 단어) 깨짐 :

버튼 A를 클릭하면 사운드 A를 재생할 수 있습니다. (시작하는 데 오랜 시간이 걸립니다. 다시 생각해 보시겠습니까?) 그 후, 버튼 B가 즉시 소리 A를 다시 재생합니다. 버튼 C와 동일합니다. 경우에 따라 다른 사운드, 때로는 올바른 사운드를 재생합니다. 그러나 대부분 A를 사용합니다. 사용 된 형식은 .aiff였습니다. 이제 .m4a입니다.

자신을 몇 가지 작은 버전을 작성 후, 나는 충분히 재미있게

는, 자신의 데모는 거의을하는 게임을 포함 .. 사운드로드/재생/등을 처리 할 수 ​​ Buzz 라이브러리와 함께 가기로 결정 정확히 이 필요하고이 같은 오류 동작을 유발합니다. 어떤 탭에서든 모바일 사파리의 오디오 플레이어가 버즈 데모 게임 (!)에서 특정 사운드를 재생하는 상황에 이르렀습니다.

캐시 매니페스트가 사과 미리로드 제한을 극복하고 오프라인 모드에서 버튼을 두드린 직후에 사운드를 재생하도록 할 수 있기를 바랬습니다. 그러나 전체 앱이 캐시 된 것을 확인한 후에는 오프라인 모드에서 소리를 재생하거나들을 수 없습니다.

어떻게 든 이런 식으로 일하는 사람이 있습니까? (- 애플이 어떤 일을 처리하는 방법을 보이는 데, 나는 ...하지만 많은 응답을 기대하지 않습니다 ')

---

업데이트 1 :

이 답변의 예는 같은 효과가 발생합니다 How to synthesize audio using HTML5/Javascript on iPad

---

업데이트 2 :

iOS (및 Safari)를 업데이트하면 오디오 버그가 해결되는 것 같습니다. 캐시 매니페스트는 오디오 파일에 영향을 미치지 않습니다. 이 파일들은 전혀 사용할 수 없습니다.

캐시 매니페스트를 제거한 후에도 앱이 정상적으로 작동하지만 '홈 화면'에 추가하고 다시로드하면 오디오가 재생되지 않습니다.

Answer 1

모든 html5 미디어를 완벽하게 작동시키는 마법의 공식이 있다고 말할 수 있으면 좋겠지 만, 그렇지 않습니다. HTML5 오디오/비디오에 대한 모바일 지원은 현재 매우 나쁩니다. 데스크톱 사전보다 훨씬 뒤쳐져있다. 설상가상으로, 각기 다른 플랫폼이 다르게 처리하며 대부분은 세미 버전으로 만 지원합니다.

그러나 모바일 사파리에서 미디어 파일을 올바르게 작동시키는 데 사용할 수있는 몇 가지 트릭이 있습니다. 그들을 설명하기 위해, 당신은 그 단점 중 일부를 이해해야합니다.

---

1) 여러 오디오/비디오 파일

를로드 할 수 없습니다 자사의 브라우저가 한 번에 하나 개의 파일을로드 할 것입니다 내 경험이었다. 한 파일을 재생하면 다른 파일로 이동 한 다음 다시 재생하면 다시 불러올 수 있습니다. 그리고 직접 시도하지는 않았지만 캐시 매니페스트가 여기에 도움이된다고는 생각하지 않습니다.

내가해야 할 일은 모든 오디오 파일을 하나의 큰 오디오 파일로 결합하는 것입니다. 그런 다음 어떤 오디오 트랙이 요청되었는지에 따라 적절한 시작 위치로 재생 위치를 이동하고 해당 트랙을 재생합니다. 그런 다음 setInterval을 사용하여 몇 밀리 초마다 재생을 검사하여 현재 재생 위치가 트랙 끝까지 도달했는지 확인합니다. 일단 그랬 으면, 나는 그것을 멈췄다. Pluis, 나는 각 트랙 사이에 몇 초 (2-3)를주었습니다. 전화기의 CPU가 많은 부하를 받고 피드를 조금 늦게 체크 한 경우를 대비해서.

2) 할 수 있습니다 애플이 자신의 HTML5 미디어 태그 기술에 내장하지 자동 재생 오디오/비디오 파일

이 트랙은 부하와 사용자의 클릭 이벤트에 대한 응답으로 재생 것이라는 제한. 그렇게하면 개발자는 웹 사이트를 방문 할 때 성가신 트랙을 자동 재생할 수 없습니다.

오디오/비디오 태그를 사용할 때 리치 미디어 광고를 만들려고했습니다. 그래서 배너를 클릭하고 광고를 확장 할 때 내 오디오/트랙로드를 배너 클릭 이벤트에 연결했습니다.

작은 라이트 박스 팝업이 나오면 사용자에게 사운드를 켜고 끌 것인지 묻는 것이 좋습니다. 사용자가 사운드를 켜거나 끄더라도 해당 팝업 함수의 클릭 이벤트에로드 함수를 첨부 할 수 있습니다.

개인적으로 load() 함수를 사용하여 많은 행운이 없었습니다. 그 함수를 실행하여 오디오를로드 한 다음 재생을 클릭하면 다시로드됩니다. 나는 항상 그 일을 올바르게하지 않았을 수 있었을 것이므로, 저를 틀리게 증명하고 자유롭게 일하게하십시오. 내가 트랙을 재생할 것이라고 말하면로드가 시작될 것이고, 그런 다음 setInterval을 사용하여 현재 재생 시간이 몇 밀리 초로 증가했는지 확인합니다. 일단 내가 트랙을 연주하기 시작했다면, 즉시 멈추게 할 것입니다.

3) 오디오/비디오 태그는 아이폰 OS 4.0에서 지원

이상이 문제를 얻는 데 아무런 트릭도 없다한다. 그것의 바로 사실.

http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements

행운을 빕니다 :

---

는 여기에 내가 오디오/비디오 태그를 개발 할 때 때 도움이 몇 가지 사이트입니다!