new: [acoustique] ajout d'une nouvelle balise (Hugo shortcut) pour ajouter un lecteur audio

Cela utilise un lecteur audio libre HTML5 du nom de plyr (disponible
https://github.com/sampotts/plyr).

Le shortcut audio est basé sur l'excellente librairie de Monsieur Roneo (Seb)
qui est disponible à cette adresse https://gitlab.com/Roneo/hugo-shortcode-roneo-collection

J'ai fait quelques modifications pour éviter le lien avec des vilains
CDNs et que cela colle dans le Sillon.

La documentation est aussi modifiée pour satisfaire les amis du Sillon.

README.md

@@ -31,6 +31,7 @@ Votre participation est la bienvenue ! Si vous souhaitez contribuer à notre pro
 - N'oubliez pas d'ajouter les en-têtes au début de la page avec `+++` et `+++` pour terminer.
 - Les en-têtes possibles sont `author` pour l'auteur de la chronique, `title` pour le titre de la chronique, `date` pour la date de publication, et `tags` qui est une liste de labels utilisés pour [faciliter la navigation sur le site](https://sillon-fictionnel.club/tags/) (par exemple, `bd`, `chronique`, `livre`). N'hésitez pas à réutiliser ce qui existe déjà.
 - Vous pouvez ajouter `ISBN` pour la référence du livre, ou `ISBNs` pour les références des livres.
+- Vous pouvez aussi ajouter un fichier sonore (externe ou interne) en incluant une ligne `{{< audio "https://archive.org/foo/bar.mp3" >}}`. Un lecteur audio sera alors disponible au début de la page.
 - Vous pouvez reprendre un texte existant pour vous assurer que la structure soit respectée.
 
 ## Test et évaluation

content/post/innommable-h.md

@@ -7,6 +7,8 @@ tags = [
 ]
 +++
 
+{{< audio "/son/h.wav" "l'Innommable H. en version acoustique">}}
+
 Dans les tréfonds de la bibliothèque, où les échos du progrès et de la modernité semblent étouffés sous le poids de l'histoire, repose un secret des plus sombres. Les membres du club de lecture chuchotent, les yeux emplis d'une terreur mêlée de fascination, à propos de l'Innommable H.[^1], cet énigmatique auteur français contemporain dont les écrits sont imprégnés d'un conservatisme ancien et rétrograde, un héritage intellectuel qui défie l'ère du temps.
 
 Ses mots, semblables à des reliques d'un passé révolu, portent en eux le poids d'un ordre immuable, une vision du monde où le changement est non seulement craint mais vigoureusement refusé. Chaque phrase de l'Innommable H. est un défi lancé à la modernité, une rébellion silencieuse contre l'évolution des mœurs et des pensées.

layouts/shortcodes/audio.html

@@ -0,0 +1,33 @@
+{{/* Based on Source: https://gitlab.com/Roneo/hugo-shortcode-roneo-collection */}}
+
+{{- $src := "" -}}
+{{- $caption := "" -}}
+{{- $class := "" -}}
+{{- $preload := "" -}}
+
+
+{{- if .IsNamedParams }}
+    {{- $src = .Get "src" -}}
+    {{- $caption = .Get "caption" -}}
+    {{- $class = .Get "class" -}}
+    {{- $preload = .Get "preload" | default "metadata" -}}
+{{- else }}
+    {{- $src = .Get 0 -}}
+    {{- $caption = .Get 1 -}}
+    {{- $class = .Get 2 -}}
+    {{- $preload = .Get 3 -}}
+{{- end }}
+
+
+<div class="text-center text-muted mb-1">
+<center>
+<figure {{ with $class }}class="{{ . }}"{{ end }}>
+  <i class="fa-solid fa-ear-listen"></i> 
+  <audio controls class="player" preload="{{ $preload }}">
+    {{ with $src }}<source src="{{ . | relURL }}" type="audio/mpeg">{{ end }}
+  </audio>
+  {{/*  <a href="{{ .Get "src"  }}" class="button small" download><i class="icon fas fa-download"></i></a>  */}}
+  {{ with $caption }}<figcaption>{{ . }}</figcaption>{{ end }}
+</figure>
+</center>
+</div>

themes/writeonly/layouts/_default/single.html

@@ -1,4 +1,30 @@
 {{ define "main" }}
+
+{{ if or ( .HasShortcode "audio" ) ( .HasShortcode "video" )  ( .HasShortcode "archive-audio" ) }}
+
+    <script>
+      (function() {
+        const players = Array.from(document.querySelectorAll('.player')).map(
+            p => new Plyr(p, {
+                controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'download', 'fullscreen'],
+                {{/*  autoplay: true,  */}}
+                {{/*  settings: ['speed']  */}}
+            })
+        );
+        {{/*  Stop other players when starting  */}}
+        players.forEach(function(p){
+            p.on('play', event => {
+                const instance = event.detail.plyr;
+                console.log('Stop others players');
+                players.forEach(function(p){ if(p != instance) p.stop()});
+            })
+        });
+    })();
+    </script>
+
+{{ end }}
+
+
 <main class="container py-5 flex-grow-1">
   <div class="row justify-content-center">
     <div class="col-12 mw-md mh-100">

themes/writeonly/layouts/partials/head/_resources.html

@@ -13,3 +13,9 @@
   <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   <script defer> mermaid.initialize({ startOnLoad: true, theme: "dark" }); </script>
 {{ end }}
+
+<!-- Audio player -->
+<link rel="stylesheet" href="/plyr.css">
+<script src="/plyr.polyfilled.js" crossorigin="anonymous"></script>
+<script src="/plyr.js" crossorigin="anonymous"></script>
+