La balise audio - liste de lecture

Bonjour à tous,

Voici quelques jours que je suis planté dans l'utilisation de la balise audio en html5. J'aimerais faire une liste de lecture simple de 5/6 fichiers musicaux. J'ai cru comprendre que la balise audio allait enfin pouvoir offrir une alternative aux lourds et inaccessibles lecteurs en flash.

J'ai tenté d'abord d'utiliser les exemples standards touvés dans la doc officielle et le site de mozilla mais sans succès; en effet, il lit les deux fichiers en même temps avec le code suivant:

<audio controls autobuffer>
  <source src="toto.ogg" type="audio/ogg"/>
  <source src="titi.ogg" type="audio/ogg"/>
  Your browser does not support audio, please download FF3 [smile]
</audio>

J'ai ensuite tenté d'utiliser JAI, mais la je vous avoue que mon ego en a pris un serieux coup, je ne suis même pas capable de reproduire l'exemple alors que celui-ci s'affiche bien dans mon navigateur...
-le contrôleur est uniformément noir, pas de boutons de contrôles visibles et accessibles
-le clic sur les noms de fichier ouvre directement le fichier au lieu de le lire dans le player...

Voila, avez vous déjà été confronté à la balise audio?
merci de vos retour d'expérience.

Déjà, une alternative correcte n'est pas «ton navigateur est à la ramasse, télécharge donc la dernière version de...», mais plutôt: «voilà les liens pour télécharger les fichiers audio, merci bonsoir».

L'exemple de JAI donne (et c'est idiot):

<li>  
  <a href="@F1LT3R - Cryogenic Unrest.ogg">F1LT3R - Cryogenic Unrest</a>
  <audio src="@F1LT3R - Cryogenic Unrest.ogg">
    Your browser does not support the <code>audio</code> element.
    Get <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">FireFox Nightly</a>.
  </audio>
</li>

Il vaudrait mieux:

<li>  
  <a href="@F1LT3R - Cryogenic Unrest.ogg">F1LT3R - Cryogenic Unrest</a>
  <audio src="@F1LT3R - Cryogenic Unrest.ogg"></audio>
</li>

a écrit :
-le contrôleur est uniformément noir, pas de boutons de contrôles visibles et accessibles

Mauvais styles CSS. Ou mauvais code HTML généré dynamiquement (ou code HTML qui est censé être généré dynamiquement mais qui ne l'est pas parce que le script n'est pas exécuté...). Ou les deux à la fois.

a écrit :
-le clic sur les noms de fichier ouvre directement le fichier au lieu de le lire dans le player...

Script JS non actif ou qui contient des erreurs. Soit aucun code JS n'est exécuté, soit le code exécuté, pour une raison ou une autre, n'attache pas de gestionnaires d'évènements à ces liens, soit des gestionnaires d'évènements sont créés mais le code qui s'exécute au clic contient des erreurs.

commandant a écrit :
il lit les deux fichiers en même temps avec le code suivant:

<audio controls autobuffer>
  <source src="toto.ogg" type="audio/ogg"/>
  <source src="titi.ogg" type="audio/ogg"/>
  Your browser does not support audio, please download FF3 [smile]
</audio>

Cette syntaxe est prévue pour lire un fichier dans un format (ogg) avec éventuellement des alternatives (aac, mp3) au cas le navigateur/système ne reconnaîtrait pas le format utilisé mais ce n'est pas fait pour avoir un lecteur multifichier.

Pour le reste, le serveur doit envoyer les bonnes entêtes http sinon ça ne marchera pas (avec <video> c'est la même chose).

P.S. : Un lecteur multifichier

Florent V. a écrit :
Déjà, une alternative correcte n'est pas «ton navigateur est à la ramasse, télécharge donc la dernière version de...», mais plutôt: «voilà les liens pour télécharger les fichiers audio, merci bonsoir».

Effectivement, tu as complètement raison. Rassure toi, j'ai un véritable contenu alternatif qui permet de télécharger directement le fichier, j'avais mis ça rapidement pour l'exemple.

Florent V. a écrit :

Mauvais styles CSS. Ou mauvais code HTML généré dynamiquement (ou code HTML qui est censé être généré dynamiquement mais qui ne l'est pas parce que le script n'est pas exécuté...). Ou les deux à la fois.

Je suis d'accord avec toi, mais ce qui m'embête c'est que même en enregistrant la page je n'arrive pas à reproduire l'exemple fourni. J'ai bien vérifié les liens vers les images, feuilles de styles et javascript mais rien à faire.

Patidou a écrit :
P.S. : Un lecteur multifichier

Oui, c'est celui que j'ai appellé JAI dans mon premier message. Merci quand même

Modifié par commandant (06 Nov 2009 - 11:50)

Re,

me revoila après quelques recherches, j'ai trouvé les exemples suivants qui permettent de faire des playlist en combinant Html5/javascript

http://www.happyworm.com/jquery/jplayer/
http://monmonja.com/html5audio/
http://www.imlucas.com/post/217484437/an-html-5-audio-player-that-doesnt-suck

Mais encore rien à la portée du néophyte en javascript que je suis. De plus je suis embêté que la majorité de ces exemples n'utilisent pas la balise <audio> "en clair". J'entends par là que celle ci me semble "reconstituée" par le javascript. Il me semble que ce devrait être au javascript d'être capable de lire du html et non au html de servir de support à sa reconstitution par du js. Bref, un code final peu lisible, des javascript difficilement ré-exploitables, laissons au temps le temps.

Je rêve d'une balise <audio> qui pourrait, dans une version minimaliste gérer plusieurs fichiers mais il semble que cela en restera à ce stade.

J'ai commencé à créer une page, c'est vraiment le tout début, jusqu'à présent j'arrive à changer le src de <audio> et <embed> (compatible IE) mais pas encore le lancement de la lecture. On verra dimanche où j'en serai.

commandant a écrit :
Il me semble que ce devrait être au javascript d'être capable de lire du html

C'est ce que font les scripts qui se basent sur une liste de liens vers des fichiers audio.

Patidou a écrit :
J'ai commencé à créer une page, c'est vraiment le tout début, jusqu'à présent j'arrive à changer le src de <audio> et <embed> (compatible IE) mais pas encore le lancement de la lecture. On verra dimanche où j'en serai.

Testé sous Firefox mais comme tu utilises des fichiers MP4 il m'envoie balader.

Florent V. a écrit :
Testé sous Firefox mais comme tu utilises des fichiers MP4 il m'envoie balader.

Oui ça marche avec Safari et pas dans Firefox. Grrr. Je vais faire des essais avec différents formats ou alors des fichiers avec le même nom mais dans des formats différents. En tout cas ça va prendre beaucoup plus de temps que prévu.

Patidou a écrit :
Oui ça marche avec Safari et pas dans Firefox. Grrr. Je vais faire des essais avec différents formats

Normalement ça se gère assez simplement en HTML:

<audio>
  <source src="monfichier1.m4a" type="audio/ogg; codecs=vorbis">
  <source src="monfichier1.ogg" type="audio/ogg; codecs=vorbis">
</audio>

Ainsi, en JS, il ne faut plus modifier l'attribut src de l'élément audio, mais l'attribut src de chaque élément source. Cette partie là ne devrait pas être extrêmement compliqué (c'est du JS basique).

Il reste à voir comment réagissent les navigateurs en cas de modification du DOM pour un élément audio:
- réaction si l'attribut src d'un élément audio est changé?
- réaction si l'attribut src d'un élément source dans un élément audio est changé?
- réaction lorsqu'un élément source est remplacé par un autre?

Normalement, HTML5 est suffisamment complet sur ce type de chose (contrairement à HTML4 qui est très vague) pour que des implémentations correctes donnent lieu à des comportements similaires.