Set a background on wavesurfer and clear it.

Hopefully fixes ghost waveforms and scroll bars

src/mixer/audio.ts

@@ -97,6 +97,7 @@ class Player extends ((PlayerEmitter as unknown) as { new (): EventEmitter }) {
       audioContext: engine.audioContext,
       container: "#waveform-" + player.toString(),
       waveColor: "#CCCCFF",
+      backgroundColor: "#FFFFFF",
       progressColor: "#9999FF",
       backend: "MediaElementWebAudio",
       barWidth: 2,

src/mixer/state.ts

@@ -294,6 +294,14 @@ export const load = (
 
   console.log("loading");
 
+  let waveform = document.getElementById("waveform-" + player.toString());
+  if (waveform == null) {
+    throw new Error();
+  }
+  waveform.innerHTML = ""; // clear previous (ghost) wavesurfer
+  // wavesurfer also sets the background white, remove for progress bar to work.
+  waveform.style.removeProperty("background");
+
   try {
     const signal = loadAbortControllers[player].signal; // hang on to the signal, even if its controller gets replaced
     const result = await fetch(url, {