Light-weight no-JS audio embedding shortcode

[Christopher Arndt]

Hi all,

for my new Nikola-based site (still in development), I created a template-based shortcode to embed an audio file with a HTML 5 audio element and add download links for the audio in the selected formats:

https://gist.github.com/SpotlightKid/70f3ccdfacd9cfb091941a91f349924f

Put it in shortcodes/audio.tmpl and use it like this:

{{% audio src=http://example.com/my-track.mp3 formats=mp3,ogg %}}

or:

{{% audio src=http://example.com/my-track.mp3 formats=mp3,ogg formats=mp3,ogg %}}
Sorry, your browser does not seem to support the HTML 5 audio element
{{% /audio %}}

This will output something like this:

<div class="audio-embed">
  <audio controls>
    <source src="http://example.com/my-track.mp3" type="audio/mp3"></source>
    <source src="http://example.com/my-track.ogg" type="audio/ogg"></source>
    <p>Sorry, your browser does not seem to support the HTML 5 audio element</p>
  </audio>

  <p class="download-links"><strong>Download:</strong>
    <a href="http://example.com/my-track.mp3">MP3</a> |
    <a href="http://example.com/my-track.ogg">OGG</a>
  </p>
</div>

Share & Enjoy!

[Chris Warrick]

> --
> You received this message because you are subscribed to the Google Groups
> "nikola-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to nikola-discus...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

Awesome! This should become a plugin or otherwise be kept somewhere.

https://github.com/getnikola/nikola/issues/2318

--
Chris Warrick <https://chriswarrick.com/>
PGP: 5EAAEA16

[Christopher Arndt]

On Sunday, April 17, 2016 at 10:04:15 AM UTC+2, Chris Warrick wrote:

Awesome! This should become a plugin or otherwise be kept somewhere.

I thought about writing a proper plugin instead, which would make certain things easier, e.g. path mangling (since you can import stdlib modules) and argument handling.

But I wanted to try what you can do with template-based shortcodes and I think they are a pretty neat and handy feature. There are some things that I would love to see added, e.g. positional, non-keyword arguments and maybe access to global template context. I'll open separate discussion threads or issues about those...


Chris