web: prepare the next track only after the current one is playing and fully buffered

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/app.js

@@ -359,11 +359,24 @@ const Q = {
     E.load(srcs, posSec, play);
     Wave.load(e);
     Stems.prepare(e);
-    const nt = this.items[this.i + 1]?.t;
+    this.prepareNext();
-    if (nt) Stems.prepare(Stems.find(nt));
     UI.all(); save();
   },
 
+  // Transcode the next track only once this one is playing and fully buffered, so they don't compete.
+  prepareNext() {
+    clearInterval(this.nextTimer);
+    const nt = this.items[this.i + 1]?.t;
+    if (!nt) return;
+    const ready = () => E.playing && !E.buffering && E.els.length
+      && E.els.every(el => el.duration > 0 && el.buffered.length && el.buffered.end(el.buffered.length - 1) >= el.duration - 0.5);
+    this.nextTimer = setInterval(() => {
+      if (!ready()) return;
+      clearInterval(this.nextTimer);
+      Stems.prepare(Stems.find(nt));
+    }, 1000);
+  },
+
   next(auto = false) {
     if (auto && S.repeat === "one") { E.seek(0); E.play(); return; }
     if (this.i + 1 < this.items.length) { this.i++; this.start(0, true); }