audio.html

{{- $src := .Get "src" -}}
{{- $uid := $src | anchorize -}}
{{- $peaksFile := "" -}}
{{- if $src }}{{ $peaksFile = printf "assets%s" (replace $src ".mp3" ".peaks.json") }}{{ end -}}
{{- /* Content-hash the audio via Hugo fingerprint so a re-rendered file gets a
       new URL and busts browser/CDN caches. Falls back to the raw src if the
       file isn't an asset. */ -}}
{{- $audioSrc := $src -}}
{{- if $src }}{{ with resources.Get (printf "audio/%s" (path.Base $src)) }}{{ $audioSrc = (. | fingerprint).RelPermalink }}{{ end }}{{ end -}}
{{- $bsrc := .Get "backup_src" -}}
{{- $backupSrc := $bsrc -}}
{{- if $bsrc }}{{ with resources.Get (printf "audio/%s" (path.Base $bsrc)) }}{{ $backupSrc = (. | fingerprint).RelPermalink }}{{ end }}{{ end -}}
<div class="tts-player" id="player-{{ $uid }}" data-track="{{ strings.TrimSuffix ".mp3" (path.Base $src) }}">
    <div class="listen">Listen to this article instead</div>
    <div class="tts-waveform" aria-hidden="true">
        {{- if and $peaksFile (os.FileExists $peaksFile) -}}
            {{- $data := os.ReadFile $peaksFile | transform.Unmarshal -}}
            {{- $peaks := $data.peaks -}}
            {{- $n := len $peaks -}}
            <svg class="wf" viewBox="0 0 {{ $n }} 100" preserveAspectRatio="none">
                <defs><clipPath id="clip-{{ $uid }}"><rect class="wf-clip" x="0" y="0" width="0" height="100"/></clipPath></defs>
                <g class="wf-base">{{ range $i, $p := $peaks }}<rect x="{{ $i }}" y="{{ div (sub 100.0 $p) 2.0 }}" width="0.6" height="{{ $p }}"/>{{ end }}</g>
                <g class="wf-played" clip-path="url(#clip-{{ $uid }})">{{ range $i, $p := $peaks }}<rect x="{{ $i }}" y="{{ div (sub 100.0 $p) 2.0 }}" width="0.6" height="{{ $p }}"/>{{ end }}</g>
            </svg>
        {{- else -}}
            {{ $img := resources.Get "img/waveform.svg" | minify }}<img class="wf-fallback" src="{{ $img.Permalink }}" alt="waveform">
        {{- end -}}
    </div>
    <div class="tts-controls">
        <button type="button" class="tts-play" aria-label="Play">&#9654;</button>
        <span class="tts-time">0:00 / 0:00</span>
        <select class="tts-speed" aria-label="Playback speed">
            <option value="0.75">0.75&times;</option>
            <option value="1" selected>1&times;</option>
            <option value="1.25">1.25&times;</option>
            <option value="1.5">1.5&times;</option>
            <option value="2">2&times;</option>
        </select>
    </div>
    <audio class="tts-audio" preload="metadata" {{ with .Get "title" }}data-info-title="{{ . }}"{{ end }}>
        {{ with $src }}<source src="{{ $audioSrc }}"{{ with $.Get "type" }} type="audio/{{ . }}"{{ end }}>{{ end }}
        {{ with .Get "backup_src" }}<source src="{{ $backupSrc }}"{{ with $.Get "backup_type" }} type="audio/{{ . }}"{{ end }}>{{ end }}
        Your browser does not support the audio element
    </audio>
</div>