Automatycznie odtwarzaj pliki audio na iPadzie z HTML5


88

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.


1
To nie jest odpowiedź, ale tylko obserwacja. Kiedy podłączyłem WireShark do mojego połączenia z iPadem, zauważyłem, że nie odtwarzał się automatycznie, ale i tak jest pobierany plik Wave. Pierwsze pobieranie HTTP prosi tylko o pierwsze 2 bajty pliku, ale następnie iPad prosi o pozostałą część pliku Wave w kilku kolejnych żądaniach Get. Jeszcze dziwniejsze jest to, że po kliknięciu przycisku „Odtwórz” komponentu Audio iPad ponownie wczytuje plik Wave.
Javamann

Odpowiedzi:


34

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.


1
Oto kolejne obejście: codeblog.co/getting-autoplay-working-on-ios Właśnie sprawdziłem, że działa to na iPadzie z iOS 3.2.
Ciryon,

49
Nie trać czasu na to, ponieważ nie działa już z iOS 4+
jcampbell1

106

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ć.


Czy to nie to samo dla Androida?
Rune Jeppesen

1
@Rune Jeppesen Nie. Mam aplikację PhoneGap / Cordova, która ma odtwarzacz audio i działa doskonale na Androidzie. Jedynym powodem, dla którego dotarłem do tego tematu w StackOverflow, są ograniczenia iOS dotyczące odtwarzania dźwięku.
Ulysses Alves

Teraz to Chrome na Androida i na komputery ma zasady podobne do iOS
Ore4444

29

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.


Jeszcze tego nie próbowałem, ale jeśli faktycznie działa, to jest genialne.
courtimas

3
Zaskoczony, że więcej osób nie jest tym zainteresowanych.
aoeu256

Czy to nadal działa? Wydaje mi się, że jestem w stanie sprawić, by to działało ...
zillaofthegods

@MastaBaba To powinna być zaakceptowana odpowiedź. Czemu? Nie odpowiada na pytanie, ponieważ o to prosi OP: próbuję uzyskać plik audio do autoodtwarzania w Safari, a ta odpowiedź nie pomaga w autoodtwarzaniu.
debiut

23

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.


5
Mogę sprawdzić, czy kod działający do autoodtwarzania dźwięku bez interwencji użytkownika na iPadzie i iPodzie touch w wersji starszej niż 4.2.1. Właśnie zaktualizowałem iPada do wersji 4.2.1 (w trakcie testowania mojego modułu wstępnego ładowania dźwięku) i patrzyłem z przerażeniem, jak po prostu przestał działać.
Jason Kester

2
On <video>z 4.2.1, mam dowód, że tak długo, jak .load()wtedy .play()przyjść w synchronicznej obsługi click / kranu, to będzie działać. W przeciwnym razie nie powiedzie się.
N Rohler

1
Wygląda na to, że programowa kontrola elementów multimedialnych (audio i wideo) jest włączona po interakcji użytkownika z elementem multimedialnym . To znaczy, jeśli masz element audio A i B i zaczynasz odtwarzanie A za pomocą kodu w zakresie obsługi zdarzenia kliknięcia (lub dotknięcia), to działa. Ale to nie znaczy, że możesz później rozpocząć odtwarzanie B poza zakresem obsługi zdarzenia kliknięcia. Traktuj elementy multimedialne w systemie iOS jako pojedyncze i zamieniaj źródła w jednym wystąpieniu, zamiast mnożyć wystąpienia przez źródła.
Tim Erickson

10

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


To jest odpowiedź Gold. Możesz wypełnić obiekt dźwiękowy wieloma dźwiękami. A po wywołaniu ajax'a w przypadku sukcesu / błędu zagraj, co chcesz. U mnie działa na każdym urządzeniu! Wielkie tnx !!!
Andris,

7

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!


Zgodnie z dokumentami programistów Apple, ani .load, ani .play nie będą działać, chyba że zostaną uruchomione przez użytkownika.
Jeffrey Van Alstine

5

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.


5

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()">


2

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.


2

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ń.


1

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ś ...


1

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.


Próbowałem tego, ale to nie działa. Jakakolwiek aktualizacja? sandbox.coolaj86.info/html5-audio-tag-ios4.html
coolaj86

0

Działa z jQuery, przetestowano na iPadzie 5.1.1

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

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


3
Nie działa na iPadzie 1 iOS 5.1.1 ... chociaż działa na iPodzie 6.0 i iPhonie
morgan_il

0

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');
            });
    });
}

0

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.


@ NisseEngström Wydaje mi się, że plik mp3 również nie jest archiwizowany, więc edycja linku do archiwum jest dość dyskusyjna.
Goodbye StackExchange

@FrankerZ: Jest link do mp3? Tęsknie za tym. Dzięki.
Nisse Engström
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.