How to embed audio into a Jekyll blog?

user_6440589 0
Viewed 881

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?

jekyll wav audio
2 Answers

I wouldn't recommend using open-embed.html for achieving a simple task like embedding audio.

Just giving a different approach to achieve the same task.

You can easily create your own partial as

# _include/embed-audio.html
<audio controls>
  <source src="{{ include.src }}" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

# Use in the post as
{% include embed-audio.html src="/assets/audio/<audio-source-name>.wav" %}
user_11205300

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.

user_112134880
Related