2011-10-22 4 views
6

J'ai une petite application Web, qui joue des sons très courts sur le clic de plusieurs boutons. Il cible explicitement Safari mobile sur iOS (iPad). Après avoir lu ici et ailleurs sur les nombreuses "lacunes" de l'audio HTML5 dans ce contexte sur Safari mobile et en essayant quelques "hacks" et astuces, je suis coincé avec une situation où Safari semble simplement (pour le manque de un meilleur mot) cassé:Mobile Safari: manifeste audio + cache

Je peux jouer le son A (ça prend beaucoup de temps pour le démarrer - je suppose qu'il est en train de retomber [encore]?) en cliquant sur le bouton A. Après cela, en cliquant sur le bouton B jouera immédiatement le son A à nouveau. Pareil pour le bouton C. Dans certains cas, il jouera un son différent, parfois même le bon. Mais surtout le son A. Le format utilisé était .aiff, est maintenant .m4a.

Après avoir écrit quelques petites versions moi-même, je décide d'aller à la bibliothèque Buzz pour gérer le son chargement/lecture/etc ..

Bizarrement, leur démo comprend un jeu, ce qui fait à peu près exactement ce que J'ai besoin de et déclenche le même comportement défectueux. Je me suis même retrouvé dans une situation où n'importe quel lecteur audio dans Safari mobile dans n'importe quel onglet jouait un certain son sur le jeu démo Buzz (!). J'espérais qu'un manifeste de cache pourrait aider à surmonter les limitations de préchargement d'Apple et forcer l'application à jouer le son juste après avoir appuyé sur le bouton en mode déconnecté. Mais après avoir confirmé que toute l'application avait été mise en cache, je ne peux pas lire/entendre aucun son en mode déconnecté.

Est-ce que quelqu'un a réussi à faire fonctionner quelque chose comme ça? (- Après avoir vu les modalités de traitement de certaines choses, je ne vous attendez pas à une réponse beaucoup, mais ...)


Mise à jour 1:

L'exemple dans cette réponse provoque le même effet: How to synthesize audio using HTML5/Javascript on iPad


Mise à jour 2:

Mise à jour iOS (et donc Safari) semble résoudre le bug audio. Le manifeste du cache ne semble cependant pas affecter les fichiers audio. Ces fichiers ne sont tout simplement pas disponibles du tout. Après avoir supprimé le manifeste du cache, l'application fonctionne correctement, mais l'ajouter à l'écran d'accueil et le recharger empêche la lecture de l'audio.

Répondre

7

Je voudrais pouvoir vous dire qu'il existe une formule magique pour faire fonctionner parfaitement tous vos médias html5, mais ce n'est pas le cas. Le support mobile pour HTML5 audio/vidéo est assez médiocre en ce moment; beaucoup plus loin que ses prédécesseurs de bureau. Pour aggraver les choses, chacune des différentes plates-formes le gère différemment et la plupart d'entre elles ne le supportent que dans des versions semi-récentes. Cependant, il existe quelques astuces que vous pouvez utiliser pour que les fichiers multimédia fonctionnent correctement dans Safari mobile. Afin de les expliquer, vous devrez comprendre certaines de ses lacunes.


1) Vous ne pouvez pas charger plusieurs fichiers audio/vidéo

Son été mon expérience que le navigateur ne chargera à la fois un fichier. Si vous jouez un fichier, allez en jouer un autre, puis revenez et il ne vous reste plus qu'à charger ce fichier. Et, bien que je ne l'ai pas essayé moi-même, je ne crois pas qu'un manifeste cache puisse vous aider ici.

Ce que je devais faire est de combiner tous mes fichiers audio en un seul gros fichier audio. Puis, en fonction de la piste audio demandée, je déplacerais la position de lecture à la position de départ appropriée et je jouerais cette piste. Ensuite, j'utiliserais setInterval pour examiner la lecture toutes les quelques millisecondes afin de déterminer si la position de lecture actuelle atteignait la fin de la piste. Une fois cela fait, je l'ai fait une pause. Pluis, je me suis donné quelques secondes (2-3) entre chaque piste, juste au cas où le CPU du téléphone était sous beaucoup de charge et j'ai vérifié le flux un peu trop tard.

2) Vous ne pouvez pas les fichiers audio/vidéo auto-play

d'Apple intégré dans leur technologie tag médias HTML5 la limitation que ces pistes ne feraient que la charge et jouer en réponse à un événement de clic de l'utilisateur. De cette façon, les développeurs ne pouvaient pas lire automatiquement les pistes ennuyantes lorsque vous alliez sur leurs sites Web. Lorsque j'utilisais des tags audio/vidéo, j'essayais de créer une publicité rich media. J'ai donc accroché mon chargement audio/pistes à l'événement de clic de bannière, lorsque vous cliquez sur une bannière et développez la publicité.

Ce que je vous suggère de faire est de faire apparaître une petite fenêtre contextuelle, demandant à l'utilisateur s'il veut activer/désactiver le son. Vous pouvez attacher vos fonctions de chargement à l'événement click de cette boîte contextuelle, que l'utilisateur active ou désactive le son.

Personnellement, je n'ai pas eu beaucoup de chance en utilisant la fonction load(). J'exécuterais cette fonction pour charger l'audio, puis cliqueriez sur play pour le recharger. Il aurait toujours pu être que je ne l'ai pas fait correctement, alors n'hésitez pas à me prouver que je me trompe et que ça marche. Qu'est-ce que j'ai dit à la piste à jouer, de sorte que le chargement commencerait, et ensuite j'utiliserais un setInterval pour voir si le temps de lecture actuel a augmenté de quelques millisecondes. Une fois que j'ai remarqué qu'il a commencé à jouer la piste, je l'ai immédiatement fait une pause.

3) Tags audio/vidéo ne sont pris en charge dans iOS 4.0 et versions ultérieures

Il n'y a pas astuce pour contourner cela. C'est juste les faits.


est ici quelques sites qui ont aidé quand quand je développais avec des balises audio/vidéo:

http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements

Bonne chance!

+0

Merci beaucoup! Il y a beaucoup de bons conseils ici, il semble. Certainement aller essayer quelques choses. – polarblau

+0

Une chose supplémentaire que vous devez savoir est qu'il est impossible de mettre en cache audio ou vidéo sur iOS. Même avec appcache. – idbehold

+0

pouvez-vous donner un exemple de code pour - déplacer la position de lecture à la position de départ appropriée. Aussi, si vous voulez jouer la piste pendant 3 secondes, comment l'arrêtez-vous? – Jon

Questions connexes