Add embedded audio - electricbookworks/constitution GitHub Wiki

We embed audio using the HTML5 <audio> tag. This is the easiest, most efficient way to embed audio. (We investigated using online hosting/streaming services like Soundcloud, but that would involve long delays uploading, and tweaking their players to fit in our UI.)

So far, the raw files from the CSIR are large .wav files. So we first batch-convert them to AAC in MP4 (for max browser compatibility with least onerous licensing concerns), using low-quality settings.

I've found it easiest to use Adobe Media Encoder. If you don't have access to that, it's possible though more complicated to use FFMPEG or Audacity.

Save the files in the given language's audio folder. E.g. constitution/en/audio.

To place an audio file in markdown, simply use this tag:

{{ site.data.snip.mp4 | replace: "clip", "filename" }}

where filename is the name of the audio file without the extension. (Makes it fast to paste in lots of these quickly.)

In the background, that tag will fetch an <audio> code snippet from _data and insert the correct filename.

Right now, this snippet is for .mp4 files. (Hence the mp4 in the tag.) We could add alternatives later if needed.