Lecteur audioSi 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: |
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 audioSi 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 audioComme 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 |
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 |
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 |