playing.html

 1{{define "playing"}}
 2<div class="now-playing">
 3  <span class="eq"><i></i><i></i><i></i></span> Now playing
 4</div>
 5<audio id="clip" src="/audio?n={{.Nonce}}" autoplay></audio>
 6<script>
 7  (function () {
 8    window.clipNonce = {{.Nonce}};
 9    var a = document.getElementById('clip');
10    if (a) { a.play().catch(function () {}); }
11    var t = document.getElementById('g-title');
12    if (t) { t.focus(); }
13  })();
14</script>
15<div class="audio-controls">
16  <button type="button" onclick="replayClip()">Replay</button>
17  <button type="button" onclick="longerClip()" title="Hear a longer 4s clip — counts as a hint and halves this round's points">Extended clip</button>
18</div>
19<form class="guess" hx-post="/guess" hx-target="#game" hx-swap="innerHTML">
20  <div class="field">
21    <label for="g-title">Title</label>
22    <input id="g-title" name="title" type="text" autocomplete="off">
23  </div>
24  <div class="field">
25    <label for="g-album">Album</label>
26    <input id="g-album" name="album" type="text" autocomplete="off">
27  </div>
28  <div class="field">
29    <label for="g-artist">Artist</label>
30    <input id="g-artist" name="artist" type="text" autocomplete="off">
31  </div>
32  <button type="submit">Submit guess</button>
33</form>
34{{end}}