Add optional narration players

templates/macros/narration-player.html

@@ -0,0 +1,37 @@
+{% 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 %}