mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
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.
This commit is contained in:
parent
d543ff8318
commit
a8057aa8e8
4 changed files with 69 additions and 5 deletions
|
@ -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 {
|
||||
|
|
39
layouts/shortcodes/audio.html
Normal file
39
layouts/shortcodes/audio.html
Normal file
|
@ -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 */ -}}
|
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
Loading…
Reference in a new issue