Skip to content
Permalink
Browse files

Add audio shortcode, plus styling

  • Loading branch information...
Bart de Goede
Bart de Goede committed Oct 28, 2019
1 parent 353b0d0 commit 745e8ede74ee4d391fa16f648290210cc4296c61
Showing with 414 additions and 0 deletions.
  1. +26 −0 layouts/shortcodes/audio.html
  2. +20 −0 static/css/bart.degoe.de.css
  3. +368 −0 static/img/waveform.svg
@@ -0,0 +1,26 @@
<div id="player">
<div class="listen">Listen to this article instead</div>
<div id="waveform">
{{ $waveform := resources.Get "img/waveform.svg" | minify }}
<img src="{{ $waveform.Permalink }}" alt="waveform">
</div>
<audio controls
class="audio_controls {{ .Get "class" }}"
{{ with .Get "id" }}id="{{ . }}"{{ end }}
{{ with .Get "preload" }}preload="{{ . }}"{{ else }}preload="metadata"{{ end }}

style="{{ with .Get "style" }}{{ . | safeCSS }}; {{ end }}"
{{ with .Get "title" }}data-info-title="{{ . }}"{{ end }}
>
{{ if .Get "src" }}
<source {{ with .Get "src" }}src="{{ . }}"{{ end }}
{{ with .Get "type" }}type="audio/{{ . }}"{{ end }}>
{{ else if .Get "backup_src" }}
<source src="{{ .Get "backup_src" }}"
{{ with .Get "backup_type" }}type="audio/{{ . }}"{{ end }}
{{ with .Get "backup_codec" }}codecs="{{ . }}"{{ end }}
>
{{ end }}
Your browser does not support the audio element
</audio>
</div>
@@ -77,3 +77,23 @@ figcaption h4 {
input[type="search"] {
-webkit-appearance: textfield;
}

#player {
padding: 20px 20px;
margin: 20px 0;
border-radius: 3px;
box-shadow: 0 0 8px 0 #eee;
}

#player .listen {
color: #19BC9C;
margin-bottom: 7px;
}

#player #waveform img {
width: 100%;
}

#player audio {
width: 100%;
}

0 comments on commit 745e8ed

Please sign in to comment.
You can’t perform that action at this time.