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.

assets/css/main.css

@@ -360,6 +360,10 @@ div[itemprop="articleBody"] img {
 	max-width: 100%;
 }
 
+audio {
+	width: 100%;
+}
+
 /* Some images look blurry when scaled; this makes them easier to
  * read. */
 .pix {

layouts/shortcodes/audio.html

@@ -0,0 +1,39 @@
+{{ $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. Here’s 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 */ -}}

layouts/shortcodes/transcribed-image-transcript.html

@@ -1,14 +1,25 @@
-{{ with .Parent -}}
+{{- $captionType := "embeddedTextCaption" -}}
 {{- $type := "image" -}}
 {{- with .Get "type" -}}
 	{{- $type = . -}}
 {{- end -}}
+{{ with .Parent -}}
+	{{- with .Get "type" -}}
+		{{- $type = . -}}
+	{{- end -}}
+	{{- if eq .Name "transcribed-audio" -}}
+		{{- $captionType = "transcript" -}}
+	{{- end -}}
 <details>
 <summary>Toggle {{ $type }} <span itemprop="accessibilityFeature">transcript</span></summary>
 <section id="transcript-{{ .Get "id" }}">
+{{ if eq (.Get "hlevel") "3" -}}
+<h4>{{ $type | humanize }} transcript</h4>
+{{- else -}}
 <h5>{{ $type | humanize }} transcript</h5>
+{{- end -}}
 {{- end }}
-	<div itemprop="embeddedTextCaption">
+	<div itemprop="{{ $captionType }}">
 		{{ .Inner | markdownify | safeHTML }}
 </div>
 </section>

layouts/shortcodes/transcribed-image.html

@@ -1,14 +1,24 @@
 {{- $type := "image" -}}
 {{- $itemtype := "CreativeWork" -}}
+{{- $itemtype2 := "ImageObject" -}}
+{{- $itemprop := "mentions" -}}
 {{- with .Get "type" -}}
-{{- $type = . -}}
+	{{- $type = . -}}
 {{- end -}}
 {{- with .Get "itemtype" -}}
-{{- $itemtype = . -}}
+	{{- $itemtype = . -}}
 {{- end -}}
+{{- with .Get "itemtype2" -}}
+	{{- $itemtype2 = . -}}
+{{- end -}}
+{{- with .Get "itemprop" -}}
+	{{- $itemprop = . -}}
+{{- end -}}
+<hr />
 <section
 	aria-label="{{ $type }}, caption, and transcript"
-	itemprop="mentions" itemscope="" itemtype="https://schema.org/{{ $itemtype }} https://schema.org/ImageObject"
+	itemprop="{{ $itemprop }}" itemscope="" itemtype="https://schema.org/{{ $itemtype }} https://schema.org/{{ $itemtype2 }}"
 	id="{{ .Get "id" }}" tabindex="-1">
 {{ .Inner | markdownify | safeHTML }}
 </section>
+<hr />