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/horizons-obliques.md

@@ -0,0 +1,36 @@
++++
+author = "Miles Davos"
+title = "Horizons obliques"
+date = "2024-04-28"
+tags = [
+    "chronique", "critique", "bande dessinée", "bd", "anticipation"
+]
+ISBN = "9791026828013"
++++
+
+Cela fait une éternité que je n’ai pas lu une bande dessinée deux fois de suite. Happé par l’univers qu’elle dépeint, l’histoire, les couleurs et moult autres détails.
+
+« Horizons obliques » de Richard Blake est une œuvre impressionnante. A tout point de vue. D’autant plus qu’il s’agit de la première bande dessinée de ce peintre new-yorkais, nourri aux œuvres de François Schuiten et d’autres grands noms du 9e art de ce côté-ci de l’Atlantique.
+
+![](/images/horizons-obliques-1.jpeg)
+
+Nous sommes en 2040. L’humanité découvre une dimension parallèle, faite de continents et paysages qui se forment et se déforment, procédant d’un mouvement, semble-t-il, éternel de construction-déconstruction.
+
+L’exploration peut commencer, même si la mission est de prime abord impossible. Car comment cartographier l’instabilité, la fuite, l’irruption. Comment cerner les contours d’une image mouvante.
+
+On lance d’abord des drones chargés d’IA. On accumule les données, on simule et on calcule. Puis vient le moment d’envoyer des téméraires. Un couple de cartographes se porte volontaires. Tout se passe bien jusqu’à ce que le contact soit rompu. Leur jeune enfant, une fille, laissée derrière, perçoit grâce à son don de clairvoyance que ses géniteurs sont toujours vivants.
+
+Une mission de sauvetage s’organise. Elle va nécessiter plusieurs années de préparation durant laquelle on va tenter quelque chose de tout à fait inédit. Coupler l’esprit de l’enfant à celui d’une IA dotée d’un corps. Solidifier le lien entre les deux entités jusqu’à ce que le regard de l’un devienne celui de l’autre. Puis envoyer l’IA, guidée par l’humaine, à travers le portail liant notre monde avec La Passerelle ; ainsi fut nommée cette autre dimension.
+
+Dès les premières pages, on ressent vivement l’influence des « Cités obscures » du duo Schuiten-Peeters — des pièces magistrales dans le monde du 9e art — sur « Hexagon Bridge », titre original sous lequel est paru « Horizons obliques ».
+
+Cette influence s’étend non seulement à l’architecture, magistrale, mais aussi à l’atmosphère si prenante, si étrange qui enveloppe ces horizons obliques dans lesquels on aimerait se perdre à tout jamais.
+
+![](/images/horizons-obliques-2.jpeg)
+
+Blake fait preuve d’une grande retenue qui est à saluer. Contrairement à d’autres auteurs d’ouvrages de science-fiction et d’anticipation, il ne cherche pas à nous en mettre plein la vue. Au contraire. Son minimalisme renforce l’intérêt des lectrices et lecteurs pour La Passerelle, leur donnant l’impression d’être aux côtés de Staden, l’IA susmentionnée, dans sa quête. Les silences, la mise en couleur, l’architecture, rehaussent le scénario et les émotions qui le parcourent. C’est véritablement ingénieux.
+
+L’air de La Passerelle semble chargé de particules lynchiennes. Blake aurait-il aspiré la brume de Twin Peaks pour en arroser ses planches ? Je ne sais pas. Mais mon saisissement est bien là. Jusqu’à la dernière page et ce beau clin d’œil à un autre art qu’Alexandre Dulaunoy, cet autre flibustier de votre sillon, pratique à merveille.
+
+—
+[Horizons obliques](https://www.urban-comics.com/horizons-obliques/). Richard Blake. 19,91 €.

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.

content/post/oli-kellett-cross-road-blues.md

@@ -0,0 +1,15 @@
++++
+author = "Alexandre Dulaunoy"
+title = "Oli Kellett - Cross Road Blues"
+date = "2024-04-27"
+tags = [
+    "photo","critique", "photographie", "art", "livre"
+]
+ISBN = "978-1-59005-591-5"
++++
+
+La photographie de rue est un art diversifié ; elle peut se manifester à travers des photographies frontales au flash, à la manière de Bruce Gilden, des clichés pris dans les rues, inspirés par le style de Garry Winogrand, ou encore des sessions de chasse continue pour saisir des scènes de rue animées. Oli Kellett crée des panoramas de photographie de rue qui rappellent le travail de Gregory Crewdson, mais sans l'équipe de dix personnes en coulisses. Sa patience est son atout majeur pour obtenir une vue panoramique avec une personne perdue au milieu. On peut constater que sa sélection s'étend sur une période assez longue, révélant ainsi la rareté de cet instant parfait.
+
+![](/images/cross-road-blues.jpeg)
+
+- [OLI KELLETT | Cross Road Blues](https://www.nazraeli.com/complete-catalogue/oli-kellett-cross-road-blues), Nazraeli Press, Relié, 14 x 11,5 pouces, 68 pages, 28 plaques quadrichromiques.

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>
+