@moood/render 0.0.0 → 0.1.3

package/engine/kit.js

@@ -1,142 +1,142 @@
-// What a scene's code shares, and the tools for moving things well.
-//   anim — the animator's toolkit, for every scene: easing curves (a movement starts and stops as
-//     a body does), angles the short way round, smooth noise and steady random (life that doesn't
-//     repeat, the same every time), a two-bone joint (an elbow, a knee: the hand or the foot set
-//     where it must be), poses mixed by weight.
-//   the world's modules — code the world's scenes share (its people, its horses, its things):
-//     modules/<name>.js in the world's repository, the body of function (anim, data) that returns
-//     what it offers (data: modules/<name>.data.json, if there is one). A scene lists the ones it
-//     uses (spec.modules) and gets them as kit.<name>, as they are at the commit it is shown at.
-//   the scene's lib — code its own elements and scripts share: spec.lib, the body of
-//     function (anim, kit) that returns what it offers.
-// Painting code sees them as e.anim, e.kit, e.lib; scripts as scene.anim, scene.kit, scene.lib.
-// Where a spec's modules come from (the page says, with the spec):
-//   {world, refs} — the world's id and the modules by their content's sha ({name: {code, data}},
-//     as the scene's payload has them: the commit it shows); a module the refs don't name (a draft
-//     that has just listed it) is the world's main's now (/api/worlds/<world>/modules). The files
-//     are read by /api/worlds/<world>/blobs/<sha> — the same for good, fetched once.
-//   {texts} — the modules themselves, {name: {code, data}} (the renderer is given them).
-const MooodKit = (() => {
-  const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
-  const mix = (a, b, u) => a + (b - a) * u;
-  // u (0…1) of the way between a and b that v is, clamped
-  const span = (v, a, b) => clamp((v - a) / (b - a));
-  // easing: how the 0…1 of a movement's time becomes the 0…1 of its way
-  const ease = {
-    linear: u => u,
-    smooth: u => (1 - Math.cos(Math.PI * u)) / 2,              // starts and stops gently (the default)
-    in: u => u * u * u,                                         // gathers speed, ends at full speed
-    out: u => 1 - Math.pow(1 - u, 3),                           // sets off at once, settles
-    inOut: u => (u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2),
-    back: u => { const c = 1.70158; return 1 + (c + 1) * Math.pow(u - 1, 3) + c * Math.pow(u - 1, 2); }, // a little past, and back
-    spring: u => (u >= 1 ? 1 : 1 - Math.exp(-6 * u) * Math.cos(9 * u)),               // overshoots, wobbles, rests
-    anticipate: u => { const c = 1.4; return u * u * ((c + 1) * u - c); },              // back a little first, then go
-  };
-  const easeOf = e => (typeof e === 'function' ? e : ease[e] || ease.smooth);
-  // angles (radians): the short way round from a to b
-  const turn = (a, b, u) => { let d = ((b - a) % (2 * Math.PI) + 3 * Math.PI) % (2 * Math.PI) - Math.PI; return a + d * u; };
-  // steady random: the same n gives the same 0…1, however many other calls came before
-  const hash = (n, seed = 0) => { let h = Math.imul((n * 374761393 + seed * 668265263) | 0, 1274126177); h = (h ^ (h >>> 13)) >>> 0; h = Math.imul(h, 1103515245) >>> 0; return ((h ^ (h >>> 16)) >>> 0) / 4294967296; };
-  // smooth noise along x (−1…1): for breathing, swaying, drifting that never repeats
-  const noise = (x, seed = 0) => { const i = Math.floor(x), f = x - i, s = f * f * (3 - 2 * f); return mix(hash(i, seed) * 2 - 1, hash(i + 1, seed) * 2 - 1, s); };
-  // a few octaves of it, slower ones stronger
-  const drift = (x, seed = 0) => noise(x, seed) * 0.6 + noise(x * 2.1 + 7, seed + 1) * 0.3 + noise(x * 4.3 + 13, seed + 2) * 0.1;
-  // a two-bone joint: from the root (x0, y0) to the end (x1, y1) with bones a and b; bend 1 or −1 —
-  // which side the joint goes. Returns the joint [x, y] (the end out of reach: the limb straight toward it)
-  const joint = (x0, y0, x1, y1, a, b, bend = 1) => {
-    const dx = x1 - x0, dy = y1 - y0, d = Math.min(Math.hypot(dx, dy), a + b - 1e-6), ang = Math.atan2(dy, dx);
-    const k = clamp((a * a + d * d - b * b) / (2 * a * d || 1), -1, 1), off = Math.acos(k) * bend;
-    return [x0 + Math.cos(ang + off) * a, y0 + Math.sin(ang + off) * a];
-  };
-  // poses mixed: pose objects (numbers, or nested objects/arrays of them) weighted [[pose, weight], …]
-  const blend = list => {
-    const total = list.reduce((s, [, w]) => s + w, 0) || 1, [first] = list[0];
-    const go = (sel) => {
-      const v0 = sel(first);
-      if (typeof v0 === 'number') return list.reduce((s, [p, w]) => s + (sel(p) ?? v0) * w, 0) / total;
-      if (Array.isArray(v0)) return v0.map((_, i) => go(p => sel(p)?.[i]));
-      if (v0 && typeof v0 === 'object') return Object.fromEntries(Object.keys(v0).map(k => [k, go(p => sel(p)?.[k])]));
-      return v0;
-    };
-    return go(p => p);
-  };
-  const anim = Object.freeze({ clamp, mix, span, ease, easeOf, turn, hash, noise, drift, joint, blend });
-
-  const report = (who, err) => (window.__mooodErrors = window.__mooodErrors || []).push(`${who}: ${err && err.message || err}`);
-  // files by their content's sha (the same for good), modules made from them, libs made: once each
-  const files = new Map(), made = new Map(), libs = new Map(), mains = new Map();
-  const fileOf = (world, sha) => {
-    if (!files.has(sha)) files.set(sha, fetch(`/api/worlds/${world}/blobs/${sha}`).then(r => (r.ok ? r.text() : Promise.reject(new Error(`${sha}: ${r.status}`)))));
-    return files.get(sha);
-  };
-  const mainOf = world => {
-    if (!mains.has(world)) mains.set(world, fetch(`/api/worlds/${world}/modules`).then(r => (r.ok ? r.json() : {})).catch(() => ({})));
-    return mains.get(world);
-  };
-  function make(name, key, code, data) {
-    if (!made.has(key)) {
-      let value = {};
-      try { value = new Function('anim', 'data', String(code))(anim, data) || {}; } catch (err) { report(`module ${name}`, err); }
-      made.set(key, value);
-    }
-    return made.get(key);
-  }
-  // a spec's modules, as `source` says: {mods: {name: what it offers}, key: which they are} — or a
-  // promise of it
-  function modulesOf(spec, source) {
-    const names = [...new Set((Array.isArray(spec?.modules) ? spec.modules : []).filter(n => typeof n === 'string'))].sort();
-    const out = (mods, keys) => ({ mods, key: keys.join('\n') });
-    if (!names.length) return out({}, []);
-    if (source?.texts) {
-      const mods = {}, keys = [];
-      for (const n of names) {
-        const m = source.texts[n];
-        if (m?.code == null) { report(`module ${n}`, 'not in this world'); continue; }
-        const key = `${n} ${m.code} ${JSON.stringify(m.data ?? null)}`;
-        mods[n] = make(n, key, m.code, m.data ?? null); keys.push(key);
-      }
-      return out(mods, keys);
-    }
-    const world = source?.world;
-    if (world == null) { report('modules', 'the page did not say whose they are'); return out({}, []); }
-    const keyOf = (n, r) => `${n} ${r.code} ${r.data}`;
-    const built = refs => {
-      const mods = {}, keys = [];
-      for (const n of names) if (refs[n]?.code && made.has(keyOf(n, refs[n]))) { mods[n] = made.get(keyOf(n, refs[n])); keys.push(keyOf(n, refs[n])); }
-      return out(mods, keys);
-    };
-    const refs0 = source.refs || {};
-    if (names.every(n => refs0[n]?.code && made.has(keyOf(n, refs0[n])))) return built(refs0);
-    return (names.every(n => refs0[n]?.code) ? Promise.resolve(refs0) : mainOf(world).then(now => ({ ...now, ...refs0 }))).then(async refs => {
-      await Promise.all(names.map(async n => {
-        const r = refs[n];
-        if (!r?.code) { report(`module ${n}`, 'not in this world'); return; }
-        if (made.has(keyOf(n, r))) return;
-        try {
-          const [code, data] = await Promise.all([fileOf(world, r.code), r.data ? fileOf(world, r.data).then(JSON.parse) : null]);
-          make(n, keyOf(n, r), code, data);
-        } catch (err) { report(`module ${n}`, err); }
-      }));
-      return built(refs);
-    });
-  }
-  // what a spec's code shares, once its modules are here: { kit, lib } — or a promise of it (they
-  // are still on their way); `source`: where its modules come from (above). The same modules are
-  // the same kit, and a lib on them is made once.
-  const kits = new Map();
-  function shared(spec, source) {
-    const done = ({ mods, key }) => {
-      if (!kits.has(key)) kits.set(key, Object.freeze(mods));
-      const kit = kits.get(key), lib = typeof spec?.lib === 'string' && spec.lib.trim() ? spec.lib : null;
-      if (lib && !libs.has(`${key}\n\n${lib}`)) {
-        let value = {};
-        try { value = new Function('anim', 'kit', lib)(anim, kit) || {}; } catch (err) { report('lib', err); }
-        libs.set(`${key}\n\n${lib}`, value);
-      }
-      return { kit, lib: lib ? libs.get(`${key}\n\n${lib}`) : {} };
-    };
-    const m = modulesOf(spec, source);
-    return m instanceof Promise ? m.then(done) : done(m);
-  }
-  return { anim, shared };
-})();
+// What a scene's code shares, and the tools for moving things well.
+//   anim — the animator's toolkit, for every scene: easing curves (a movement starts and stops as
+//     a body does), angles the short way round, smooth noise and steady random (life that doesn't
+//     repeat, the same every time), a two-bone joint (an elbow, a knee: the hand or the foot set
+//     where it must be), poses mixed by weight.
+//   the world's modules — code the world's scenes share (its people, its horses, its things):
+//     modules/<name>.js in the world's repository, the body of function (anim, data) that returns
+//     what it offers (data: modules/<name>.data.json, if there is one). A scene lists the ones it
+//     uses (spec.modules) and gets them as kit.<name>, as they are at the commit it is shown at.
+//   the scene's lib — code its own elements and scripts share: spec.lib, the body of
+//     function (anim, kit) that returns what it offers.
+// Painting code sees them as e.anim, e.kit, e.lib; scripts as scene.anim, scene.kit, scene.lib.
+// Where a spec's modules come from (the page says, with the spec):
+//   {world, refs} — the world's id and the modules by their content's sha ({name: {code, data}},
+//     as the scene's payload has them: the commit it shows); a module the refs don't name (a draft
+//     that has just listed it) is the world's main's now (/api/worlds/<world>/modules). The files
+//     are read by /api/worlds/<world>/blobs/<sha> — the same for good, fetched once.
+//   {texts} — the modules themselves, {name: {code, data}} (the renderer is given them).
+const MooodKit = (() => {
+  const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
+  const mix = (a, b, u) => a + (b - a) * u;
+  // u (0…1) of the way between a and b that v is, clamped
+  const span = (v, a, b) => clamp((v - a) / (b - a));
+  // easing: how the 0…1 of a movement's time becomes the 0…1 of its way
+  const ease = {
+    linear: u => u,
+    smooth: u => (1 - Math.cos(Math.PI * u)) / 2,              // starts and stops gently (the default)
+    in: u => u * u * u,                                         // gathers speed, ends at full speed
+    out: u => 1 - Math.pow(1 - u, 3),                           // sets off at once, settles
+    inOut: u => (u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2),
+    back: u => { const c = 1.70158; return 1 + (c + 1) * Math.pow(u - 1, 3) + c * Math.pow(u - 1, 2); }, // a little past, and back
+    spring: u => (u >= 1 ? 1 : 1 - Math.exp(-6 * u) * Math.cos(9 * u)),               // overshoots, wobbles, rests
+    anticipate: u => { const c = 1.4; return u * u * ((c + 1) * u - c); },              // back a little first, then go
+  };
+  const easeOf = e => (typeof e === 'function' ? e : ease[e] || ease.smooth);
+  // angles (radians): the short way round from a to b
+  const turn = (a, b, u) => { let d = ((b - a) % (2 * Math.PI) + 3 * Math.PI) % (2 * Math.PI) - Math.PI; return a + d * u; };
+  // steady random: the same n gives the same 0…1, however many other calls came before
+  const hash = (n, seed = 0) => { let h = Math.imul((n * 374761393 + seed * 668265263) | 0, 1274126177); h = (h ^ (h >>> 13)) >>> 0; h = Math.imul(h, 1103515245) >>> 0; return ((h ^ (h >>> 16)) >>> 0) / 4294967296; };
+  // smooth noise along x (−1…1): for breathing, swaying, drifting that never repeats
+  const noise = (x, seed = 0) => { const i = Math.floor(x), f = x - i, s = f * f * (3 - 2 * f); return mix(hash(i, seed) * 2 - 1, hash(i + 1, seed) * 2 - 1, s); };
+  // a few octaves of it, slower ones stronger
+  const drift = (x, seed = 0) => noise(x, seed) * 0.6 + noise(x * 2.1 + 7, seed + 1) * 0.3 + noise(x * 4.3 + 13, seed + 2) * 0.1;
+  // a two-bone joint: from the root (x0, y0) to the end (x1, y1) with bones a and b; bend 1 or −1 —
+  // which side the joint goes. Returns the joint [x, y] (the end out of reach: the limb straight toward it)
+  const joint = (x0, y0, x1, y1, a, b, bend = 1) => {
+    const dx = x1 - x0, dy = y1 - y0, d = Math.min(Math.hypot(dx, dy), a + b - 1e-6), ang = Math.atan2(dy, dx);
+    const k = clamp((a * a + d * d - b * b) / (2 * a * d || 1), -1, 1), off = Math.acos(k) * bend;
+    return [x0 + Math.cos(ang + off) * a, y0 + Math.sin(ang + off) * a];
+  };
+  // poses mixed: pose objects (numbers, or nested objects/arrays of them) weighted [[pose, weight], …]
+  const blend = list => {
+    const total = list.reduce((s, [, w]) => s + w, 0) || 1, [first] = list[0];
+    const go = (sel) => {
+      const v0 = sel(first);
+      if (typeof v0 === 'number') return list.reduce((s, [p, w]) => s + (sel(p) ?? v0) * w, 0) / total;
+      if (Array.isArray(v0)) return v0.map((_, i) => go(p => sel(p)?.[i]));
+      if (v0 && typeof v0 === 'object') return Object.fromEntries(Object.keys(v0).map(k => [k, go(p => sel(p)?.[k])]));
+      return v0;
+    };
+    return go(p => p);
+  };
+  const anim = Object.freeze({ clamp, mix, span, ease, easeOf, turn, hash, noise, drift, joint, blend });
+
+  const report = (who, err) => (window.__mooodErrors = window.__mooodErrors || []).push(`${who}: ${err && err.message || err}`);
+  // files by their content's sha (the same for good), modules made from them, libs made: once each
+  const files = new Map(), made = new Map(), libs = new Map(), mains = new Map();
+  const fileOf = (world, sha) => {
+    if (!files.has(sha)) files.set(sha, fetch(`/api/worlds/${world}/blobs/${sha}`).then(r => (r.ok ? r.text() : Promise.reject(new Error(`${sha}: ${r.status}`)))));
+    return files.get(sha);
+  };
+  const mainOf = world => {
+    if (!mains.has(world)) mains.set(world, fetch(`/api/worlds/${world}/modules`).then(r => (r.ok ? r.json() : {})).catch(() => ({})));
+    return mains.get(world);
+  };
+  function make(name, key, code, data) {
+    if (!made.has(key)) {
+      let value = {};
+      try { value = new Function('anim', 'data', String(code))(anim, data) || {}; } catch (err) { report(`module ${name}`, err); }
+      made.set(key, value);
+    }
+    return made.get(key);
+  }
+  // a spec's modules, as `source` says: {mods: {name: what it offers}, key: which they are} — or a
+  // promise of it
+  function modulesOf(spec, source) {
+    const names = [...new Set((Array.isArray(spec?.modules) ? spec.modules : []).filter(n => typeof n === 'string'))].sort();
+    const out = (mods, keys) => ({ mods, key: keys.join('\n') });
+    if (!names.length) return out({}, []);
+    if (source?.texts) {
+      const mods = {}, keys = [];
+      for (const n of names) {
+        const m = source.texts[n];
+        if (m?.code == null) { report(`module ${n}`, 'not in this world'); continue; }
+        const key = `${n} ${m.code} ${JSON.stringify(m.data ?? null)}`;
+        mods[n] = make(n, key, m.code, m.data ?? null); keys.push(key);
+      }
+      return out(mods, keys);
+    }
+    const world = source?.world;
+    if (world == null) { report('modules', 'the page did not say whose they are'); return out({}, []); }
+    const keyOf = (n, r) => `${n} ${r.code} ${r.data}`;
+    const built = refs => {
+      const mods = {}, keys = [];
+      for (const n of names) if (refs[n]?.code && made.has(keyOf(n, refs[n]))) { mods[n] = made.get(keyOf(n, refs[n])); keys.push(keyOf(n, refs[n])); }
+      return out(mods, keys);
+    };
+    const refs0 = source.refs || {};
+    if (names.every(n => refs0[n]?.code && made.has(keyOf(n, refs0[n])))) return built(refs0);
+    return (names.every(n => refs0[n]?.code) ? Promise.resolve(refs0) : mainOf(world).then(now => ({ ...now, ...refs0 }))).then(async refs => {
+      await Promise.all(names.map(async n => {
+        const r = refs[n];
+        if (!r?.code) { report(`module ${n}`, 'not in this world'); return; }
+        if (made.has(keyOf(n, r))) return;
+        try {
+          const [code, data] = await Promise.all([fileOf(world, r.code), r.data ? fileOf(world, r.data).then(JSON.parse) : null]);
+          make(n, keyOf(n, r), code, data);
+        } catch (err) { report(`module ${n}`, err); }
+      }));
+      return built(refs);
+    });
+  }
+  // what a spec's code shares, once its modules are here: { kit, lib } — or a promise of it (they
+  // are still on their way); `source`: where its modules come from (above). The same modules are
+  // the same kit, and a lib on them is made once.
+  const kits = new Map();
+  function shared(spec, source) {
+    const done = ({ mods, key }) => {
+      if (!kits.has(key)) kits.set(key, Object.freeze(mods));
+      const kit = kits.get(key), lib = typeof spec?.lib === 'string' && spec.lib.trim() ? spec.lib : null;
+      if (lib && !libs.has(`${key}\n\n${lib}`)) {
+        let value = {};
+        try { value = new Function('anim', 'kit', lib)(anim, kit) || {}; } catch (err) { report('lib', err); }
+        libs.set(`${key}\n\n${lib}`, value);
+      }
+      return { kit, lib: lib ? libs.get(`${key}\n\n${lib}`) : {} };
+    };
+    const m = modulesOf(spec, source);
+    return m instanceof Promise ? m.then(done) : done(m);
+  }
+  return { anim, shared };
+})();

package/engine/live.js

@@ -1,23 +1,23 @@
-// A live channel from the server (a game's, or the artist's work): a WebSocket — unlike a
-// long-lived HTTP request (SSE), it doesn't count against the browser's six connections to a site,
-// which a few open tabs would use up and leave every next page waiting. Each message is an event,
-// most marked (_at) with where it is in the channel; a closed socket is opened again from the last
-// one, so nothing is missed.
-//   MooodLive.open(path, since, handle) — handle(event) for every event but pings
-const MooodLive = (() => {
-  function open(path, since, handle) {
-    let leaving = false;
-    addEventListener('pagehide', () => { leaving = true; });
-    const connect = () => {
-      const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}${path}?since=${encodeURIComponent(since)}`);
-      ws.onmessage = m => {
-        const ev = JSON.parse(m.data);
-        if (ev._at) since = ev._at;
-        if (ev.type !== 'ping') handle(ev);
-      };
-      ws.onclose = () => { if (!leaving) setTimeout(connect, 2000); };
-    };
-    connect();
-  }
-  return { open };
-})();
+// A live channel from the server (a game's, or the artist's work): a WebSocket — unlike a
+// long-lived HTTP request (SSE), it doesn't count against the browser's six connections to a site,
+// which a few open tabs would use up and leave every next page waiting. Each message is an event,
+// most marked (_at) with where it is in the channel; a closed socket is opened again from the last
+// one, so nothing is missed.
+//   MooodLive.open(path, since, handle) — handle(event) for every event but pings
+const MooodLive = (() => {
+  function open(path, since, handle) {
+    let leaving = false;
+    addEventListener('pagehide', () => { leaving = true; });
+    const connect = () => {
+      const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}${path}?since=${encodeURIComponent(since)}`);
+      ws.onmessage = m => {
+        const ev = JSON.parse(m.data);
+        if (ev._at) since = ev._at;
+        if (ev.type !== 'ping') handle(ev);
+      };
+      ws.onclose = () => { if (!leaving) setTimeout(connect, 2000); };
+    };
+    connect();
+  }
+  return { open };
+})();

package/engine/mic.js

@@ -1,76 +1,76 @@
-// Speaking. While the player holds the microphone, the page streams it to /listen (the sound
-// service: PCM16, 24 kHz, mono, binary frames), telling what scene it is — its words help hearing
-// names right — and the words come back as they are heard; letting go sends {"type": "done"} and
-// the final text follows.
-const MooodMic = (() => {
-  // a tap on the audio graph: the microphone at the context's own rate, handed on at 24 kHz
-  // (linear interpolation across blocks), whatever rate the browser runs audio at
-  const TAP = `registerProcessor('tap', class extends AudioWorkletProcessor {
-    constructor() { super(); this.step = sampleRate / 24000; this.pos = 0; this.prev = 0; }
-    process(inputs) {
-      const ch = inputs[0][0];
-      if (!ch) return true;
-      const out = [];
-      let pos = this.pos; // where the next sample falls, in this block's samples (-1..0: just before it)
-      while (pos < ch.length - 1) {
-        const i = Math.floor(pos), f = pos - i, a = i < 0 ? this.prev : ch[i];
-        out.push(a + (ch[i + 1] - a) * f);
-        pos += this.step;
-      }
-      this.pos = pos - ch.length; this.prev = ch[ch.length - 1];
-      if (out.length) this.port.postMessage(Float32Array.from(out));
-      return true;
-    }
-  });`;
-  let tapUrl = null;
-
-  // starts an utterance in the scene `spec`; on: { partial(text), final(text), error(text) }.
-  // Returns { done(), cancel() }.
-  async function listen(spec, on) {
-    const q = new URLSearchParams({ title: spec?.title || '', caption: spec?.caption || '' });
-    for (const o of spec?.objects || []) if (o.name) q.append('name', o.name);
-    const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/listen?${q}`);
-    ws.binaryType = 'arraybuffer';
-    const early = []; // what was said before the socket opened
-    ws.onopen = () => { for (const b of early.splice(0)) ws.send(b); };
-    let over = false; // the final text or an error came
-    ws.onmessage = e => {
-      const m = JSON.parse(e.data);
-      if (m.type === 'partial') on.partial(m.text);
-      else if (m.type === 'final') { over = true; on.final(m.text); }
-      else if (m.type === 'error') { over = true; on.error(m.text); }
-    };
-    ws.onclose = () => { if (!over) on.error(''); };
-    let media, ctx;
-    try {
-      media = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
-      ctx = new AudioContext();
-      tapUrl = tapUrl || URL.createObjectURL(new Blob([TAP], { type: 'text/javascript' }));
-      await ctx.audioWorklet.addModule(tapUrl);
-    } catch (err) {
-      ws.close();
-      media?.getTracks().forEach(t => t.stop());
-      throw err;
-    }
-    const tap = new AudioWorkletNode(ctx, 'tap'), mute = ctx.createGain();
-    mute.gain.value = 0;
-    tap.port.onmessage = e => {
-      const f = e.data, pcm = new Int16Array(f.length);
-      for (let i = 0; i < f.length; i++) pcm[i] = Math.max(-1, Math.min(1, f[i])) * 0x7fff;
-      if (ws.readyState === WebSocket.OPEN) ws.send(pcm.buffer); else if (ws.readyState === WebSocket.CONNECTING) early.push(pcm.buffer);
-    };
-    ctx.createMediaStreamSource(media).connect(tap);
-    tap.connect(mute).connect(ctx.destination); // pulled by the graph, heard by no one
-    const close = () => { media.getTracks().forEach(t => t.stop()); ctx.close(); };
-    return {
-      done() {
-        close();
-        const send = () => ws.send(JSON.stringify({ type: 'done' }));
-        if (ws.readyState === WebSocket.OPEN) send(); else ws.addEventListener('open', send);
-      },
-      cancel() { close(); ws.close(); },
-    };
-  }
-
-  return { listen };
-})();
+// Speaking. While the player holds the microphone, the page streams it to /listen (the sound
+// service: PCM16, 24 kHz, mono, binary frames), telling what scene it is — its words help hearing
+// names right — and the words come back as they are heard; letting go sends {"type": "done"} and
+// the final text follows.
+const MooodMic = (() => {
+  // a tap on the audio graph: the microphone at the context's own rate, handed on at 24 kHz
+  // (linear interpolation across blocks), whatever rate the browser runs audio at
+  const TAP = `registerProcessor('tap', class extends AudioWorkletProcessor {
+    constructor() { super(); this.step = sampleRate / 24000; this.pos = 0; this.prev = 0; }
+    process(inputs) {
+      const ch = inputs[0][0];
+      if (!ch) return true;
+      const out = [];
+      let pos = this.pos; // where the next sample falls, in this block's samples (-1..0: just before it)
+      while (pos < ch.length - 1) {
+        const i = Math.floor(pos), f = pos - i, a = i < 0 ? this.prev : ch[i];
+        out.push(a + (ch[i + 1] - a) * f);
+        pos += this.step;
+      }
+      this.pos = pos - ch.length; this.prev = ch[ch.length - 1];
+      if (out.length) this.port.postMessage(Float32Array.from(out));
+      return true;
+    }
+  });`;
+  let tapUrl = null;
+
+  // starts an utterance in the scene `spec`; on: { partial(text), final(text), error(text) }.
+  // Returns { done(), cancel() }.
+  async function listen(spec, on) {
+    const q = new URLSearchParams({ title: spec?.title || '', caption: spec?.caption || '' });
+    for (const o of spec?.objects || []) if (o.name) q.append('name', o.name);
+    const ws = new WebSocket(`${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/listen?${q}`);
+    ws.binaryType = 'arraybuffer';
+    const early = []; // what was said before the socket opened
+    ws.onopen = () => { for (const b of early.splice(0)) ws.send(b); };
+    let over = false; // the final text or an error came
+    ws.onmessage = e => {
+      const m = JSON.parse(e.data);
+      if (m.type === 'partial') on.partial(m.text);
+      else if (m.type === 'final') { over = true; on.final(m.text); }
+      else if (m.type === 'error') { over = true; on.error(m.text); }
+    };
+    ws.onclose = () => { if (!over) on.error(''); };
+    let media, ctx;
+    try {
+      media = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
+      ctx = new AudioContext();
+      tapUrl = tapUrl || URL.createObjectURL(new Blob([TAP], { type: 'text/javascript' }));
+      await ctx.audioWorklet.addModule(tapUrl);
+    } catch (err) {
+      ws.close();
+      media?.getTracks().forEach(t => t.stop());
+      throw err;
+    }
+    const tap = new AudioWorkletNode(ctx, 'tap'), mute = ctx.createGain();
+    mute.gain.value = 0;
+    tap.port.onmessage = e => {
+      const f = e.data, pcm = new Int16Array(f.length);
+      for (let i = 0; i < f.length; i++) pcm[i] = Math.max(-1, Math.min(1, f[i])) * 0x7fff;
+      if (ws.readyState === WebSocket.OPEN) ws.send(pcm.buffer); else if (ws.readyState === WebSocket.CONNECTING) early.push(pcm.buffer);
+    };
+    ctx.createMediaStreamSource(media).connect(tap);
+    tap.connect(mute).connect(ctx.destination); // pulled by the graph, heard by no one
+    const close = () => { media.getTracks().forEach(t => t.stop()); ctx.close(); };
+    return {
+      done() {
+        close();
+        const send = () => ws.send(JSON.stringify({ type: 'done' }));
+        if (ws.readyState === WebSocket.OPEN) send(); else ws.addEventListener('open', send);
+      },
+      cancel() { close(); ws.close(); },
+    };
+  }
+
+  return { listen };
+})();

package/engine/music.css

@@ -1,28 +1,28 @@
-/* The world's music panel (music.js): descriptions with weights, settings, save — on the scene
-   page (listening) and the author's page (tuning). */
-#music { position: fixed; top: 16px; left: 16px; bottom: 16px; width: 360px; display: flex; flex-direction: column; border-radius: 16px; background: rgba(8, 10, 16, 0.86); overflow: hidden; z-index: 3; font-size: 13px; color: #e6e8ee; font-family: Georgia, "Times New Roman", serif; }
-/* the panel brings its own buttons: it sits on the dark scene page and the light author's page alike */
-#music button { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 14px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
-#music button:hover { background: rgba(255, 255, 255, 0.14); }
-#music[hidden] { display: none; }
-#music .music-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
-#music .music-head .title { flex: 1; font-size: 15px; }
-#music .play { min-width: 38px; }
-#music .status { padding: 6px 12px 0; font-size: 12px; font-style: italic; opacity: 0.6; min-height: 1.4em; }
-#music .prompts { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
-#music .prompts li { padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); opacity: 0.6; }
-#music .prompts li.on { opacity: 1; background: rgba(255, 214, 150, 0.08); }
-#music textarea, #music .add input { width: 100%; box-sizing: border-box; resize: none; field-sizing: content; border: 0; outline: none; background: transparent; color: inherit; font: inherit; line-height: 1.35; }
-#music .row, #music .knobs label { display: flex; align-items: center; gap: 8px; }
-#music input[type=range] { flex: 1; accent-color: #e8c48a; }
-#music .val { width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; opacity: 0.75; font-size: 12px; }
-#music .del { padding: 0 7px; font-size: 12px; }
-#music .add { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
-#music .add input { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
-#music .knobs { padding: 6px 12px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
-#music .knobs .name { width: 5.5em; opacity: 0.8; }
-#music .knobs label.auto input[type=range] { opacity: 0.35; }
-#music .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px 12px; }
-#music.readonly .add, #music.readonly .foot, #music.readonly .del { display: none; }
-#music.readonly textarea, #music.readonly input[type=range] { pointer-events: none; }
-@media (max-width: 700px) { #music { left: 8px; right: 8px; width: auto; top: 8px; bottom: auto; max-height: 50vh; } }
+/* The world's music panel (music.js): descriptions with weights, settings, save — on the scene
+   page (listening) and the author's page (tuning). */
+#music { position: fixed; top: 16px; left: 16px; bottom: 16px; width: 360px; display: flex; flex-direction: column; border-radius: 16px; background: rgba(8, 10, 16, 0.86); overflow: hidden; z-index: 3; font-size: 13px; color: #e6e8ee; font-family: Georgia, "Times New Roman", serif; }
+/* the panel brings its own buttons: it sits on the dark scene page and the light author's page alike */
+#music button { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 14px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
+#music button:hover { background: rgba(255, 255, 255, 0.14); }
+#music[hidden] { display: none; }
+#music .music-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
+#music .music-head .title { flex: 1; font-size: 15px; }
+#music .play { min-width: 38px; }
+#music .status { padding: 6px 12px 0; font-size: 12px; font-style: italic; opacity: 0.6; min-height: 1.4em; }
+#music .prompts { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
+#music .prompts li { padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); opacity: 0.6; }
+#music .prompts li.on { opacity: 1; background: rgba(255, 214, 150, 0.08); }
+#music textarea, #music .add input { width: 100%; box-sizing: border-box; resize: none; field-sizing: content; border: 0; outline: none; background: transparent; color: inherit; font: inherit; line-height: 1.35; }
+#music .row, #music .knobs label { display: flex; align-items: center; gap: 8px; }
+#music input[type=range] { flex: 1; accent-color: #e8c48a; }
+#music .val { width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; opacity: 0.75; font-size: 12px; }
+#music .del { padding: 0 7px; font-size: 12px; }
+#music .add { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
+#music .add input { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
+#music .knobs { padding: 6px 12px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
+#music .knobs .name { width: 5.5em; opacity: 0.8; }
+#music .knobs label.auto input[type=range] { opacity: 0.35; }
+#music .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px 12px; }
+#music.readonly .add, #music.readonly .foot, #music.readonly .del { display: none; }
+#music.readonly textarea, #music.readonly input[type=range] { pointer-events: none; }
+@media (max-width: 700px) { #music { left: 8px; right: 8px; width: auto; top: 8px; bottom: auto; max-height: 50vh; } }