Fichiers audio Autoplay sur iPad avec HTML5

j'essaie d'obtenir un fichier audio pour autoplay en Safari sur un iPad. Si je vais à la page en utilisant Safari sur mon Mac, c'est bon. Sur l'iPad, autoplay ne fonctionne pas.

82
demandé sur milesmeow 2010-06-10 00:58:16
la source

15 ответов

mise à JOUR: C'est un hack et il ne marche plus sur IOS 4.X et au-dessus. Celui-ci a travaillé sur iOS 3.2.X.

ce n'est pas vrai. Apple ne veut pas autoplay vidéo et audio sur IPad en raison de la forte amout du trafic que vous pouvez utiliser sur les réseaux mobiles. Je n'utiliserais pas autoplay pour du contenu en ligne. Pour les sites HTML hors ligne c'est une grande fonctionnalité et thats ce que je l'ai utilisé pour.

voici un " faux clic javascript" solution: http://www.roblaplaca.com/examples/html5AutoPlay /

copier & coller le Code du site:

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

ce n'est pas ma source. J'ai trouvé ça il y a quelque temps et j'ai testé le code sur un IPad et un IPhone avec iOS 3.2.X.

32
répondu Fa11enAngel 2015-01-13 03:28:56
la source

je voudrais également souligner que la raison pour laquelle vous ne pouvez pas faire cela est une décision d'affaires que Apple a pris, pas une décision technique. À savoir, il n'y avait aucune justification technique rationnelle pour Apple de désactiver le son des applications web sur l'iPod Touch. C'est un appareil WiFi seulement, pas un téléphone qui peut entraîner des frais de bande passante coûteux, de sorte que cet argument n'a aucun mérite pour cet appareil. Ils peuvent dire qu'ils aident avec la gestion du réseau WiFi, mais tous les problèmes avec la bande passante sur mon WiFi le réseau, c'est mon problème, pas celui D'Apple.

aussi, si ce qui les intéressait vraiment était d'éviter la consommation de bande passante excessive et non désirée, ils fourniraient un réglage pour permettre aux utilisateurs de s'inscrire aux sons des applications web. De plus, ils feraient quelque chose pour empêcher les sites Web de consommer une largeur de bande équivalente par d'autres moyens. Mais il n'y a pas de telles restrictions. Un site web peut télécharger des fichiers énormes dans l'arrière-plan encore et encore et Apple pourrait se soucier moins à ce sujet. Et enfin, j' croyez que les sons peuvent être téléchargés de toute façon, donc aucune bande passante n'est réellement enregistrée! Apple ne leur permet tout simplement pas de jouer automatiquement sans interaction avec l'utilisateur, ce qui les rend inutilisables pour les jeux, ce qui est bien sûr leur véritable intention.

Apple a bloqué le son parce qu'ils ont commencé à remarquer que les applications HTML5 peuvent être tout aussi capables que les applications natives, si ce n'est plus. Si vous voulez du son dans les applications Web, vous devez faire pression sur Apple pour arrêter d'être anti-concurrentiel comme Microsoft. Il n'y a pas de problème technique qui peut être fixe ici.

102
répondu Rick M 2011-02-05 01:18:15
la source

Apple rejette de manière ennuyeuse de nombreuses normes web HTML5 sur leurs appareils iOS, pour une variété de raisons commerciales. En fin de compte, vous ne pouvez pas pré-charger ou auto-lire des fichiers sonores avant un événement tactile, il ne joue qu'un son à la fois, et il ne supporte pas Ogg/Vorbis. Cependant, j'ai trouvé une chouette solution pour vous permettre d'avoir un peu plus de contrôle sur l'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>

en gros, vous commencez à jouer le fichier audio sur le tout premier événement tactile, puis vous le mettez en pause immédiatement. Maintenant, vous pouvez utiliser le soundHandle.play() et soundHandle.les commandes pause() tout au long de votre Javascript et de contrôler l'audio sans toucher les événements. Si vous pouvez le chronométrer parfaitement, faites que la pause arrive juste après que le son soit terminé. Alors la prochaine fois que vous jouerez à nouveau, il va revenir au début. Cela ne résoudra pas tout le désordre Apple a fait ici, mais c'est une solution.

25
répondu kaleazy 2012-05-04 15:36:32
la source

Comme de l'iOS 4.2.1, ni le faux cliquez sur ni l' .load () trick va travailler à l'autoplay audio sur n'importe quel périphérique iOS. La seule option que je connaisse est de demander à l'utilisateur d'effectuer effectivement une action de clic et de commencer la lecture dans le gestionnaire d'événement de clic sans envelopper le .play () appelle quelque chose d'asynchrone (ajax, setTimeout, etc.).

dites-moi si je me trompe. J'ai eu des failles de travail pour iPad et iPhone avant la plus récente mise à jour, et ils ont tous l'air d'avoir été fermés.

23
répondu David Gouldin 2010-11-23 22:13:05
la source

je confirme que l'audio ne fonctionne pas comme décrit (au moins sur iPad exécutant 4.3.5). Le problème spécifique est que l'audio ne se chargera pas dans une méthode asynchrone (ajax, événement de minuterie, etc) mais qu'il fonctionnera s'il a été préchargé. Le problème est que la charge doit être sur un événement déclenché par l'utilisateur. Donc, si vous pouvez avoir un bouton pour l'utilisateur pour lancer le jeu, vous pouvez faire quelque chose comme:

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

ensuite pour le jouer, par exemple dans une requête ajax, vous pouvez faire

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

N'est pas la meilleure solution, mais elle peut aider, surtout en sachant que le coupable est la fonction de charge dans un événement non-déclenché par l'utilisateur.

Edit: J'ai trouvé L'explication D'Apple, et elle affecte iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

9
répondu Jacob Mouka 2011-11-04 00:19:53
la source

Essayez d'appeler le .méthode load () avant le .méthode play () sur la balise audio ou vidéo... qui seront htmlaudioelement ou htmlvideoelement respectivement. C'était la seule façon que ça fonctionnait sur l'iPad pour moi!

7
répondu Brian Brown 2010-06-23 03:27:57
la source

Autoplay ne fonctionne pas sur l'iPad ou l'iPhone pour la vidéo ou les balises audio. Il s'agit d'une restriction mise en place par Apple pour enregistrer la bande passante des utilisateurs.

5
répondu Andrew 2010-06-11 00:37:46
la source

il me semble que la réponse à cette question Est (au moins maintenant) clairement documentée sur le Safari HTML5 docs :

contrôle des téléchargements par L'utilisateur sur les réseaux cellulaires

Dans Safari sur iOS (pour tous les appareils, y compris iPad), où l'utilisateur peut être sur un réseau cellulaire, et facturés par unité de données, de précontrainte et de la lecture automatique sont désactivées. Aucune donnée n'est chargé jusqu'à ce que l'utilisateur lance. Cela signifie le JavaScript play () et les méthodes load() sont également inactives jusqu'à ce que l'utilisateur lance la lecture, à moins que la méthode play() ou load () ne soit déclenchée par l'action de l'utilisateur. En d'autres termes, un bouton Play initié par l'utilisateur fonctionne, mais un événement onLoad="play()" ne fonctionne pas.

cela joue le film: <input type="button" value="Play" onClick="document.myMovie.play()">

Cela ne veut rien sur iOS: <body onLoad="document.myMovie.play()">

5
répondu Adrian 2011-11-17 14:16:02
la source

ont perplexe sur ce tout en développant un prototype web application rapide sous iOS4.2 (dev build). La Solution est en fait assez simple. Notez que vous ne pouvez pas sembler avoir déjà la balise dans votre page HTML, vous devez en fait insérer la balise dans le document de manière dynamique (notez que cet exemple utilise le Prototype 1.7 pour un certain snazzin Javascript supplémentaire):

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

comme vous n'avez pas défini de contrôleur, il ne devrait pas être nécessaire de faire quoi que ce soit avec CSS pour le cacher / positionnez-le hors-écran.

Cela semble fonctionner parfaitement.

2
répondu Jon Jardine 2010-12-03 18:20:22
la source

Apple ne supporte pas complètement la norme, mais il y a une solution. Leur justification est la congestion du réseau cellulaire, peut-être parce que vous atterrirez sur des pages qui jouent un son aléatoire. Ce comportement ne change pas quand un appareil se connecte au wifi, peut-être par cohérence. Par ailleurs, ces pages sont généralement une mauvaise idée de toute façon. Vous ne devriez pas essayer de mettre une bande sonore sur chaque page web. C'est tout simplement faux. :)

HTML5 audio va jouer si il est lancé à la suite d'une action de l'utilisateur. Le chargement d'une page ne compte pas. Vous avez donc besoin de restructurer votre application web pour être une application tout-en-une-page. Au lieu d'un lien qui ouvre une page qui joue de l'audio, vous avez besoin de ce lien pour le lire sur la page actuelle, sans changement de page. Cette règle "user interaction" s'applique aux méthodes html5 que vous pouvez utiliser sur un élément audio ou vidéo. Les appels reviennent sans aucun effet s'ils sont lancés automatiquement lors du chargement de la page, mais ils fonctionnent lorsqu'ils sont appelés à partir de l'événement manipulateur.

2
répondu bmidgley 2011-10-12 20:30:14
la source

ma solution est déclenchée à partir d'un vrai événement tactile dans un menu précédent. Ils ne vous forcent pas à utiliser une interface de lecteur spécifique, bien sûr. Pour ma part, cela fonctionne bien. Si vous n'avez pas d'interface existante à utiliser, afaik vous êtes fichu. Peut-être que tu pourrais essayer des évènements de tilt ou quelque chose comme ça...

1
répondu Luke Stanley 2011-10-15 01:51:24
la source

si vous créez un élément Audio en utilisant:

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

et Ajouter un suspend écouteur d'événements via:

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

et ensuite charger le fichier dans le Safari mobile (iPad ou iPhone), vous verrez le 'suspendu' être enregistré dans la console du développeur. Selon la spécification HTML5, cela signifie que " l'agent utilisateur ne récupère pas actuellement les données des médias, mais ne fait pas télécharger la totalité de la ressource multimédia."

Appel d'un A. suivant.load (), testing for the "canplay" event and then using a. play () semble être une méthode appropriée pour déclencher automatiquement le son.

1
répondu Vince 2017-07-17 04:41:13
la source

fonctionne avec jQuery, testé sur Ipad v. 5.1.1

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

vous devez ajouter/supprimer l'élément vidéo de la page.

0
répondu Adrian 2012-10-19 23:15:26
la source

j'ai géré cela en attachant un gestionnaire d'événements pour tous les événements pour lesquels vous êtes autorisé à déclencher l'audio à l'élément de corps qui déclenche tous les éléments audio html avec autoplay à jouer une fois.

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
répondu Andrew Hancox 2017-05-30 19:04:42
la source

cela semble fonctionner:

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

Voir en action ici: http://www.johncoles.co.uk/ipad/test/1.html (Archivé)

de l'iOS 4.2, ce ne sont plus des œuvres. Désolé.

0
répondu John Coles 2017-07-17 06:42:07
la source

Autres questions sur