Move transport into viz panel, fix playhead disappearing on restart

Play/Stop buttons now sit between the canvas and the Presets row in the
visualisation panel, where they're closest to what they control.

Bug fix: pressing Play while a note was sweeping caused the playhead
to vanish. The previous oscillator's onended handler was unconditionally
clearing the shared playStart/playDuration state — even after the new
note had already populated it. Guard the clear so it only fires when
the ended oscillator is still the active one.

Author: kieranhj

index.html

@@ -36,15 +36,19 @@ <h2>Sound parameters</h2>
               <input type="text" class="basic-line" id="sound-line" spellcheck="false" autocomplete="off" />
               <button class="copy-btn" data-copy="sound-line" title="Copy SOUND statement" aria-label="Copy SOUND statement"></button>
             </div>
-            <button id="play">Play</button>
-            <button id="stop">Stop</button>
           </section>
         </div>
 
         <div class="viz-col">
           <section class="panel viz-panel">
             <h2>Visualisation</h2>
             <canvas id="viz" width="900" height="320"></canvas>
+            <div class="transport">
+              <button id="play">Play</button>
+              <button id="stop">Stop</button>
+            </div>
+            <h3>Presets</h3>
+            <div class="presets" id="presets"></div>
           </section>
         </div>
       </div>

src/audio.ts

@@ -49,9 +49,14 @@ export function play(samples: Sample[], basePitch: number): void {
   playStart = t0;
   playDuration = samples.length * CS;
   osc.onended = () => {
-    if (activeNodes && activeNodes.osc === osc) activeNodes = null;
-    playStart = null;
-    playDuration = null;
+    // Only clear shared playback state if this osc is still the active one;
+    // otherwise a freshly-started note would have its timing wiped when the
+    // previously-stopped osc's onended fired late.
+    if (activeNodes && activeNodes.osc === osc) {
+      activeNodes = null;
+      playStart = null;
+      playDuration = null;
+    }
   };
 }
 

src/main.ts

@@ -10,6 +10,7 @@ import {
 } from "./envelope";
 import { render } from "./visualizer";
 import { play, playheadFraction, stop } from "./audio";
+import { PRESETS, type Preset } from "./presets";
 
 interface FieldSpec {
   key: keyof Envelope;
@@ -189,6 +190,33 @@ soundLine.addEventListener("input", () => {
   refresh("sound");
 });
 
+function loadPreset(p: Preset): void {
+  Object.assign(env, p.env);
+  Object.assign(sound, p.sound);
+  for (const f of ENV_FIELDS) {
+    const input = envInputs.get(f.key);
+    if (input) input.value = String(env[f.key]);
+  }
+  for (const f of SOUND_FIELDS) {
+    const input = soundInputs.get(f.key);
+    if (input) input.value = String(sound[f.key]);
+  }
+  envelopeLine.classList.remove("invalid");
+  soundLine.classList.remove("invalid");
+  refresh();
+}
+
+const presetsContainer = document.getElementById("presets") as HTMLElement;
+for (const p of PRESETS) {
+  const btn = document.createElement("button");
+  btn.className = "preset-btn";
+  btn.type = "button";
+  btn.textContent = p.name;
+  btn.title = p.description;
+  btn.addEventListener("click", () => loadPreset(p));
+  presetsContainer.appendChild(btn);
+}
+
 document.getElementById("play")!.addEventListener("click", () => {
   play(currentSamples, sound.pitch);
   animatePlayhead();

src/presets.ts

@@ -0,0 +1,104 @@
+import type { Envelope } from "./envelope";
+
+export interface SoundPreset {
+  channel: number;
+  amplitude: number;
+  pitch: number;
+  duration: number;
+}
+
+export interface Preset {
+  name: string;
+  description: string;
+  env: Envelope;
+  sound: SoundPreset;
+}
+
+// `T` values >= 128 enable auto-repeat of the pitch envelope (bit 7 set).
+// 132 = 128 + 4 cs per step, 134 = 128 + 6, etc.
+export const PRESETS: Preset[] = [
+  {
+    name: "Piano",
+    description: "Quick attack, gentle decay, slow fade through sustain",
+    env: { n: 1, t: 1, pi1: 0, pi2: 0, pi3: 0, pn1: 0, pn2: 0, pn3: 0,
+           aa: 127, ad: -2, as: -1, ar: -10, ala: 126, ald: 80 },
+    sound: { channel: 1, amplitude: 1, pitch: 100, duration: 40 },
+  },
+  {
+    name: "Pluck",
+    description: "Snappy string-like pluck",
+    env: { n: 1, t: 1, pi1: 0, pi2: 0, pi3: 0, pn1: 0, pn2: 0, pn3: 0,
+           aa: 127, ad: -8, as: -1, ar: -20, ala: 126, ald: 40 },
+    sound: { channel: 1, amplitude: 1, pitch: 100, duration: 30 },
+  },
+  {
+    name: "Bell",
+    description: "Sharp attack, long ringing decay",
+    env: { n: 1, t: 1, pi1: 0, pi2: 0, pi3: 0, pn1: 0, pn2: 0, pn3: 0,
+           aa: 127, ad: -1, as: -1, ar: -8, ala: 126, ald: 110 },
+    sound: { channel: 1, amplitude: 1, pitch: 130, duration: 80 },
+  },
+  {
+    name: "Pad",
+    description: "Slow rising drone",
+    env: { n: 1, t: 1, pi1: 0, pi2: 0, pi3: 0, pn1: 0, pn2: 0, pn3: 0,
+           aa: 5, ad: -1, as: 0, ar: -3, ala: 100, ald: 90 },
+    sound: { channel: 1, amplitude: 1, pitch: 100, duration: 100 },
+  },
+  {
+    name: "Bass",
+    description: "Punchy low-end thump",
+    env: { n: 1, t: 1, pi1: 0, pi2: 0, pi3: 0, pn1: 0, pn2: 0, pn3: 0,
+           aa: 80, ad: -3, as: -1, ar: -15, ala: 110, ald: 70 },
+    sound: { channel: 1, amplitude: 1, pitch: 60, duration: 30 },
+  },
+  {
+    name: "Drum",
+    description: "Short percussive hit",
+    env: { n: 1, t: 1, pi1: 0, pi2: 0, pi3: 0, pn1: 0, pn2: 0, pn3: 0,
+           aa: 127, ad: -30, as: -20, ar: -30, ala: 126, ald: 40 },
+    sound: { channel: 1, amplitude: 1, pitch: 30, duration: 5 },
+  },
+  {
+    name: "Vibrato",
+    description: "Looping ±½-semitone wobble around the note",
+    env: { n: 1, t: 130, pi1: 1, pi2: -1, pi3: 1, pn1: 2, pn2: 4, pn3: 2,
+           aa: 127, ad: -2, as: -1, ar: -10, ala: 126, ald: 100 },
+    sound: { channel: 1, amplitude: 1, pitch: 100, duration: 60 },
+  },
+  {
+    name: "Trill",
+    description: "Looping alternation between two notes a whole step apart",
+    env: { n: 1, t: 136, pi1: 8, pi2: -8, pi3: 0, pn1: 1, pn2: 1, pn3: 0,
+           aa: 127, ad: -2, as: 0, ar: -10, ala: 126, ald: 100 },
+    sound: { channel: 1, amplitude: 1, pitch: 100, duration: 60 },
+  },
+  {
+    name: "Siren",
+    description: "Looping octave sweep up and back down",
+    env: { n: 1, t: 132, pi1: 2, pi2: -2, pi3: 0, pn1: 24, pn2: 24, pn3: 0,
+           aa: 127, ad: -2, as: 0, ar: -2, ala: 126, ald: 100 },
+    sound: { channel: 1, amplitude: 1, pitch: 80, duration: 80 },
+  },
+  {
+    name: "Arpeggio",
+    description: "Looping major triad: root → 3rd → 5th",
+    env: { n: 1, t: 138, pi1: 16, pi2: 12, pi3: -28, pn1: 1, pn2: 1, pn3: 1,
+           aa: 127, ad: -2, as: 0, ar: -10, ala: 126, ald: 100 },
+    sound: { channel: 1, amplitude: 1, pitch: 80, duration: 100 },
+  },
+  {
+    name: "Laser",
+    description: "Fast downward pitch sweep — classic zap",
+    env: { n: 1, t: 1, pi1: -12, pi2: -4, pi3: -1, pn1: 8, pn2: 8, pn3: 8,
+           aa: 127, ad: -1, as: -2, ar: -30, ala: 126, ald: 100 },
+    sound: { channel: 1, amplitude: 1, pitch: 200, duration: 20 },
+  },
+  {
+    name: "Wobble",
+    description: "Slow looping pitch wobble, sustained pad timbre",
+    env: { n: 1, t: 140, pi1: 2, pi2: -2, pi3: 0, pn1: 4, pn2: 4, pn3: 0,
+           aa: 20, ad: -1, as: 0, ar: -5, ala: 110, ald: 90 },
+    sound: { channel: 1, amplitude: 1, pitch: 90, duration: 100 },
+  },
+];

src/style.css

@@ -158,3 +158,27 @@ canvas {
   display: block;
   border-radius: 4px;
 }
+
+.transport {
+  display: flex;
+  gap: 8px;
+  margin: 12px 0;
+}
+
+.presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.preset-btn {
+  background: #21262d;
+  color: #c9d1d9;
+  border: 1px solid #30363d;
+  border-radius: 4px;
+  padding: 4px 10px;
+  margin: 0;
+  font: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+.preset-btn:hover { background: #30363d; border-color: #58a6ff; }