Add autoplay URL param and Copy share link button

A presence-only ?play param triggers playback on page load. Modern
browsers block AudioContext.resume outside of a user gesture, so the
implementation tries immediately AND attaches a one-time fallback on
the first click or keypress, with the fallback no-opping if audio is
already running.

The flag has to be captured before refresh runs, since refresh calls
updateUrlParams which strips presence-only params via replaceState.

The new Copy share link button in the transport row composes the
current URL and appends play, copies it to the clipboard, and shows
brief Copied feedback. Recipients land on the same envelope and sound
with autoplay queued.

Author: kieranhj

index.html

@@ -46,6 +46,7 @@ <h2>Visualisation</h2>
             <div class="transport">
               <button id="play">Play</button>
               <button id="stop">Stop</button>
+              <button id="share-link" title="Copy a shareable URL with auto-play that reproduces the current envelope and sound">Copy share link</button>
               <button id="run-emulator" title="Open bbc.xania.org with the current ENVELOPE and SOUND auto-running">Run in BBC emulator ↗</button>
             </div>
             <h3>Presets</h3>

src/audio.ts

@@ -72,6 +72,11 @@ export function stop(): void {
   playDuration = null;
 }
 
+/** True if the AudioContext exists and is actively producing audio. */
+export function audioContextIsRunning(): boolean {
+  return ctx?.state === "running";
+}
+
 /**
  * Fraction (0..1) of the way through the currently-playing note, or null
  * when nothing is playing. Used to drive the visualiser playhead.

src/main.ts

@@ -9,7 +9,7 @@ import {
   type Envelope,
 } from "./envelope";
 import { render } from "./visualizer";
-import { play, playheadFraction, stop } from "./audio";
+import { audioContextIsRunning, play, playheadFraction, stop } from "./audio";
 import { PRESETS, type Preset } from "./presets";
 
 interface FieldSpec {
@@ -61,6 +61,9 @@ const SOUND_FIELDS: { key: keyof SoundParams; code: string; label: string; min:
 const env: Envelope = { ...DEFAULT_ENVELOPE };
 const sound: SoundParams = { ...DEFAULT_SOUND };
 
+// Capture before refresh() rewrites the URL via history.replaceState (which
+// strips presence-only params like `play`).
+const autoplayRequested = new URLSearchParams(location.search).has("play");
 loadFromUrlParams();
 
 const canvas = document.getElementById("viz") as HTMLCanvasElement;
@@ -311,6 +314,25 @@ document.getElementById("stop")!.addEventListener("click", () => {
   render(canvas, currentSamples, sound.pitch, null);
 });
 
+document.getElementById("share-link")!.addEventListener("click", async (e) => {
+  // Build a URL that reproduces current state and triggers autoplay on land.
+  // location.search already has the live env/sound params (refresh keeps it
+  // in sync); we just append the presence-only `play`.
+  const search = location.search ? `${location.search}&play` : "?play";
+  const shareUrl = `${location.origin}${location.pathname}${search}`;
+  const btn = e.currentTarget as HTMLButtonElement;
+  const originalText = btn.textContent;
+  try {
+    await navigator.clipboard.writeText(shareUrl);
+    btn.textContent = "Copied!";
+  } catch {
+    // Fallback: prompt so the user can copy manually.
+    window.prompt("Share URL:", shareUrl);
+    return;
+  }
+  setTimeout(() => { btn.textContent = originalText; }, 1500);
+});
+
 document.getElementById("run-emulator")!.addEventListener("click", () => {
   // jsbeeb (bbc.xania.org) takes URL-encoded BASIC via embedBasic, with
   // &autorun to type RUN after tokenising. Two numbered lines are enough:
@@ -338,3 +360,23 @@ for (const btn of document.querySelectorAll<HTMLButtonElement>(".copy-btn")) {
 }
 
 refresh();
+
+// `?play` (presence-only) starts playback automatically. Modern browsers
+// block AudioContext.resume() outside of a user gesture, so we both try
+// immediately AND attach a one-time fallback that fires on the first user
+// interaction. The fallback no-ops if the immediate attempt already kicked
+// audio into the running state.
+if (autoplayRequested) {
+  play(currentSamples, sound.pitch);
+  animatePlayhead();
+  const playOnGesture = (): void => {
+    if (!audioContextIsRunning()) {
+      play(currentSamples, sound.pitch);
+      animatePlayhead();
+    }
+    document.removeEventListener("click", playOnGesture);
+    document.removeEventListener("keydown", playOnGesture);
+  };
+  document.addEventListener("click", playOnGesture);
+  document.addEventListener("keydown", playOnGesture);
+}

src/style.css

@@ -113,7 +113,7 @@ code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
 }
 .field input:focus { outline: 1px solid #58a6ff; }
 
-#play, #stop, #run-emulator {
+#play, #stop, #share-link, #run-emulator {
   color: white;
   border: none;
   border-radius: 4px;
@@ -126,7 +126,9 @@ code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
 #play:hover { background: #2ea043; }
 #stop { background: #6e7681; }
 #stop:hover { background: #8b949e; }
-#run-emulator { background: #1f6feb; margin-left: auto; margin-right: 0; }
+#share-link { background: #30363d; margin-left: auto; }
+#share-link:hover { background: #484f58; }
+#run-emulator { background: #1f6feb; margin-right: 0; }
 #run-emulator:hover { background: #388bfd; }
 
 .basic-row {