如何将音频嵌入到 Jekyll 博客中？

Question

我正在用 Jekyll 写博客。

我想在我的 post 中嵌入一个简单的音频播放器，以便 reader 播放一个简短的 .wav 文件。

在 these instructions 之后，我下载了 open-embed.html 文件，将其保存在我的 _includes 文件夹下并按照建议修改了我的 default.html 布局文档。

现在我已经执行了上述步骤并将我的音频文件保存到 assets/audio/，我如何从我的 post 播放它？

Answer 1

将 open-embed.html 中出现的所有 .mp3 替换为 .wav。或者在结束 </script> 标记之前包含以下 JavaScript 函数，以防您将来可能需要使用 .mp3 文件。

    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();

记得在 post 模板或特定 post 文件的末尾包含 {% include open-embed.html %}（如果包含音频文件对您来说很少见，它可能会加快构建速度起来，我不知道）。

在post markdown 文件中，link 到你要播放的文件这样（必须作为一个单独的段落）：

Some text.

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

Some more text.

我不确定为什么我必须返回两个目录才能访问资产，因为我不必对包含的图像执行此操作。如果您有任何问题，请使用 Web 浏览器开发人员工具检查是否在网络上找到资源。

Answer 2

我不建议使用 open-embed.html 来完成嵌入音频等简单任务。

只是给出了实现相同任务的不同方法。

您可以轻松创建自己的部分作为

# _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" %}

如何将音频嵌入到 Jekyll 博客中？

How to embed audio into a Jekyll blog?

audio

wav

jekyll