Autoplay-Audiodateien auf einem iPad mit HTML5

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.

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.

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.

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.

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.

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

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!

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.

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

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.

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.

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

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.

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.

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

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.