Utilisation des valves, génération du site web de l'ULB - format xml
sommairesommaireindexindexdébutdébutpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

Lecteur audio

Si des données de type audio sont associées aux informations (interview, musique, podcast...), il est possible de faire apparaître un lecteur audio qui permettra aux internautes de les écouter.

Contrairement à la vignette et à l'illustration, ces données audio ne sont pas gérées en tant que telles (il est plus rare de rencontrer des données audio que des images). Toutefois, elles peuvent être associées soit sous forme d'un fichier attaché, soit via un lien associé à l'information.

Pour les exploiter, il est nécessaire d'utiliser un élément <audio> dans l'élément <affichage> qui fera apparaître le lecteur audio à l'endroit précisé.


Comment associer une donnée audio

La première possibilité est de placer la donnée audio dans un fichier attaché lié à l'information. Seuls les fichiers mp3 et wav sont supportés pour l'instant. Si la balise <audio/> est présente, ce fichier attaché sera soustrait de la liste des fichiers attachés et proposé à l'écoute via le lecteur audio.

La deuxième possibilité (si aucun fichier attaché audio n'est trouvé), c'est d'utiliser le lien de l'information. Si celui-ci contient une URL qui pointe vers un document de type mp3 ou wav et que la balise <audio/> est présente, alors le lecteur audio sera utilisé pour écouter ce document. Attention, dans ce cas, le document audio ne sera pas mis en cache et sera utilisé via l'URL en question (assurez-vous que ce document ne disparaisse pas).

Consultez les documents ci-contre pour savoir comment les fichiers attachés et les liens sont gérés dans les différentes sources.

Pour plus d'information sur les données disponibles:


Taille du lecteur audio

Par défaut, le lecteur audio prendra toute la largeur de l'information (100%). Vous pouvez changer cela grâce à un attribut largeur donnant la taille à utiliser (en nombre de pixels). La hauteur, elle, ne peut pas être changée (elle est fixée par votre navigateur).


Cet exemple utilise <audio/> sans attribut largeur. La taille par défaut (toute la largeur de la zone) sera utilisée.

Exemple
<valves style="colorBar4" debug="oui">
   <affichage>
      <titre/>
      <vignette position="gauche-texte"/>
      <contenu/>
      <audio/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax1

Cet exemple utilise une largeur de 200 pixels.

Exemple
<valves style="colorBar4" debug="oui">
   <affichage>
      <titre/>
      <vignette position="gauche-texte"/>
      <contenu/>
      <audio largeur="200"/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax2

Position du lecteur audio

Si vous modifiez la largeur par défaut du lecteur vidéo, celui-ci s'affichera centré au mileu de la zone qui le contient. Vous pouvez changer cela grâce à un attribut position comme pour une image.


Cet exemple aligne le lecteur à gauche.

<audio largeur="240" position="gauche"/>
loading...ajax3

Cet exemple aligne le lecteur au centre.

<audio largeur="240" position="centre"/>
loading...ajax4

Cet exemple aligne le lecteur à droite.

<audio largeur="240" position="droite"/>
loading...ajax5

Cet exemple aligne le lecteur à gauche et positionne le texte tout autour.

<audio largeur="240" position="gauche-texte"/>
loading...ajax6

Cet exemple aligne le lecteur à droite et positionne le texte tout autour.

<audio largeur="240" position="droite-texte"/>
loading...ajax7

Espacement autour du lecteur audio

Comme pour la vignette et l'illustration, il est possible de régler l'espacement entre le lecteur audio et le reste du texte, grâce aux attributs espace-haut, espace-bas, espace-gauche et espace-droite.

Le même exemple que ci-dessus, mais avec un espacement de 20 pixels à gauche et en bas.

<audio largeur="240" position="droite-texte" espace-bas="20" espace-gauche="20"/>
loading...ajax8

Lecteur audio et vignette/illustration

Si une information contient à la fois une image (vignette, illustration oui vignette-source) et un lecteur audio, cela peut compromettre la mise en page. Il est possible dans ce cas de supprimer l'image ou d'intégrer le lecteur audio à cette image.


Dans cet exemple, la vignette et le lecteur audio sont positionnés tous les deux à droite du texte.

<valves style="colorBar4" debug="oui">
   <affichage>
      <titre/>
      <vignette position="droite-texte"/>
      <audio largeur="240" position="droite-texte"/>
      <contenu/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax9

Supprimer l'image en cas de présence du lecteur audio

Vous pouvez dans ce cas décider de supprimer l'image en ajoutant un attribut image="non" sur l'élément <audio/>. Dans ce cas, si un lecteur audio est présent, l'image sera supprimée.

<valves style="colorBar4" debug="oui">
   <affichage>
      <titre/>
      <vignette position="droite-texte"/>
      <audio largeur="240" position="droite-texte" image="non"/>
      <contenu/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax10

Intégrer le lecteur audio à l'image

En placant l'élément <audio/> au sein de l'élément <vignette>, <illustration> ou <vignette-source>, le lecteur audio sera totalement intégré à l'image (dans le bas de celle-ci).

Sa largeur sera toujours égale à celle de l'image. Les attributs largeur, position, espace-haut... n'auront pas d'effet.

Dans cet exemple, le lecteur audio sera intégré à l'image avec une largeur de 200 pixels.

<valves style="colorBar4" debug="oui">
   <affichage>
   <illustration position="centre" largeur="200" hauteur="300">
         <audio/>
         <déformation-maximale valeur="10"/>
      </illustration>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax11

La taille du lecteur audio s'adaptera automatiquement à celle de l'image (ici 300 pixels).

<valves style="colorBar4" debug="oui">
   <affichage>
      <illustration position="centre" largeur="300" hauteur="300">
         <audio/>
         <déformation-maximale valeur="10"/>
      </illustration>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="lune"/>
</valves>
loading...ajax12
ULB - entreprise écodynamique