Make playback stop cancel scheduled notes

apps/theme_lab/static/app.js

@@ -4,7 +4,10 @@ const state = {
   selectedThemeId: null,
   currentSource: null,
   audioContext: null,
+  masterGain: null,
+  playbackSession: 0,
   scheduled: [],
+  activeMidiNotes: [],
   midiAccess: null,
   midiOutputId: "",
   composerSuggestTimer: null,
@@ -157,12 +160,33 @@ function midiToHz(pitch) {
 }
 
 function stopPlayback() {
+  state.playbackSession += 1;
+  const ctx = state.audioContext;
+  if (state.masterGain && ctx) {
+    try {
+      state.masterGain.gain.cancelScheduledValues(ctx.currentTime);
+      state.masterGain.gain.setValueAtTime(0, ctx.currentTime);
+    } catch {
+      // Already disconnected.
+    }
+    const oldMaster = state.masterGain;
+    window.setTimeout(() => {
+      try {
+        oldMaster.disconnect();
+      } catch {
+        // Already disconnected.
+      }
+    }, 60);
+    state.masterGain = null;
+  }
+
   for (const node of state.scheduled) {
     try {
       if (typeof node === "number") {
         window.clearTimeout(node);
       } else {
-        node.stop();
+        if (typeof node.stop === "function" && ctx) node.stop(ctx.currentTime);
+        if (typeof node.disconnect === "function") node.disconnect();
       }
     } catch {
       // Already stopped.
@@ -172,6 +196,10 @@ function stopPlayback() {
   const output = selectedMidiOutput();
   if (output) {
     if (typeof output.clear === "function") output.clear();
+    for (const note of state.activeMidiNotes) {
+      output.send([0x80 + note.channel, note.pitch, 0]);
+    }
+    state.activeMidiNotes = [];
     for (let channel = 0; channel < 16; channel += 1) {
       output.send([0xb0 + channel, 123, 0]);
       output.send([0xb0 + channel, 120, 0]);
@@ -234,24 +262,36 @@ async function refreshMidiOutputs() {
 
 function playMidiNotes(notes, bpm = 120, output) {
   stopPlayback();
+  const session = state.playbackSession;
   const secondsPerBeat = 60 / bpm;
-  const startAt = performance.now() + 70;
+  const startDelay = 70;
   for (const note of notes) {
     const pitch = Number(note.pitch);
     const velocity = Math.max(1, Math.min(127, Number(note.velocity || 72)));
-    const begin = startAt + Number(note.start_beat) * secondsPerBeat * 1000;
+    const channel = 0;
+    const begin = startDelay + Number(note.start_beat) * secondsPerBeat * 1000;
     const duration = Math.max(0.04, Number(note.duration_beats) * secondsPerBeat);
-    const end = begin + duration * 1000;
-    output.send([0x90, pitch, velocity], begin);
-    output.send([0x80, pitch, 0], end);
+    const noteOn = window.setTimeout(() => {
+      if (session !== state.playbackSession) return;
+      state.activeMidiNotes.push({ channel, pitch });
+      output.send([0x90 + channel, pitch, velocity]);
+    }, begin);
+    const noteOff = window.setTimeout(() => {
+      if (session !== state.playbackSession) return;
+      output.send([0x80 + channel, pitch, 0]);
+      state.activeMidiNotes = state.activeMidiNotes.filter((item) => item.channel !== channel || item.pitch !== pitch);
+    }, begin + duration * 1000);
+    state.scheduled.push(noteOn, noteOff);
   }
   const lastEnd = Math.max(
     0,
     ...notes.map((note) => (Number(note.start_beat) + Number(note.duration_beats)) * secondsPerBeat * 1000),
   );
   const timeout = window.setTimeout(() => {
+    if (session !== state.playbackSession) return;
     state.scheduled = state.scheduled.filter((item) => item !== timeout);
-  }, lastEnd + 200);
+    state.activeMidiNotes = [];
+  }, startDelay + lastEnd + 200);
   state.scheduled.push(timeout);
 }
 
@@ -263,15 +303,22 @@ async function playNotes(notes, bpm = 120) {
   }
 
   stopPlayback();
+  const session = state.playbackSession;
   if (!state.audioContext) {
     state.audioContext = new AudioContext();
   }
   const ctx = state.audioContext;
   if (ctx.state === "suspended") await ctx.resume();
+  if (session !== state.playbackSession) return;
+  const master = ctx.createGain();
+  master.gain.value = 1;
+  master.connect(ctx.destination);
+  state.masterGain = master;
   const secondsPerBeat = 60 / bpm;
   const startAt = ctx.currentTime + 0.06;
 
   for (const note of notes) {
+    if (session !== state.playbackSession) break;
     const osc = ctx.createOscillator();
     const gain = ctx.createGain();
     const begin = startAt + Number(note.start_beat) * secondsPerBeat;
@@ -283,7 +330,15 @@ async function playNotes(notes, bpm = 120) {
     gain.gain.setValueAtTime(0.0001, begin);
     gain.gain.exponentialRampToValueAtTime(0.14, begin + 0.015);
     gain.gain.exponentialRampToValueAtTime(0.0001, end);
-    osc.connect(gain).connect(ctx.destination);
+    osc.connect(gain).connect(master);
+    osc.addEventListener("ended", () => {
+      try {
+        osc.disconnect();
+        gain.disconnect();
+      } catch {
+        // Already disconnected.
+      }
+    });
     osc.start(begin);
     osc.stop(end + 0.02);
     state.scheduled.push(osc);