Files
bqkc/.github/_includes/feature/audio.html
Nasir Anthony Montalvo 0a854da998 reconnect
2026-01-26 02:25:43 -06:00

38 lines
2.2 KiB
HTML

{% comment %}
Audio embed from an item's objectid or external link.
This include adds a audio embed to the page using the html "audio" element.
E.G. --> {% include feature/audio.html objectid="demo_003" %}
It requires an "objectid" with the include, which is used to find the audio details. Alternatively, a URL to an external audio file can be used in "objectid".
Options:
- "objectid" = several options below (required)
- an objectid of an audio item in this collection, e.g. "demo_003"
- an external link to an MP3 file hosted elsewhere, e.g. "https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3"
- a relative link to an MP3 file somewhere else in this repository, e.g. "/assets/example.mp3"
- "caption" = by default the figure include automatically adds the title of the item from your metadata. The caption option allows you to manually add a different caption, or give the value false for none. (optional)
Note: if you have issues make sure the item is a audio item.
Audio file may not play correctly from dev server on Chrome browser! It will work in production.
{%- endcomment -%}
{% if include.objectid contains "/" %}
{%- capture src -%}{{ include.objectid | relative_url }}{%- endcapture -%}
{%- capture audio_link -%}{{ src }}{%- endcapture -%}
{%- capture audio_caption -%}{{ include.caption }}{%- endcapture -%}
{% else %}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{%- capture audio_link -%}{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}{%- endcapture -%}
{%- capture src -%}{{ item.object_location | relative_url }}{% endcapture %}
{%- capture audio_caption -%}{% if include.caption %}{{ include.caption }}{% else %}{{ item.title }}{% endif %}{%- endcapture -%}
{% endif %}
<p class="text-center my-3">
<audio controls class="w-100">
<source src="{{ src }}" >
Your browser does not support the audio element.
</audio>
{% unless include.caption == false %}<small class="figure-caption"><a href="{{ audio_link }}">{{ audio_caption }}</a></small>{% endunless %}
</p>