Changeset 5e72413 in Klonkt for src/assets/js/audio-player.js

Timestamp:

08/22/2026 11:23:57 AM (2 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

1e194e4, fbacddc

Parents:

c0e463b

Message:

Seek over de hele band (shaer-tmyn, stap 4 en laatste)

De balk TOONDE al de hele band -- de teller rekent sinds c0e463b met de
trackduren -- maar aanklikken seekte binnen het lopende nummer. En de keten
houdt het lopende nummer plus een vooruit, dus op een band van twaalf nummers
reikte die balk in werkelijkheid tot nummer twee. Een balk die belooft wat hij
niet doet is erger dan geen balk.

bandPositie(ratio) rekent de verhouding om naar nummer + positie daarin, met
dezelfde duren als de teller. Ligt het doel in het lopende nummer, dan wordt de
positie gewoon verzet: geen herlaadsprong voor een paar seconden. Ligt het
verderop, dan zet hij pendingSeek en laadt dat nummer -- exact de weg die het
sessieherstel al gebruikt -- met de speelstand mee, zodat springen niet stiekem
start of stopt.

Er valt een hoorbaar gat bij zo'n sprong. Dat hoort bij spoelen naar een plek
die niet in de buffer zit, en het is eerlijker dan een balk die daar nooit komt.

DEZELFDE OMREKENING IS OOK DE ENIGE DIE OP iOS KAN: de blob-motor heeft geen
doorlopende tijdlijn, dus daar bestaat "seek over de keten" niet eens. Nu delen
beide motoren een model in plaats van twee.

Nagemeten op dev, klikken op vijf plekken van de balk (band van 373 s,
nummers van 103, 144 en 126 s):

10% -> 39 s, nummer 1 50% -> 189 s, nummer 2
25% -> 95 s, nummer 1 85% -> 319 s, nummer 3
95% -> 356 s, nummer 3

Steeds twee seconden voor op de verwachting, en dat is het doorspelen tijdens
het meten zelf.

audio-player v39.

Co-Authored-By: Claude Opus 5 <noreply@…>

File:

• src/assets/js/audio-player.js (modified) (1 diff)

src/assets/js/audio-player.js

@@ -885 +885 @@
   }
 
+  /**
+   * Waar op de BAND ligt deze verhouding? Geeft het nummer en de positie erin.
+   *
+   * Dit is de hele truc van hele-band-seek. De balk toont al de hele band (de
+   * teller rekent met de trackduren), maar aanklikken werkte binnen het lopende
+   * nummer -- en de keten houdt maar een nummer vooruit, dus een balk die de
+   * hele band belooft reikte in werkelijkheid tot nummer twee. Dat is erger dan
+   * geen balk, want het ziet eruit alsof het werkt.
+   *
+   * Omrekenen kan alleen met de echte duren, en die hebben we sinds de teller
+   * uit bandDuur()/bandOffset() komt. Dezelfde omrekening werkt op BEIDE
+   * motoren: de blob-motor heeft helemaal geen doorlopende tijdlijn, dus daar
+   * is dit niet alleen de beste maar de enige manier.
+   */
+  function bandPositie(ratio) {
+    const totaal = bandDuur();
+    if (!totaal) return null;
+    const doel = Math.max(0, Math.min(ratio, 1)) * totaal;
+    for (let i = 0; i < queue.length; i++) {
+      const start = bandOffset(i);
+      const eind = start + (Number(queue[i].duration) || 0);
+      if (doel < eind || i === queue.length - 1) {
+        return { index: i, binnen: Math.max(0, Math.min(doel - start, (Number(queue[i].duration) || 0) - 0.25)) };
+      }
+    }
+    return null;
+  }
+
   function attachSeek(seekEl) {
     seekEl.addEventListener('click', (e) => {
       const rect = seekEl.getBoundingClientRect();
       const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+
+      // BANDMODUS: de balk is de hele band, dus de klik ook.
+      const plek = tapeMode ? bandPositie(ratio) : null;
+      if (plek) {
+        if (plek.index === currentIndex) {
+          // Binnen het lopende nummer: gewoon verzetten, geen herlaadsprong.
+          if (useMse() && chain.length) {
+            const seg = currentSegment();
+            if (seg) { try { audio.currentTime = seg.start + plek.binnen; } catch (er) {} }
+          } else {
+            try { audio.currentTime = plek.binnen; } catch (er) {}
+          }
+          updatePositionState();
+          return;
+        }
+        // Een ander nummer: laden en er meteen in springen. pendingSeek is de
+        // bestaande weg daarvoor -- het sessieherstel doet precies dit -- en
+        // wordt toegepast zodra de metadata er is. Er valt een hoorbaar gat bij
+        // de sprong; dat hoort bij spoelen naar een plek die nog niet in de
+        // buffer zit, en is eerlijker dan een balk die daar niet komt.
+        pendingSeek = plek.binnen;
+        loadTrack(plek.index, !audio.paused);
+        return;
+      }
+
       if (useMse() && chain.length) {
         // Seek within the CURRENT track's segment of the chain timeline.