Autoplay-Audiodateien auf einem iPad mit HTML5

88

Ich versuche, eine Audiodatei in Safari auf einem iPad automatisch abzuspielen. Wenn ich mit Safari auf meinem Mac zur Seite gehe, ist das in Ordnung. Auf dem iPad funktioniert die automatische Wiedergabe nicht.

Meilen meow
quelle
1
Dies ist keine Antwort, sondern nur eine Beobachtung. Als ich WireShark auf meine Verbindung zum iPad stellte, bemerkte ich, dass es nicht automatisch wiedergegeben wird, aber trotzdem die Wave-Datei heruntergeladen wird. Der erste HTTP-Abruf fragt nur nach den ersten 2 Bytes der Datei, aber das iPad fragt in einigen weiteren Get-Anforderungen nach dem Rest der Wave-Datei. Was noch seltsamer ist, wenn Sie auf die Schaltfläche "Wiedergabe" der Audiokomponente klicken, lädt das iPad die Wave-Datei erneut.
Javamann

Antworten:

34

UPDATE: Dies ist ein Hack und funktioniert unter IOS 4.X und höher nicht mehr. Dieser arbeitete unter IOS 3.2.X.

Es ist nicht wahr. Apple möchte Video und Audio auf dem iPad nicht automatisch wiedergeben, da der Datenverkehr in Mobilfunknetzen sehr hoch ist. Ich würde Autoplay nicht für Online-Inhalte verwenden. Für Offline-HTML-Sites ist es eine großartige Funktion, für die ich sie verwendet habe.

Hier ist eine "Javascript Fake Click" -Lösung: http://www.roblaplaca.com/examples/html5AutoPlay/

Kopieren und Einfügen von Code von der Website:

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

Dies ist nicht meine Quelle. Ich habe dies vor einiger Zeit gefunden und den Code auf einem IPad und IPhone mit IOS 3.2.X getestet.

Fa11enAngel
quelle
1
Hier ist eine weitere Problemumgehung : codeblog.co/getting-autoplay-working-on-ios Ich habe gerade überprüft, ob dies auf dem iPad mit iOS 3.2 funktioniert.
Ciryon
49
Verschwenden Sie nicht Ihre Zeit damit, da es mit iOS 4+ nicht mehr funktioniert
jcampbell1
105

Ich möchte auch betonen, dass der Grund, warum Sie dies nicht tun können, eine Geschäftsentscheidung von Apple ist, keine technische Entscheidung. Es gab keine vernünftige technische Rechtfertigung für Apple, den Sound von Web-Apps auf dem iPod Touch zu deaktivieren. Dies ist nur ein WiFi-Gerät, kein Telefon, für das möglicherweise teure Bandbreitengebühren anfallen. Daher hat dieses Argument für dieses Gerät keinen Wert. Sie sagen vielleicht, dass sie bei der Verwaltung des WiFi-Netzwerks helfen, aber alle Probleme mit der Bandbreite in meinem WiFi-Netzwerk sind mein Anliegen, nicht das von Apple.

Wenn es ihnen wirklich wichtig war, unerwünschten, übermäßigen Bandbreitenverbrauch zu verhindern, würden sie eine Einstellung bereitstellen, mit der Benutzer sich für Web-Apps-Sounds anmelden können. Außerdem würden sie etwas tun, um zu verhindern, dass Websites auf andere Weise äquivalente Bandbreite verbrauchen. Es gibt jedoch keine derartigen Einschränkungen. Eine Website kann immer wieder große Dateien im Hintergrund herunterladen, und Apple könnte sich weniger darum kümmern. Und schließlich glaube ich, dass die Sounds trotzdem heruntergeladen werden können, sodass KEINE BANDBREITE WIRKLICH GESPEICHERT WIRD! Apple erlaubt ihnen einfach nicht, automatisch ohne Benutzerinteraktion zu spielen, was sie für Spiele unbrauchbar macht, was natürlich ihre eigentliche Absicht ist.

Apple blockierte den Sound, weil sie bemerkten, dass HTML5-Apps genauso leistungsfähig sein können wie native Apps, wenn nicht sogar mehr. Wenn Sie Sound in Web Apps wünschen, müssen Sie sich bei Apple dafür einsetzen, dass Sie nicht mehr wettbewerbswidrig sind wie Microsoft. Es gibt kein technisches Problem, das hier behoben werden kann.

Rick M.
quelle
Ist es nicht dasselbe für Android?
Rune Jeppesen
1
@ Rune Jeppesen Nein. Ich habe eine PhoneGap / Cordova-App mit einem Audio-Player, die perfekt auf Android funktioniert. Der einzige Grund, warum ich dieses Thema hier in StackOverflow erreicht habe, sind die Einschränkungen von iOS hinsichtlich der Audiowiedergabe.
Ulysses Alves
Jetzt hat Chrome für Android und für Desktop eine ähnliche Richtlinie wie iOS
Ore4444
28

Apple lehnt viele HTML5-Webstandards auf seinen iOS-Geräten aus verschiedenen geschäftlichen Gründen ärgerlich ab. Letztendlich können Sie Sounddateien vor einem Touch-Ereignis nicht vorladen oder automatisch abspielen, es wird jeweils nur ein Sound abgespielt und Ogg / Vorbis wird nicht unterstützt. Ich habe jedoch eine raffinierte Problemumgehung gefunden, mit der Sie etwas mehr Kontrolle über das Audio haben.

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

Grundsätzlich beginnen Sie mit der Wiedergabe der Audiodatei beim ersten Berührungsereignis und halten sie dann sofort an. Jetzt können Sie die Befehle soundHandle.play () und soundHandle.pause () in Ihrem gesamten Javascript verwenden und das Audio ohne Berührungsereignisse steuern. Wenn Sie die Zeit perfekt einstellen können, lassen Sie die Pause direkt nach dem Ende des Sounds einwirken. Wenn Sie es das nächste Mal erneut spielen, kehrt es zum Anfang zurück. Dies wird nicht das ganze Chaos lösen, das Apple hier angerichtet hat, aber es ist eine Lösung.

kaleazy
quelle
Ich habe das noch nicht ausprobiert, aber wenn es tatsächlich funktioniert, ist das brillant.
Courtsimas
3
Überrascht, dass mehr Leute nicht daran interessiert sind.
aoeu256
Funktioniert das noch Ich kann scheinen, in der Lage zu sein, dies zum Funktionieren zu bringen ...
zillaofthegods
@MastaBaba Dies sollte die akzeptierte Antwort sein. Warum? Die Frage wird nicht beantwortet, da OP dies verlangt: Ich versuche, eine Audiodatei in Safari automatisch abzuspielen, und diese Antwort hilft bei der automatischen Wiedergabe nicht.
Debüt
23

Ab iOS 4.2.1 funktionieren weder der falsche Klick noch der .load () - Trick, um Audio auf einem iOS-Gerät automatisch abzuspielen. Die einzige mir bekannte Option besteht darin, dass der Benutzer tatsächlich eine Klickaktion ausführt und die Wiedergabe im Klickereignishandler startet, ohne den Aufruf .play () in etwas Asynchrones (Ajax, SetTimeout usw.) einzuschließen.

Jemand sagt mir bitte, wenn ich mich irre. Ich hatte vor dem letzten Update funktionierende Lücken für iPad und iPhone, und alle sehen aus, als wären sie geschlossen worden.

David Gouldin
quelle
5
Ich kann überprüfen, ob der Code für die automatische Wiedergabe von Audio ohne Benutzereingriff sowohl auf dem iPad als auch auf dem iPod touch vor 4.2.1 funktioniert hat. Ich habe heute gerade mein iPad auf 4.2.1 aktualisiert (während ich meinen Audio-Preloader teste) und mit Entsetzen beobachtet, wie es einfach nicht mehr funktioniert.
Jason Kester
2
Auf <video>mit 4.2.1, habe ich festgestellt , dass, solange die .load()dann .play()innerhalb eines kommt synchrone Klick- / Tap - Handler, wird es funktionieren. Andernfalls schlägt es fehl.
N Rohler
1
Es scheint, dass die programmatische Steuerung von Medienelementen (Audio und Video) nach Benutzerinteraktion pro Medienelement aktiviert ist . Das heißt, wenn Sie über die Audioelemente A und B verfügen und mit der Wiedergabe von A über Code im Rahmen eines Click (oder Touch) -Ereignishandlers beginnen, funktioniert dies. Dies bedeutet jedoch nicht , dass Sie später mit der Wiedergabe von B außerhalb des Bereichs eines Klickereignishandlers beginnen können. Behandeln Sie Medienelemente in iOS als Singleton und tauschen Sie Quellen auf einer Instanz aus, anstatt Instanzen mit Quellen zu multiplizieren.
Tim Erickson
9

Ich bestätige, dass das Audio nicht wie beschrieben funktioniert (zumindest auf dem iPad mit 4.3.5). Das spezielle Problem ist, dass das Audio nicht in einer asynchronen Methode (Ajax, Timer-Ereignis usw.) geladen wird, sondern abgespielt wird, wenn es vorinstalliert wurde. Das Problem ist, dass die Last auf einem vom Benutzer ausgelösten Ereignis liegen muss. Wenn Sie also eine Schaltfläche haben, mit der der Benutzer das Spielen starten kann, können Sie Folgendes tun:

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

Dann können Sie es spielen, z. B. in einer Ajax-Anfrage

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

Nicht die beste Lösung, aber es kann hilfreich sein, insbesondere wenn man weiß, dass der Schuldige die Ladefunktion in einem nicht vom Benutzer ausgelösten Ereignis ist.

Bearbeiten: Ich habe die Erklärung von Apple gefunden und sie betrifft iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Jacob Mouka
quelle
Dies ist Gold Antwort. Sie können das Soundobjekt mit mehreren Sounds füllen. Und nach einem Ajax-Aufruf bei Erfolgs- / Fehlerfällen spielen Sie alles, was Sie wollen. Funktioniert bei mir auf jedem Gerät! Big tnx !!!
Andris
7

Versuchen Sie, die .load () -Methode vor der .play () -Methode für das Audio- oder Video-Tag aufzurufen. Dies ist HTMLAudioElement bzw. HTMLVideoElement. Nur so würde es für mich auf dem iPad funktionieren!

Brian Brown
quelle
Laut den Apple-Entwicklerdokumenten funktionieren weder .load noch .play, außer wenn sie von einem Benutzer ausgelöst werden.
Jeffrey Van Alstine
5

Autoplay funktioniert auf dem iPad oder iPhone weder für die Video- noch für die Audio-Tags. Dies ist eine von Apple festgelegte Einschränkung, um die Bandbreite des Benutzers zu sparen.

Andrew
quelle
5

Es scheint mir, dass die Antwort auf diese Frage (zumindest jetzt) ​​in den Safari HTML5-Dokumenten klar dokumentiert ist :

Benutzerkontrolle von Downloads über Mobilfunknetze

In Safari unter iOS (für alle Geräte, einschließlich iPad), bei dem sich der Benutzer möglicherweise in einem Mobilfunknetz befindet und pro Dateneinheit berechnet wird, sind das Vorladen und die automatische Wiedergabe deaktiviert. Es werden keine Daten geladen, bis der Benutzer sie initiiert. Dies bedeutet, dass die JavaScript-Methoden play () und load () ebenfalls inaktiv sind, bis der Benutzer die Wiedergabe startet, es sei denn, die Methode play () oder load () wird durch eine Benutzeraktion ausgelöst. Mit anderen Worten, eine vom Benutzer initiierte Wiedergabetaste funktioniert, ein onLoad = "play ()" - Ereignis jedoch nicht.

Dies spielt den Film: <input type="button" value="Play" onClick="document.myMovie.play()">

Dies macht unter iOS nichts: <body onLoad="document.myMovie.play()">

Adrian
quelle
2

Haben Sie sich darüber Gedanken gemacht, während Sie eine schnelle Prototyp-Web-App unter iOS4.2 (Dev Build) entwickelt haben. Die Lösung ist eigentlich ganz einfach. Beachten Sie, dass Sie das Tag anscheinend nicht bereits in Ihrer HTML-Seite haben können. Sie müssen das Tag tatsächlich dynamisch in das Dokument einfügen (beachten Sie, dass in diesem Beispiel Prototyp 1.7 für zusätzliche Javascript-Snazziness verwendet wird):

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

Da Sie keinen Controller eingestellt haben, sollten Sie mit CSS keine Tricks ausführen müssen, um ihn auszublenden / außerhalb des Bildschirms zu positionieren.

Dies scheint perfekt zu funktionieren.

Jon Jardine
quelle
2

Apple unterstützt den Standard nicht vollständig, es gibt jedoch eine Problemumgehung. Ihre Rechtfertigung ist eine Überlastung des Mobilfunknetzes, möglicherweise weil Sie auf Seiten landen, auf denen zufälliges Audio abgespielt wird. Dieses Verhalten ändert sich nicht, wenn ein Gerät über WLAN geschaltet wird, möglicherweise aus Gründen der Konsistenz. Übrigens sind diese Seiten normalerweise sowieso eine schlechte Idee. Sie sollten nicht versuchen, auf jeder Webseite einen Soundtrack zu platzieren. Das ist einfach falsch. :) :)

HTML5-Audio wird abgespielt, wenn es als Ergebnis einer Benutzeraktion gestartet wird. Das Laden einer Seite zählt nicht. Sie müssen Ihre Web-App also so umstrukturieren, dass sie eine All-in-One-Page-App ist. Anstelle eines Links, der eine Seite öffnet, auf der Audio abgespielt wird, benötigen Sie diesen Link, um sie auf der aktuellen Seite ohne Seitenwechsel abzuspielen. Diese Regel "Benutzerinteraktion" gilt für die HTML5-Methoden, die Sie für ein Audio- oder Videoelement aufrufen können. Die Aufrufe werden ohne Auswirkung zurückgegeben, wenn sie beim Laden der Seite automatisch ausgelöst werden. Sie funktionieren jedoch, wenn sie von Ereignishandlern aufgerufen werden.

bmidgley
quelle
1

Meine Lösung wird durch ein echtes Berührungsereignis in einem vorherigen Menü ausgelöst. Sie zwingen Sie natürlich nicht dazu, eine bestimmte Player-Oberfläche zu verwenden. Für meine Zwecke funktioniert das gut. Wenn Sie keine vorhandene Schnittstelle zur Verfügung haben, sind Sie afaik nervig. Vielleicht könnten Sie Tilt-Events ausprobieren oder so ...

Luke Stanley
quelle
1

Wenn Sie ein Audio-Element erstellen mit:

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

Und fügen Sie einen suspendEreignis-Listener hinzu über:

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

Wenn Sie die Datei dann in Mobile Safari (iPad oder iPhone) laden, wird die angehaltene Datei in der Entwicklerkonsole protokolliert. Gemäß der HTML5-Spezifikation bedeutet dies: "Der Benutzeragent ruft derzeit absichtlich keine Mediendaten ab, hat jedoch nicht die gesamte Medienressource heruntergeladen."

Das Aufrufen eines nachfolgenden a.load (), das Testen auf das "canplay" -Ereignis und das anschließende Verwenden von a.play () scheint eine geeignete Methode zum automatischen Auslösen des Sounds zu sein.

Vince
quelle
Ich habe es versucht, aber es scheint nicht zu funktionieren. Irgendein Update? sandbox.coolaj86.info/html5-audio-tag-ios4.html
coolaj86
0

Funktioniert mit jQuery, getestet auf Ipad v.5.1.1

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

Sie müssen das Videoelement an die Seite anhängen / von dieser entfernen.

Adrian
quelle
3
Funktioniert nicht auf iPad 1 iOS 5.1.1 ... obwohl es auf iPod 6.0 und iPhone
funktioniert
0

Ich habe dies erledigt, indem ich einen Ereignishandler für alle Ereignisse angehängt habe, für die Sie Audio an das body-Element auslösen dürfen, wodurch alle HTML-Audioelemente mit Autoplay ausgelöst werden, die einmal abgespielt werden sollen.

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');
            });
    });
}
Andrew Hancox
quelle
0

Das scheint zu funktionieren:

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

Sehen Sie es hier in Aktion: http://www.johncoles.co.uk/ipad/test/1.html (Archiviert)

Ab iOS 4.2 funktioniert dies nicht mehr. Es tut uns leid.

John Coles
quelle
@ NisseEngström Scheint mir, dass die MP3-Datei nicht auch archiviert ist, daher ist die Bearbeitung des Archivlinks ziemlich umstritten.
Auf Wiedersehen StackExchange
@FrankerZ: Gibt es einen MP3-Link? Das habe ich vermisst. Vielen Dank.
Nisse Engström