{% 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 %}