Stockage local HTML5 de la source de l'élément audio - est-ce possible?

Question

J'ai récemment expérimenté les fonctionnalités de stockage audio et local de html5 et je suis tombé sur quelque chose qui m'a laissé perplexe.

J'aimerais pouvoir mettre en cache ou stocker localement la source de l'élément audio pour permettre une lecture plus rapide et hors ligne. Le problème est que je ne vois pas comment cela est possible avec la mise en œuvre actuelle.

J'ai essayé ce qui suit avec WebKit:

1. Création d'un fichier manifeste pour configurer la mise en cache locale, mais le fichier audio ne semble pas être un élément pouvant être mis en cache

2. J'ai également essayé d'utiliser du javascript pour mettre un objet audio dans un stockage local, mais la taille du mp3 rend cela impossible en raison de problèmes de mémoire (je pense).

3. J'ai essayé d'utiliser les données uri et base64 pour utiliser le code HTML en tant que transport audio pouvant être mis en cache, mais là encore, la taille du fichier le rend prohibitif. De plus, l'élément audio ne semble pas aimer cela dans WebKit (fonctionne très bien en mozilla)

4. J'ai essayé plusieurs méthodes pour placer les données dans le magasin de base de données local. De nouveau souffrant des mêmes problèmes que les autres cas.

J'aimerais entendre d'autres idées sur la façon dont je pourrais atteindre mon objectif de lecture hors connexion à l'aide de la mise en cache / du stockage local dans WebKit.

Answer 1

Cela fait donc longtemps que je n'ai pas posé cette question et je pensais pouvoir vous donner quelques informations sur la façon dont nous l'avons résolue. Fondamentalement, nous avons encodé les données en PNG en utilisant une technique similaire à celle-ci:

http://audioscene.org/scene-files/yury /pngencoding/sample.html

Mettez ensuite l'image en cache sur le périphérique mobile à l'aide du stockage local html5 et accédez-y selon vos besoins. Les PNG étaient assez gros mais cela a fonctionné pour nous.

Answer 2

J'essaie de le faire moi-même, sur iOS (pour iPhone / iPad), mais il refuse de mettre en cache les fichiers audio en mode hors connexion, même s'il se trouve dans le manifeste de cache.

Il ne commet pas d'erreur, mais prétend simplement avoir joué l'élément audio s'il est appelé via JavaScript sans contrôle. S'il est incorporé à un contrôle, il affiche un contrôle alternatif indiquant & "Impossible de lire le fichier audio. &". Cela fonctionne bien si l'application est en mesure de se connecter.

Il ne semble pas que le son ne soit pas mis en cache, la lecture d'une autre ressource son semble effacer la ressource précédente de la mémoire - cette fonctionnalité est plutôt inutile, même en ligne.

J'ai expérimenté l'encodage audio au format base64 en tant qu'URI de données. Cela fonctionne dans Safari sur le bureau (du moins pour des échantillons assez courts d’environ 20-30k que j’utilise) mais ne semble pas du tout être pris en charge sur iOS - il ne fait rien en silence, ce qui est très gênant.

Je ne connais pas les autres fournisseurs. Auparavant, Google Chrome ne supportait pas les URI de données pour l'audio, mais ils l'ont peut-être corrigé ... - il semble que ce ne soit pas possible pour l'instant.

Mise à jour: Différence mineure avec iPhone OS 3.x (testé avec la version 3.1.2): si un élément audio est spécifié dans une application Web hors connexion mais qu'il ne dispose pas de contrôle, il affiche un contrôle non interactif avec Spinner non-animé sur lui (ce qui ne devrait absolument pas être fait). Je suppose que cela est corrigé dans iOS 4.x (qui devrait paraître la semaine prochaine).

Answer 3

J'ai passé un certain temps à essayer de faire cela pour un jeu que je crée, et puisque, autant que je sache, les navigateurs (Firefox et Chrome) ne prennent toujours pas en charge la mise en cache des éléments audio, j'ai pensé poster la solution. J'ai trouvé.

Une solution de contournement est décrite ici: http://dougx.net/plunder/index.php #code

Je peux confirmer que cela fonctionne plutôt bien, mais convient probablement mieux aux fichiers plus petits. Comme il le décrit ici ( http://dougx.net/plunder/GameSounds.txt ), vous encodez l’audio sous forme de chaînes base64 et donnez-leur un en-tête de données: audio / ogg; base64 (ou tout autre format audio compatible) que l’audio HTML5 peut ensuite lire. Comme il s’agit d’une chaîne, le navigateur la cache.

Answer 4

Je suppose qu'il serait préférable de faire fonctionner l'approche manifeste, car cela semble être le mécanisme le plus pertinent pour la mise en cache locale du fichier.

Que se passe-t-il si vous modifiez les en-têtes HTTP du fichier audio, par exemple. Content-Type et Expires? Le navigateur fait-il autre chose si l’extension de fichier est modifiée?

Answer 5

Je vois que vous n'avez pas eu de chance jusqu'à présent.

Vous pouvez consulter JAI (interface audio JavaScript) (" la première interface javascript au monde pour le Web <audio> "). Ou contactez Alastair MacDonald , qui l'a écrit.

Sinon, le HTML5 Doctor pourra vous aider.

Answer 6

L'ajout de fichiers vidéo et audio au stockage local fonctionne avec iOS 4.3.

Je viens d'ajouter une vidéo et un fichier audio à manifester et ils ont tous deux été téléchargés sur un stockage hors connexion sur iPad.