1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 22:12:10 +00:00
seirdy.one/layouts/shortcodes/audio.html
Rohan Kumar a8057aa8e8
Add support for <audio> elements
- Adjust transcript shortcodes to also support <audio> elements.
- Add audio element shortcode based on <picture> shortcode
- Make <audio> elements match container width.
2022-06-30 20:12:06 -07:00

39 lines
1.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{ $name := (.Get "name") -}}
{{- $opus := resources.GetMatch (printf "/a/%s.opus" $name) -}}
{{- $mp3 := resources.GetMatch (printf "/a/%s.mp3" $name) -}}
{{- $isTranscribed := false -}}
{{- /* preloading an in-page audio asset under 32 KiB is fine. */ -}}
{{- $shouldPreload := lt (len $opus.Content) 32768 -}}
<audio
controls=""
{{ with .Parent -}}
{{ if eq .Name "transcribed-image" -}}
{{- $isTranscribed = true -}}
{{ with .Get "id" -}}
aria-describedby="transcript-{{ . }}"
{{- end -}}
{{- end -}}
{{- end }}
{{ if $shouldPreload -}}
preload="auto"
{{- end -}}
>
{{ with $opus -}}
{{ $opus_src := . | resources.Fingerprint "md5" -}}
<source
src="{{ $opus_src.RelPermalink }}"
type='audio/ogg; codecs="opus"' />
{{ end -}}
{{ with $mp3 -}}
{{ $mp3_src := . | resources.Fingerprint "md5" -}}
<source
src="{{ $mp3_src.RelPermalink }}"
type="audio/mpeg" />
<p role="note">Your browser does not support HTML5 audio. Heres a <a
href="{{ $mp3_src.RelPermalink }}"
{{ if $isTranscribed -}}
itemprop="audio contentUrl"
{{- end -}}
>link to download the audio file <samp translate="no">{{ $name }}.mp3</samp></a> instead.</p>
{{ end -}}
</audio>{{- /* Strip trailing newline: https://github.com/gohugoio/hugo/issues/1753 */ -}}