Come inserire un riproduttore audio in un sito statico basato su Hugo

Obiettivo

Può capitare di dover inserire in una pagina web un riproduttore audio di file statico. Nel mio caso ne ho avuto bisogno per pubblicare i suoni derivati dalle missioni Apollo per la domotica di casa (ne parlo qui). Anche nel caso di un sito basato su tecnologia Jamstack come HUGO è possibile con poco integrare il codice necessario per impiegare il riproduttore nativo all’interno dello standard html5 per la riproduzione di audio e musica.

Creazione shortcode

Per farlo con la tecnologia HUGO basta avvalersi del componente shortcode. In pratica dobbiamo definire al nostro compilatore HUGO un template di html da impiegare e caricare a richiesta nei nostri file .md (ulteriori dettagli sulla Documentazione ufficiale).

Lo shortcode deve essere definito in layouts/shortcodes/audio.html. Questo è uno shortcode semplicissimo pensato per oggetti mp3, wav o ogg.

1
2
3
4
5
6
7
8

<div class="container">
<audio controls style="width: 100%; margin-bottom: 20px">
    {{ with .Get "wav" }}<source type="audio/wav" src="{{ . }}">{{ end }}
    {{ with .Get "ogg" }}<source type="audio/ogg" src="{{ . }}">{{ end }}
    {{ with .Get "mp3" }}<source type="audio/mpeg" src="{{ . }}">{{ end }}
    Your browser does not support the audio element.
{</audio>
</div>

La proprietà mp3 in questo caso indica la sorgente del file con tale formato ed è passata come parametro della shortcode. Per comodità possiamo aggiungere il file nella stessa cartella del file .md che lo richiamerà, in questo modo non dovremo preoccuparci di path relativi.

Richiamare lo shortcode nella pagina

Per richiamare il file di prova “prova.mp3” che si trova nella medesima cartella dell’articolo in formato markdown .md basterà utilizzare il codice:

1

{{< audio mp3=carengine.mp3 >}}

Demo

Ecco il risultato:

Compatibilità

In accordo alla documentazione Mozilla, la compatibilità sui browser moderni è garantita.

Extra - Visualizzare codice shortcode come codice sorgente

Scrivendo questo articolo sono incappato in un problema di visualizzazione del codice degli shortcode all’interno dell’articolo stesso. Inserendo la stringa {{< shortcode >}} nel testo o in un riquadro di codice sorgente di una pagina Hugo non avrà l’esito sperato, in quanto il compilatore del sito sostituirà il codice con il relativo template dichiarato. Per mostrare il codice così come è ed inibire la sostituzione bisognerà inserire dei caratteri per commentare la shortcode in questo modo:

1

{{</* audio mp3="audio file" */>}}