How to embed audio into a Jekyll blog?

Question

I am writing a blog under Jekyll.

I would like to embed a simple audio player into one of my posts, in order to allow the reader to play a short .wav file.

Following these instructions, I downloaded the open-embed.html file, saved it under my _includes folder and modified my default.html layout document as suggested.

Now that I have performed the aforementioned steps and saved my audio file to assets/audio/, how can I play it from my post?

Answer 1

Replace all occurrences of .mp3 in open-embed.html with .wav. Or include the following JavaScript function before the closing </script> tag, in case you might want to use .mp3 files in the future.

    function wav_embed() {
    var p = document.getElementsByTagName('p');
    for (var i = 0; i < p.length; i++) {
        if (p[i].innerHTML.indexOf('.wav') !== -1) {
            var str = p[i].innerHTML.split('?');
            if (str.length == 1) str[1] = '';
            var str1 = str[1];
            str1 = str1.replace('&', '').replace('&', '');
            str1 = str1.replace('autoplay=1', '').replace('autoplay=0', '');
            str1 = str1.replace('loop=1', '').replace('loop=0', '');
            str1 = str1.replace('controls=0', '').replace('controls=1', '');

            if (
                str[0].lastIndexOf('.wav', str[0].length - 4) === str[0].length - 4 &&
                str1.length == 0
            ) {
                if (str[1].indexOf('autoplay=1') !== -1) var autoplay = 1;
                else var autoplay = 0;
                if (str[1].indexOf('loop=1') !== -1) var loop = 1;
                else var loop = 0;
                if (str[1].indexOf('controls=0') !== -1) var controls = 0;
                else var controls = 1;
                var newInnerHTML = '<audio';
                if (autoplay == 1) newInnerHTML += ' autoplay';
                if (loop == 1) newInnerHTML += ' loop';
                if (controls == 1) newInnerHTML += ' controls';
                newInnerHTML +=
                    '><source src="' +
                    str[0] +
                    '" type="audio/mpeg">Your browser does not support the audio element.</audio>';
                p[i].innerHTML = newInnerHTML;
            }
        }
    }
}
wav_embed();

Remember to include {% include open-embed.html %} either in the post template or at the end of the specific post file (If including an audio file is rare for you, it might speed building up, I don't know).

In the post markdown file, link to the file you want to play like so (Must be as a separate paragraph):

Some text.

../../assets/audio/file.wav

Some more text.

I'm not sure why I had to go two directories back to access assets because I don't have to do that with my included images. If you have any issues then use the web browser developer tools to check if resources are being found on the network.