sillon-fictionnel/themes/writeonly/layouts/_default/single.html
Alexandre Dulaunoy b609fe8040 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.
2024-04-28 09:11:54 +02:00

47 lines
1.4 KiB
HTML

{{ 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">
<div class="py-4">
<div class="py-2">
<h1 class="display-1 text-center fw-bold text-primary">
{{ .Title }}
</h1>
{{ partial "shared/post-meta" . }}
{{ partial "shared/post-categories" . }}
</div>
<div class="markdown-content py-2">
{{ .Content }}
{{ partial "shared/post-isbn" . }}
</div>
</div>
</div>
</div>
</main>
{{ end }}