38 lines
1.7 KiB
HTML
38 lines
1.7 KiB
HTML
{% macro narration_player(record) %}
|
||
{% set narration = record.attachments.get('narration.mp3') %}
|
||
{% if narration %}
|
||
<section class="narration-player" data-narration-player aria-label="Narrated version">
|
||
<h2 class="narration-title">Narrated version</h2>
|
||
<audio class="narration-audio" controls preload="metadata" aria-label="Narration of {{ record.title }}">
|
||
<source src="{{ narration|url }}" type="audio/mpeg">
|
||
Your browser does not support audio playback. <a href="{{ narration|url }}">Download the narration</a>.
|
||
</audio>
|
||
<div class="narration-controls" data-narration-controls hidden>
|
||
<button class="narration-toggle" type="button" data-narration-toggle aria-label="Play narration">
|
||
<span aria-hidden="true" data-narration-toggle-icon>▶</span>
|
||
</button>
|
||
<div class="narration-timeline">
|
||
<input type="range" min="0" max="0" value="0" step="0.1" data-narration-progress aria-label="Seek through narration" aria-valuetext="0:00 of unknown duration">
|
||
<output class="narration-time" aria-live="off">
|
||
<span data-narration-current>0:00</span> / <span data-narration-duration>–:––</span>
|
||
</output>
|
||
</div>
|
||
</div>
|
||
<div class="narration-details">
|
||
<p>Narrated by the author</p>
|
||
<label>
|
||
<span>Playback speed</span>
|
||
<select class="narration-speed" data-narration-speed aria-label="Playback speed">
|
||
<option value="0.75">0.75×</option>
|
||
<option value="1" selected>1×</option>
|
||
<option value="1.25">1.25×</option>
|
||
<option value="1.5">1.5×</option>
|
||
<option value="1.75">1.75×</option>
|
||
<option value="2">2×</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
{% endif %}
|
||
{% endmacro %}
|