media-audio ~ fichier(s) audio en HTML5

Cette action affiche un lecteur HTML5 pour un ou plusieurs fichiers (mp3, ogg) présents sur le serveur.

Si une image de même nom existe, elle sera utilisée comme vignette. 
Si le nom du fichier n'est pas indiqué ou contient des jokers, tous les fichiers audio correspondants seront retournés.

Un exemple simple

{up media-audio=images/audio/joyful-snowman}

Une galerie audio

{up media-audio=images/audio/fu*}

La mise en forme

Elle est définie par l'option template. Par défaut, ##title## ##player##, affiche le nom du fichier humanisé et le player sur la même ligne.

Une démo et son explication

Funky

📥

"Funky" est un morceau funk et disco amusant et contagieux qui apportera une ambiance et un rythme inégalés à votre projet. Avec des trompettes vibrantes au cœur du morceau, ce morceau est rempli d'un son optimiste et unique qui vous fera bouger sous son influence.
Traduction libre de la page crédit du morceau sur Pixabay

Funny kids

📥

Happy santa

📥

Joyful snowman

📥

Merry christmas

📥

Minimal tech ambient

📥

Science of trip hop

📥

{up media-audio=images/audio/
| main-tag=div
| main-style=p1 bd-red
| item-style=p1 bd-vert mv1 display-block
| player-style=bg-orange p1 bd-arrondi
| download-text=&#x1F4E5
| image-default=images/audio/audio-default.webp
| template=[div style="display:flex;width:100%;align-items:center;"]##image## ##title## ##player## ##download # [span title="Download"]%%[/span]##[/div] ##info # [div class="w100 i fs90"]%%[/div]##
| css-head=@media(max-width:480px)[#id .upaudio-item > div[flex-wrap:wrap]]
}

Le contenu du dossier images/audio avec l'action file-explorer

{up file-explorer=images/audio
 | ext-ajax=+md,info
 | icon-size=16 | main-tag=div}

Notez l'option ext-ajax qui ajoute les extensions non traitées en standard. Plus d'info sur la démo de file-explorer

audio-default.webp 👁 📥

credits.md 👁 📥

funky.info 👁 📥

funky.mp3 👁 📥

funky.ogg 👁 📥

funky.webp 👁 📥

funny-kids.jpg 👁 📥

funny-kids.mp3 👁 📥

happy-santa.jpg 👁 📥

happy-santa.mp3 👁 📥

happy-santa.ogg 👁 📥

joyful-snowman.mp3 👁 📥

joyful-snowman.webp 👁 📥

merry-christmas.mp3 👁 📥

minimal-tech-ambient.mp3 👁 📥

minimal-tech-ambient.ogg 👁 📥

science-of-trip-hop.jpg 👁 📥

science-of-trip-hop.mp3 👁 📥

voir le contenu du dossier images/audioreplier

Pour aller plus loin sur l'utilisation des mots-clés et du template, consultez l'article sur les mots-clés

Des explications sur le template de l'exemple ci-dessus. 

[div style="display:flex;width:100%;align-items:center;"]
  ##image## ##title## ##player## 
  ##download # [span title="Download"]%%[/span]##
[/div]
##info # [div class="w100 i fs90"]%%[/div]##

Les mots-clés

Il est possible de modifier le contenu en utilisant les mots-clés suivants :

##player##

Affiche le lecteur audio HTML5. 

##title##

Affiche le nom du fichier en version agréable à l'œil.

##image##

Affiche dans  l'ordre :

1. une image de même nom que le fichier musical
2. une image par défaut définie par l'option image-default
3. votre image "audio-default.png" dans le dossier custom de l'action
4. l'image "audio-default.png" par défaut de l'action

##info##

Affiche le contenu d'un fichier de même nom que le morceau avec l'extension .info
Le format HTML est autorisé.

##download##

Affiche un lien pour télécharger le fichier audio. 

Le texte est défini par l'option download-text.
Utilisez les options download-tag et download-style pour la mise en forme.

Les options

Vous pouvez gérer l'exécution des fichiers audio avec des options qui ont les mêmes fonctions que les attributs HTML5 de même nom :

• autoplay lance automatiquement la première vidéo
• muted coupe le son
• loop joue la vidéo en boucle
• controls pour afficher les boutons de commande
• preload pour précharger les vidéos. Les valeurs admises sont : none, metadata ou auto

La mise en forme est gérée par les options :

• template définit le contenu affiché à l'aide de mot-clés. Voir l'utilisation des mots-clés
• main-tag et main-style 
• item-tag et item-style 
• player-style 
• tite-tag et title-style 
• image-style. image-types; image-default 
• info-style 
• download-text contient le texte proposant le téléchargement. download-tag et download-style 

La gestion des vidéos acceptées est effectuée en utilisant deux options :

• types qui contient la liste des extensions de fichier avec le type mime correspondant. Par défaut: mp4:mp4;webm:webm;ogv:ogg
• codecs est la liste des codec supportés par type mime. ex: ogg:theora,vorbis; webm:vp8.0,vorbis

En cas d'erreurs, deux options définissent les messages affichées :

• no-video si aucune vidéo n'est trouvée dans le dossier
• no-support si le type de la vidéo n'est pas supporté par le navigateur client

Comme à son habitude, UP propose les options id et css-head pour identifier l'instance de l'action et ajouter du CSS libre.