Riproduci automaticamente i file audio su un iPad con HTML5

Sto cercando di ottenere un file audio da riprodurre automaticamente in Safari su un iPad. Se vado alla pagina utilizzando Safari sul mio Mac, va bene. Sull'iPad, la riproduzione automatica non funziona.

AGGIORNAMENTO: Questo è un hack e non funziona più su IOS 4.X e versioni successive. Questo ha funzionato su IOS 3.2.X.

Non è vero. Apple non vuole riprodurre automaticamente video e audio su IPad a causa dell'elevata quantità di traffico che puoi utilizzare sulle reti mobili. Non userei la riproduzione automatica per i contenuti online. Per i siti HTML offline è un'ottima funzionalità ed è per questo che l'ho usata.

Ecco una soluzione "javascript fake click": http://www.roblaplaca.com/examples/html5AutoPlay/

Copia e incolla il codice dal sito:

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

Questa non è la mia fonte. L'ho trovato qualche tempo fa e ho testato il codice su un iPad e un iPhone con IOS 3.2.X.

Vorrei anche sottolineare che il motivo per cui non puoi farlo è una decisione aziendale presa da Apple, non una decisione tecnica. Vale a dire, non c'era alcuna giustificazione tecnica razionale per Apple per disabilitare l'audio dalle app Web sull'iPod Touch. Questo è solo un dispositivo WiFi, non un telefono che potrebbe incorrere in costi costosi per la larghezza di banda, quindi tale argomento non ha alcun merito per quel dispositivo. Potrebbero dire che stanno aiutando con la gestione della rete WiFi, ma qualsiasi problema con la larghezza di banda sulla mia rete WiFi è una mia preoccupazione, non di Apple.

Inoltre, se ciò a cui tenevano veramente era impedire un consumo eccessivo di larghezza di banda, avrebbero fornito un'impostazione per consentire agli utenti di attivare i suoni delle app Web. Inoltre, farebbero qualcosa per impedire ai siti web di consumare una larghezza di banda equivalente con altri mezzi. Ma non ci sono tali restrizioni. Un sito web può scaricare file enormi in background più e più volte e ad Apple potrebbe importare di meno. E infine, credo che i suoni possano essere scaricati comunque, quindi NESSUNA LARGHEZZA DI BANDA È EFFETTIVAMENTE SALVATA! Apple semplicemente non consente loro di giocare automaticamente senza l'interazione dell'utente, rendendoli inutilizzabili per i giochi, che ovviamente è il loro vero intento.

Apple ha bloccato il suono perché ha iniziato a notare che le app HTML5 possono essere altrettanto capaci delle app native, se non di più. Se vuoi il suono nelle Web App, devi fare pressione su Apple affinché smetta di essere anticoncorrenziale come Microsoft. Non ci sono problemi tecnici che possono essere risolti qui.

Apple rifiuta fastidiosamente molti standard Web HTML5 sui propri dispositivi iOS, per una serie di motivi aziendali. In definitiva, non è possibile precaricare o riprodurre automaticamente i file audio prima di un evento di tocco, riproduce solo un suono alla volta e non supporta Ogg / Vorbis. Tuttavia, ho trovato un'elegante soluzione alternativa per consentirti di avere un po 'più di controllo sull'audio.

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

Fondamentalmente, inizi a riprodurre il file audio al primo evento di tocco, quindi lo metti in pausa immediatamente. Ora puoi utilizzare i comandi soundHandle.play () e soundHandle.pause () in tutto il tuo Javascript e controllare l'audio senza eventi di tocco. Se riesci a calcolare il tempo perfettamente, fai entrare la pausa subito dopo che il suono è finito. Quindi la prossima volta che lo riproduci di nuovo, tornerà all'inizio. Questo non risolverà tutto il casino che Apple ha fatto qui, ma è una soluzione.

A partire da iOS 4.2.1, né il falso clic né il trucco .load () funzioneranno per riprodurre automaticamente l'audio su qualsiasi dispositivo iOS. L'unica opzione che conosco è che l'utente esegua effettivamente un'azione di clic e inizi la riproduzione nel gestore dell'evento clic senza avvolgere la chiamata .play () in qualcosa di asincrono (ajax, setTimeout, ecc.).

Qualcuno, per favore, dimmi se mi sbaglio. Avevo delle scappatoie funzionanti sia per iPad che per iPhone prima dell'aggiornamento più recente e sembra che tutte siano state chiuse.

Confermo che l'audio non funziona come descritto (almeno su iPad con 4.3.5). Il problema specifico è che l'audio non verrà caricato in un metodo asincrono (ajax, evento timer, ecc.) Ma verrà riprodotto se è stato precaricato. Il problema è che il carico deve essere su un evento attivato dall'utente. Quindi, se puoi avere un pulsante per consentire all'utente di avviare la riproduzione, puoi fare qualcosa come:

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

Quindi per riprodurlo, ad esempio in una richiesta ajax, puoi farlo

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

Non è la soluzione migliore, ma può essere d'aiuto, soprattutto sapendo che il colpevole è la funzione di caricamento in un evento non attivato dall'utente.

Modifica: ho trovato la spiegazione di Apple e riguarda iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Prova a chiamare il metodo .load () prima del metodo .play () sul tag audio o video ... che sarà rispettivamente HTMLAudioElement o HTMLVideoElement. Quello era l'unico modo in cui avrebbe funzionato sull'iPad per me!

La riproduzione automatica non funziona su iPad o iPhone né per i tag video né per quelli audio. Questa è una restrizione stabilita da Apple per risparmiare la larghezza di banda degli utenti.

Mi sembra che la risposta a questa domanda sia (almeno ora) chiaramente documentata sui documenti HTML5 di Safari :

Controllo utente dei download su reti cellulari

In Safari su iOS (per tutti i dispositivi, compreso l'iPad), dove l'utente può essere su una rete cellulare ed essere addebitato per unità di dati, il precaricamento e la riproduzione automatica sono disabilitati. Nessun dato viene caricato finché l'utente non lo avvia. Ciò significa che anche i metodi JavaScript play () e load () sono inattivi finché l'utente non avvia la riproduzione, a meno che il metodo play () o load () non venga attivato dall'azione dell'utente. In altre parole, un pulsante Play avviato dall'utente funziona, ma un evento onLoad = "play ()" no.

Questo riproduce il film: <input type="button" value="Play" onClick="document.myMovie.play()">

Questo non fa nulla su iOS: <body onLoad="document.myMovie.play()">

Sono rimasto perplesso su questo durante lo sviluppo di un'app web prototipo rapida sotto iOS4.2 (build dev). La soluzione è in realtà abbastanza semplice. Nota che non sembra che tu abbia già il tag nella tua pagina HTML, in realtà devi inserire il tag nel documento in modo dinamico (nota che questo esempio utilizza Prototype 1.7 per un po 'di eleganza Javascript extra):

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

Dato che non hai impostato un controller, non dovrebbe essere necessario fare nulla di complicato con i CSS per nasconderlo / posizionarlo fuori dallo schermo.

Questo sembra funzionare perfettamente.

Apple non supporta completamente lo standard, ma esiste una soluzione alternativa. La loro giustificazione è la congestione della rete cellulare, forse perché atterrerai su pagine che riproducono audio casuale. Questo comportamento non cambia quando un dispositivo va in wifi, forse per coerenza. A proposito, quelle pagine di solito sono comunque una cattiva idea. Non dovresti provare a mettere una colonna sonora su ogni pagina web. È semplicemente sbagliato. :)

L'audio HTML5 verrà riprodotto se viene avviato come risultato di un'azione dell'utente. Il caricamento di una pagina non conta. Quindi devi ristrutturare la tua app web per essere un'app all-in-one-page. Invece di un collegamento che apre una pagina che riproduce l'audio, è necessario quel collegamento per riprodurlo sulla pagina corrente, senza cambiare pagina. Questa regola di "interazione dell'utente" si applica ai metodi html5 che puoi chiamare su un elemento audio o video. Le chiamate ritornano senza alcun effetto se vengono attivate automaticamente al caricamento della pagina, ma funzionano quando vengono chiamate dai gestori di eventi.

La mia soluzione è innescata da un vero evento touch in un menu precedente. Ovviamente non ti obbligano a usare una specifica interfaccia del giocatore. Per i miei scopi, funziona bene. Se non hai un'interfaccia esistente da usare, afaik sei infastidito. Forse potresti provare eventi di tilt o qualcosa del genere ...

Se crei un elemento audio utilizzando:

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

E aggiungi un suspendlistener di eventi tramite:

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

E quindi carica il file in Safari mobile (iPad o iPhone), vedrai il "sospeso" accedere alla console dello sviluppatore. Secondo le specifiche HTML5, questo significa: "Il programma utente non sta intenzionalmente recuperando i dati dei media, ma non ha scaricato l'intera risorsa multimediale".

Chiamare un successivo a.load (), testare l'evento "canplay" e quindi utilizzare a.play () sembra un metodo adatto per l'attivazione automatica del suono.

Funziona con jQuery, testato su Ipad v.5.1.1

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

Devi aggiungere / rimuovere l'elemento video dalla pagina.

L'ho gestito collegando un gestore di eventi per tutti gli eventi per i quali è consentito attivare l'audio all'elemento body che attiva qualsiasi elemento audio html con riproduzione automatica da riprodurre una volta.

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

Questo sembra funzionare:

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

Guardalo in azione qui: http://www.johncoles.co.uk/ipad/test/1.html (archiviato)

A partire da iOS 4.2 questo non funziona più. Scusate.