Pour satisfaire au standard html5 du web (bien respecté et reconnu par tous les navigateurs web sur ordinateurs, tablettes et smartphones), il faut placer les fichiers audio (mp3 et ogg) dans une balise "audio" html5 ... simple, mais fastidieux à la longue de répéter l’écriture de ce code html pour chaque son à insérer.

Alors j’ai développé un modèle "music" qui fait ce travail et apporte quelques paramètres complémentaires.

music-html.zip

Au préalable, le fichier de musique "mamusique" qu’on veut utiliser doit être converti dans les formats .mp3 et .ogg (le logiciel libre "MIRO VIDEO CONVERTER" fait cela vite et bien).

Si les fichiers mamusique.mp3 et mamusique.ogg font moins de 10Mo de taille, ils peuvent être téléchargés dans un article de SPIP, qui les place automatiquement dans les répertoires correspondants ./IMG/mp3 et ./IMG/ogg : au-delà des 10Mo il faudra les télécharger manuellement à l’aide d’un logiciel de ftp (FILEZILLA, par exemple).

"Al pasar la barca"

(comptine espagnole)

Donc, une fois les fichiers mp3 et ogg téléchargés il suffira d’écrire <music01|media=mamusique> pour afficher un contrôleur audio qui permet d’écouter le son "mamusique", comme dans l’exemple ci-contre.

Paramètres de la balise "music"
— identifiant numérique (01 à 99) obligatoire : permet d’insérer plusieurs audios dans un même article
— |media=nom du fichier, sans suffixe mp3 ni ogg ni autre
— |titre=texte de l’intitulé, qui s’affichera en gras et centré au-dessus du contrôleur audio
— |legende=texte du commentaire, qui s’affichera en italique et centré au-dessous du contrôleur audio
— |align=left ou center ou right, alignement du contrôleur audio (par défaut : center)
— |margin=valeur en pixels des marges droites et gauche autour du contrôleur audio (par défaut : 10)
— |height=valeur en pixels de la hauteur du contrôleur audio (par défaut : 40)
— |maxwidth=valeur en pixels de la largeur maxi du contrôleur audio (par défaut : 800)
— |minwidth=valeur en pixels de la largeur mini du contrôleur audio (par défaut : 150)
— |width=valeur de la largeur du contrôleur audio en % de la largeur de la fenêtre du navigateur (par défaut : 50%)
/ !\ Utiliser une valeur en % pour conserver la responsivité du contrôleur audio - avec une valeur en px, la largeur du contrôleur sera fixe
/ !\ Utiliser uniquement des suffixes en minuscule (mp3, ogg)