Fichiers audio Autoplay sur iPad avec HTML5

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.

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.

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.

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

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!

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.

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

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.

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.

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

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.

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.

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

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