Automatycznie odtwarzaj pliki audio na iPadzie z HTML5

Próbuję uzyskać plik audio do autoodtwarzania w Safari na iPadzie. Jeśli przejdę do strony za pomocą Safari na moim Macu, wszystko w porządku. Na iPadzie nie działa autoodtwarzanie.

AKTUALIZACJA: To jest hack i nie działa już na IOS 4.X i nowszych. Ten działał na IOS 3.2.X.

To nie prawda. Apple nie chce automatycznie odtwarzać wideo i audio na iPadzie ze względu na duży ruch, z którego można korzystać w sieciach komórkowych. Nie użyłbym autoodtwarzania w przypadku treści online. W przypadku witryn offline HTML jest to świetna funkcja i do tego właśnie jej używałem.

Oto rozwiązanie „fałszywego kliknięcia javascript”: http://www.roblaplaca.com/examples/html5AutoPlay/

Skopiuj i wklej kod ze strony:

<script type="text/javascript"> 
        function fakeClick(fn) {
            var $a = $('<a href="#" id="fakeClick"></a>');
                $a.bind("click", function(e) {
                    e.preventDefault();
                    fn();
                });

            $("body").append($a);

            var evt, 
                el = $("#fakeClick").get(0);

            if (document.createEvent) {
                evt = document.createEvent("MouseEvents");
                if (evt.initMouseEvent) {
                    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    el.dispatchEvent(evt);
                }
            }

            $(el).remove();
        }

        $(function() {
            var video = $("#someVideo").get(0);

            fakeClick(function() {
                video.play();
            });
        });

        </script> 

To nie jest moje źródło. Znalazłem to jakiś czas temu i przetestowałem kod na iPadzie i iPhonie z IOS 3.2.X.

Chciałbym również podkreślić, że powodem, dla którego nie możesz tego zrobić, jest decyzja biznesowa podjęta przez Apple, a nie decyzja techniczna. To znaczy, nie było racjonalnego technicznego uzasadnienia dla Apple, aby wyłączyć dźwięk z aplikacji internetowych na iPodzie Touch. To jest tylko urządzenie Wi-Fi, a nie telefon, który może wiązać się z wysokimi opłatami za przepustowość, więc ten argument ma zerową wartość dla tego urządzenia. Mogą powiedzieć, że pomagają w zarządzaniu siecią Wi-Fi, ale wszelkie problemy z przepustowością w mojej sieci Wi-Fi są moim problemem, a nie Apple.

Ponadto, jeśli naprawdę zależy im na zapobieganiu niechcianemu, nadmiernemu zużyciu przepustowości, zapewnią ustawienie umożliwiające użytkownikom włączenie dźwięków aplikacji internetowych. Zrobiliby także coś, co ograniczyłoby witrynom internetowym wykorzystanie takiej samej przepustowości w inny sposób. Ale nie ma takich ograniczeń. Witryna internetowa może wielokrotnie pobierać ogromne pliki w tle, a Apple może się tym mniej przejmować. I wreszcie, uważam, że dźwięki i tak można pobrać, więc PASMO NIE JEST RZECZYWISTE ZAPISANE! Apple po prostu nie pozwala im grać automatycznie bez interakcji użytkownika, przez co nie nadają się do gier, co jest oczywiście ich prawdziwym celem.

Apple zablokował dźwięk, ponieważ zaczęli zauważać, że aplikacje HTML5 mogą być tak samo wydajne jak aplikacje natywne, jeśli nie bardziej. Jeśli chcesz mieć dźwięk w aplikacjach internetowych, musisz lobbować Apple, aby przestał być antykonkurencyjny, jak Microsoft. Nie ma problemu technicznego, który można tutaj naprawić.

Apple irytująco odrzuca wiele standardów internetowych HTML5 na swoich urządzeniach z systemem iOS z różnych powodów biznesowych. Ostatecznie nie można wstępnie ładować ani automatycznie odtwarzać plików dźwiękowych przed zdarzeniem dotykowym, odtwarza tylko jeden dźwięk na raz i nie obsługuje formatu Ogg / Vorbis. Jednak znalazłem jedno fajne obejście, które pozwoli ci mieć trochę większą kontrolę nad dźwiękiem.

<audio id="soundHandle" style="display:none;"></audio>

<script type="text/javascript">

var soundHandle = document.getElementById('soundHandle');

$(document).ready(function() {
    addEventListener('touchstart', function (e) {
        soundHandle.src = 'audio.mp3';
        soundHandle.loop = true;
        soundHandle.play();
        soundHandle.pause();
    });
});

</script>

Zasadniczo rozpoczynasz odtwarzanie pliku audio przy pierwszym zdarzeniu dotykowym, a następnie natychmiast go wstrzymujesz. Teraz możesz używać poleceń soundHandle.play () i soundHandle.pause () w całym Javascript i sterować dźwiękiem bez zdarzeń dotykowych. Jeśli potrafisz idealnie zgrać czas, po prostu włącz pauzę zaraz po zakończeniu dźwięku. Następnie następnym razem, gdy odtworzysz go ponownie, zapętli się z powrotem do początku. To nie rozwiąże całego bałaganu, który zrobił tutaj Apple, ale to jedno rozwiązanie.

Od wersji iOS 4.2.1 ani fałszywe kliknięcie, ani sztuczka .load () nie działają w celu automatycznego odtwarzania dźwięku na dowolnym urządzeniu z systemem iOS. Jedyną opcją, jaką znam, jest wykonanie przez użytkownika akcji kliknięcia i rozpoczęcie odtwarzania w programie obsługi zdarzenia kliknięcia bez zawijania wywołania .play () w cokolwiek asynchronicznego (ajax, setTimeout itp.).

Niech ktoś mi powie, jeśli się mylę. Miałem działające luki zarówno dla iPada, jak i iPhone'a przed najnowszą aktualizacją i wszystkie wyglądają, jakby zostały zamknięte.

Potwierdzam, że dźwięk nie działa zgodnie z opisem (przynajmniej na iPadzie z systemem 4.3.5). Specyficznym problemem jest to, że dźwięk nie ładuje się w metodzie asynchronicznej (ajax, zdarzenie licznika czasu itp.), Ale będzie odtwarzany, jeśli został wstępnie załadowany. Problem polega na tym, że obciążenie musi być na zdarzeniu wyzwalanym przez użytkownika. Więc jeśli możesz mieć przycisk dla użytkownika do zainicjowania gry, możesz zrobić coś takiego:

function initSounds() {
    window.sounds = new Object();
    var sound = new Audio('assets/sounds/clap.mp3');
    sound.load();
    window.sounds['clap.mp3'] = sound;
}

Następnie, aby go odtworzyć, np. W żądaniu Ajax, możesz to zrobić

function doSomething() {
    $.post('testReply.php',function(data){
        window.sounds['clap.mp3'].play();
    }); 
}

Nie jest to najlepsze rozwiązanie, ale może pomóc, zwłaszcza wiedząc, że winowajcą jest funkcja ładowania w zdarzeniu niewywołanym przez użytkownika.

Edycja: znalazłem wyjaśnienie Apple i dotyczy iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Spróbuj wywołać metodę .load () przed metodą .play () w tagu audio lub wideo ... który będzie odpowiednio HTMLAudioElement lub HTMLVideoElement. To był jedyny sposób, w jaki działałoby to dla mnie na iPadzie!

Autoodtwarzanie nie działa na iPadzie ani iPhonie w przypadku tagów wideo ani audio. Jest to ograniczenie wprowadzone przez firmę Apple w celu oszczędzania przepustowości użytkowników.

Wydaje mi się, że odpowiedź na to pytanie jest (przynajmniej teraz) jasno udokumentowana w dokumentach Safari HTML5 :

Kontrola użytkownika nad pobieraniem przez sieci komórkowe

W Safari na iOS (dla wszystkich urządzeń, w tym iPada), gdzie użytkownik może być w sieci komórkowej i pobierać opłatę za jednostkę danych, wstępne ładowanie i autoodtwarzanie są wyłączone. Żadne dane nie są ładowane, dopóki użytkownik ich nie zainicjuje. Oznacza to, że metody play () i load () w języku JavaScript są również nieaktywne, dopóki użytkownik nie zainicjuje odtwarzania, chyba że metoda play () lub load () zostanie wywołana przez działanie użytkownika. Innymi słowy, przycisk Odtwórz inicjowany przez użytkownika działa, ale zdarzenie onLoad = "play ()" nie.

To odtwarza film: <input type="button" value="Play" onClick="document.myMovie.play()">

To nic nie robi na iOS: <body onLoad="document.myMovie.play()">

Zastanawiałem się nad tym podczas tworzenia szybkiej prototypowej aplikacji internetowej pod iOS4.2 (wersja deweloperska). Rozwiązanie jest właściwie dość proste. Zwróć uwagę, że nie możesz już mieć tagu na swojej stronie HTML, w rzeczywistości musisz wstawić tag do dokumentu dynamicznie (zwróć uwagę, że w tym przykładzie zastosowano Prototype 1.7 dla dodatkowej złośliwości Javascript):

this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""});
document.body.appendChild(this.soundFile);
this.soundFile.load();
this.soundFile.play();

Ponieważ nie ustawiłeś kontrolera, nie powinno być potrzeby robienia niczego skomplikowanego w CSS, aby go ukryć / ustawić poza ekranem.

To wydaje się działać idealnie.

Firma Apple nie obsługuje w pełni standardu, ale istnieje obejście tego problemu. Ich uzasadnieniem jest przeciążenie sieci komórkowej, być może dlatego, że wylądujesz na stronach, które odtwarzają losowy dźwięk. To zachowanie nie zmienia się, gdy urządzenie łączy się z Wi-Fi, być może dla spójności. Nawiasem mówiąc, te strony i tak to zwykle zły pomysł. Nie powinieneś umieszczać ścieżki dźwiękowej na każdej stronie internetowej. Po prostu źle. :)

Dźwięk html5 będzie odtwarzany, jeśli zostanie uruchomiony w wyniku działania użytkownika. Ładowanie strony się nie liczy. Musisz więc przebudować swoją aplikację internetową, aby była aplikacją typu „wszystko na jednej stronie”. Zamiast łącza otwierającego stronę, która odtwarza dźwięk, potrzebujesz tego łącza, aby odtworzyć go na bieżącej stronie, bez zmiany strony. Ta reguła „interakcji użytkownika” dotyczy metod HTML5, które można wywołać w elemencie audio lub wideo. Wywołania powracają bez żadnego efektu, jeśli są uruchamiane automatycznie podczas ładowania strony, ale działają, gdy są wywoływane z programów obsługi zdarzeń.

Moje rozwiązanie jest wyzwalane przez prawdziwe zdarzenie dotykowe w poprzednim menu. Oczywiście nie zmuszają cię do korzystania z określonego interfejsu gracza. Dla moich celów to działa dobrze. Jeśli nie masz istniejącego interfejsu do użycia, afaik, masz błąd. Może mógłbyś wypróbować zdarzenia tilt lub coś ...

Jeśli utworzysz element Audio za pomocą:

var a = new Audio("my_audio_file.wav");

I dodaj suspendodbiornik wydarzeń poprzez:

a.addEventListener("suspend", function () {console.log('suspended')}, false);

Następnie załaduj plik do mobilnej przeglądarki Safari (iPad lub iPhone), zobaczysz „zawieszone” logowanie w konsoli programisty. Zgodnie ze specyfikacją HTML5 oznacza to: „Agent użytkownika celowo nie pobiera obecnie danych multimedialnych, ale nie pobiera całego zasobu multimedialnego”.

Wywołanie kolejnej funkcji a.load (), sprawdzenie zdarzenia „canplay”, a następnie użycie a.play () wydaje się odpowiednią metodą automatycznego wyzwalania dźwięku.

Działa z jQuery, przetestowano na iPadzie 5.1.1

$('video').get(0).play();

Musisz dołączyć / usunąć element video ze strony.

Poradziłem sobie z tym, dołączając procedurę obsługi zdarzeń dla wszystkich zdarzeń, dla których możesz wyzwalać dźwięk do elementu body, który uruchamia wszystkie elementy audio html z autoodtwarzaniem do jednorazowego odtworzenia.

var mobile = /iPad|iPhone|iPod|android/.test(navigator.userAgent) && !window.MSStream;
if (mobile) {
    $('body').on('touchstart click doubleclick keydown', function() {
        $("audio[autoplay='autoplay']").each(
            function(){
                this.play();
                this.removeAttribute('autoplay');
            });
    });
}

To wydaje się działać:

<html>
<title>
iPad Sound Test  - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript"> 
    window.onload = function() {
        var audioPlayer = document.getElementById("audio");
        audioPlayer.load();
        audioPlayer.play();
    };
    </script> 

</body>
</html>

Zobacz to w akcji tutaj: http://www.johncoles.co.uk/ipad/test/1.html (zarchiwizowane)

Od iOS 4.2 to już nie działa. Przepraszam.