{# The one way a page plays a sound: ▶, which turns to ⏸ while it plays, and
   the speed button beside it. `static/player.js` wires every player on the
   page.

   `seek` adds a bar to move through the sound, for a recording long enough to
   need one: the sound a whole exercise is about. `wave` draws the sound
   beside ▶, for a short one. `slow` false leaves the speed button out, where
   a speed would be read as part of what is made: on a card. `size` is
   `big` or `small`.

   `speed` alone is for a page that plays a sound itself, as shadowing does:
   the same button, the same speeds, driven by its own script. #}
{% import "icons.html" as icon %}

{% macro speed() %}
  <button type="button" class="speed" data-speeds='{{ speeds|tojson }}' disabled></button>
{% endmacro %}

{% macro sound(src, size="", seek=false, wave=false, slow=true) %}
  <div class="player{% if size %} {{ size }}{% endif %}">
    <audio preload="{{ 'metadata' if seek else 'none' }}" src="/media/{{ src }}"></audio>
    <button type="button" class="play" aria-label="▶">{{ icon.play() }}{{ icon.pause() }}</button>
    {% if wave %}
      <canvas class="wave"></canvas>
    {% endif %}
    {% if seek %}
      <input type="range" class="seek" min="0" max="0" step="0.1" value="0" disabled>
    {% endif %}
    {% if slow %}
      {{ speed() }}
    {% endif %}
  </div>
{% endmacro %}