@moood/render 0.0.0 → 0.1.3

package/engine/music.js

@@ -1,279 +1,279 @@
-// A world's music: live instrumental from Lyria RealTime (Gemini API), steered by weighted
-// text descriptions. The artist writes many (most at weight 0); the author tunes them with
-// sliders, adds their own lines, removes the artist's, and saves — a new version of the scene.
-// The stream starts at the first touch of the page (browsers don't let sound start by itself)
-// and follows the open world; changes are sent live while it plays.
-//   It comes through our server (music.mjs), so the Gemini key never reaches the browser:
-//   GET /api/music/stream — frames [type:1][length:4 LE][payload], 1 = PCM16 48 kHz stereo,
-//   2 = a JSON event; POST /api/music/control — prompts, settings, play / pause / reset.
-//   Weight 0 means "not now" and is never sent (the API refuses zero weights).
-const MooodMusic = (() => {
-  const RATE = 48000, LEAD = 0.25; // seconds of audio queued ahead
-  const store = {
-    get: k => { try { return localStorage.getItem(k); } catch { return null; } },
-    set: (k, v) => { try { localStorage.setItem(k, v); } catch {} },
-  };
-  let ui = null, onSave = null;
-  let music = null, savedJson = '';           // what the panel shows / what the scene has
-  let sid = null, opening = null, ctx = null, out = null, nextT = 0;
-  let playing = false, starting = false, sentBpm = null, pushTimer = null;
-  let wanted = store.get('moood:music') !== 'off';
-  MooodVolume.on((kind, v) => { if (kind === 'music' && playing && out) out.gain.setTargetAtTime(v, ctx.currentTime, 0.1); });
-
-  const clone = m => JSON.parse(JSON.stringify(m || { prompts: [] }));
-  const active = () => (music?.prompts || []).filter(p => p.text.trim() && p.weight > 0);
-
-  function status(text) { if (ui) ui.status.textContent = text; }
-
-  // ── the stream ───────────────────────────────────────────────────────────
-  function open() {
-    if (sid) return Promise.resolve();
-    if (opening) return opening;
-    opening = new Promise((resolve, reject) => {
-      const id = 's-' + Math.random().toString(36).slice(2, 12);
-      status('подключаюсь…');
-      fetch(`/api/music/stream?sid=${id}`).then(async r => {
-        if (!r.ok || !r.body) throw new Error('поток музыки не открылся');
-        const reader = r.body.getReader();
-        let buf = new Uint8Array(0);
-        for (;;) {
-          const { value, done } = await reader.read();
-          if (done) break;
-          const joined = new Uint8Array(buf.length + value.length);
-          joined.set(buf); joined.set(value, buf.length);
-          buf = joined;
-          while (buf.length >= 5) {
-            const len = buf[1] | (buf[2] << 8) | (buf[3] << 16) | (buf[4] << 24);
-            if (buf.length < 5 + len) break;
-            const type = buf[0], payload = buf.slice(5, 5 + len);
-            buf = buf.slice(5 + len);
-            if (type === 1) enqueue(payload);
-            else {
-              const ev = JSON.parse(new TextDecoder().decode(payload));
-              if (ev.ready) { sid = id; resolve(); }
-              if (ev.error) { status('ошибка: ' + ev.error); reject(new Error(ev.error)); }
-              if (ev.filtered) status(`не принят: «${ev.filtered}»`);
-            }
-          }
-        }
-        throw new Error('поток закрыт');
-      }).catch(e => {
-        const was = sid === id;
-        if (sid === id) sid = null;
-        sentBpm = null;
-        reject(e);
-        if (was && playing) { playing = false; paint(); status(e.message); }
-      });
-    });
-    return opening.finally(() => { opening = null; });
-  }
-
-  async function control(body) {
-    if (!sid) return;
-    const r = await fetch('/api/music/control', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sid, ...body }) });
-    if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'управление не прошло');
-  }
-
-  function enqueue(bytes) {
-    window.__mooodMusicChunks = (window.__mooodMusicChunks || 0) + 1; // for checking the stream
-    if (!ctx || !playing) return;
-    const n = bytes.length >> 2, buf = ctx.createBuffer(2, n, RATE);
-    const L = buf.getChannelData(0), R = buf.getChannelData(1);
-    const pcm = new DataView(bytes.buffer, bytes.byteOffset, n * 4);
-    for (let i = 0; i < n; i++) {
-      L[i] = pcm.getInt16(i * 4, true) / 32768;
-      R[i] = pcm.getInt16(i * 4 + 2, true) / 32768;
-    }
-    const src = ctx.createBufferSource();
-    src.buffer = buf;
-    src.connect(out);
-    const at = Math.max(nextT, ctx.currentTime + LEAD);
-    src.start(at);
-    nextT = at + buf.duration;
-  }
-
-  // send what the panel shows: the prompts with weight, and the settings
-  async function push() {
-    if (!sid || !playing) return;
-    const prompts = active();
-    if (!prompts.length) { status('все веса на нуле — тишина'); await control({ action: 'pause' }); return; }
-    const config = {};
-    for (const k of ['density', 'brightness']) if (typeof music[k] === 'number') config[k] = music[k];
-    if (typeof music.bpm === 'number') config.bpm = Math.round(music.bpm);
-    const reset = config.bpm !== sentBpm && sentBpm !== null; // tempo changes need a fresh start
-    sentBpm = config.bpm ?? null;
-    await control({ prompts: prompts.map(p => ({ text: p.text.trim(), weight: p.weight })), config });
-    if (reset) await control({ action: 'reset' });
-    await control({ action: 'play' });
-    status('играет');
-  }
-  function pushSoon() { clearTimeout(pushTimer); pushTimer = setTimeout(() => push().catch(e => status('ошибка: ' + e.message)), 200); }
-
-  async function start() {
-    if (playing || starting) return;
-    starting = true;
-    paint();
-    try {
-      ctx = ctx || new AudioContext({ sampleRate: RATE });
-      await ctx.resume();
-      if (!out) { out = ctx.createGain(); out.connect(ctx.destination); }
-      out.gain.setTargetAtTime(MooodVolume.get('music'), ctx.currentTime, 0.3);
-      await open();
-      if (!wanted) return; // switched off while connecting
-      playing = true;
-      paint();
-      await push();
-    } catch (e) { playing = false; status(e.message); } finally { starting = false; paint(); }
-  }
-  async function stop() {
-    playing = false;
-    paint();
-    status('пауза');
-    if (out && ctx) out.gain.setTargetAtTime(0, ctx.currentTime, 0.25);
-    nextT = 0;
-    try { await control({ action: 'pause' }); } catch {}
-  }
-
-  // ── the panel ────────────────────────────────────────────────────────────
-  function el(tag, cls, text) { const e = document.createElement(tag); if (cls) e.className = cls; if (text !== undefined) e.textContent = text; return e; }
-
-  function build() {
-    const root = el('section');
-    root.id = 'music';
-    root.hidden = true;
-    const head = el('div', 'music-head');
-    const play = el('button', 'play');
-    play.type = 'button';
-    play.onclick = () => { wanted = !(playing || starting); store.set('moood:music', wanted ? 'on' : 'off'); wanted ? start() : stop(); };
-    const title = el('span', 'title', 'Музыка');
-    const close = el('button', 'close', '×');
-    close.type = 'button';
-    close.title = 'закрыть';
-    close.onclick = () => { root.hidden = true; };
-    head.append(play, title, close);
-    const st = el('div', 'status');
-    const list = el('ol', 'prompts');
-    const add = el('form', 'add');
-    const addText = el('input');
-    addText.placeholder = 'своё описание музыки…';
-    const addBtn = el('button', '', '+');
-    add.append(addText, addBtn);
-    add.onsubmit = e => {
-      e.preventDefault();
-      const text = addText.value.trim();
-      if (!text) return;
-      music.prompts.push({ text, weight: 1 });
-      addText.value = '';
-      renderList(); changed();
-    };
-    const knobs = el('div', 'knobs');
-    const save = el('button', 'save', 'сохранить');
-    save.type = 'button';
-    save.onclick = async () => {
-      if (!onSave) return;
-      save.disabled = true;
-      status('сохраняю…');
-      try { await onSave(clone(music)); savedJson = JSON.stringify(music); status(playing ? 'играет' : 'сохранено'); } catch (e) { status('ошибка: ' + e.message); }
-      paint();
-    };
-    const revert = el('button', 'revert', 'как было');
-    revert.type = 'button';
-    revert.onclick = () => { music = JSON.parse(savedJson); renderList(); renderKnobs(); changed(); };
-    const foot = el('div', 'foot');
-    foot.append(revert, save);
-    root.append(head, st, list, add, knobs, foot);
-    document.body.append(root);
-    return { root, play, status: st, list, knobs, save, revert };
-  }
-
-  function slider(min, max, step, value, onInput) {
-    const r = el('input');
-    r.type = 'range'; r.min = min; r.max = max; r.step = step; r.value = value;
-    r.oninput = () => onInput(Number(r.value));
-    return r;
-  }
-
-  function renderList() {
-    ui.list.innerHTML = '';
-    for (const p of music.prompts) {
-      const li = el('li', p.weight > 0 ? 'on' : '');
-      const text = el('textarea');
-      text.rows = 1;
-      text.value = p.text;
-      text.oninput = () => { p.text = text.value; changed(); };
-      const val = el('span', 'val', p.weight.toFixed(2));
-      const w = slider(0, 2, 0.05, p.weight, v => { p.weight = v; val.textContent = v.toFixed(2); li.classList.toggle('on', v > 0); changed(); });
-      const del = el('button', 'del', '×');
-      del.type = 'button';
-      del.title = 'убрать';
-      del.onclick = () => { music.prompts.splice(music.prompts.indexOf(p), 1); renderList(); changed(); };
-      const row = el('div', 'row');
-      row.append(w, val, del);
-      li.append(text, row);
-      ui.list.append(li);
-    }
-  }
-
-  function renderKnobs() {
-    ui.knobs.innerHTML = '';
-    for (const [k, label, min, max, step, def] of [['density', 'плотность', 0, 1, 0.01, 0.5], ['brightness', 'яркость', 0, 1, 0.01, 0.5], ['bpm', 'темп', 60, 200, 1, 90]]) {
-      const set = typeof music[k] === 'number';
-      const row = el('label', set ? '' : 'auto');
-      const val = el('span', 'val', set ? String(music[k]) : 'авто');
-      const r = slider(min, max, step, set ? music[k] : def, v => { music[k] = v; val.textContent = String(v); row.classList.remove('auto'); changed(); });
-      const reset = el('button', 'del', '↺');
-      reset.type = 'button';
-      reset.title = 'авто';
-      reset.onclick = () => { delete music[k]; renderKnobs(); changed(); };
-      row.append(el('span', 'name', label), r, val, reset);
-      ui.knobs.append(row);
-    }
-  }
-
-  function paint() {
-    if (!ui) return;
-    const on = playing || starting;
-    ui.play.textContent = on ? '⏸' : '▶';
-    ui.play.title = on ? 'пауза' : 'играть';
-    const dirty = JSON.stringify(music) !== savedJson;
-    ui.save.disabled = !dirty || !onSave;
-    ui.revert.disabled = !dirty;
-  }
-
-  function changed() { paint(); pushSoon(); }
-
-  // ── the page's side ──────────────────────────────────────────────────────
-  // init: once; toggle: a button that opens the panel (or the page calls panel()); save(music) →
-  // persists it (author)
-  function init({ toggle, save }) {
-    ui = build();
-    onSave = save;
-    if (toggle) toggle.onclick = panel;
-    // sound may only start from a gesture: the first touch of the page starts it
-    const first = () => { removeEventListener('pointerdown', first, true); removeEventListener('keydown', first, true); if (wanted && music && active().length) start(); };
-    addEventListener('pointerdown', first, true);
-    addEventListener('keydown', first, true);
-    status(wanted ? 'заиграет от первого касания' : 'пауза');
-    paint();
-  }
-
-  // the open world's music (from its spec), or none
-  function show(m) {
-    music = clone(m);
-    music.prompts = (music.prompts || []).map(p => ({ text: String(p.text || ''), weight: Number(p.weight) || 0 }));
-    savedJson = JSON.stringify(music);
-    if (!ui) return;
-    renderList();
-    renderKnobs();
-    paint();
-    if (playing) pushSoon();
-  }
-
-  // author or player: players hear, only authors tune
-  function setEditable(on) { if (ui) ui.root.classList.toggle('readonly', !on); }
-
-  // opens or closes the panel
-  function panel() { ui.root.hidden = !ui.root.hidden; }
-
-  return { init, show, setEditable, panel };
-})();
+// A world's music: live instrumental from Lyria RealTime (Gemini API), steered by weighted
+// text descriptions. The artist writes many (most at weight 0); the author tunes them with
+// sliders, adds their own lines, removes the artist's, and saves — a new version of the scene.
+// The stream starts at the first touch of the page (browsers don't let sound start by itself)
+// and follows the open world; changes are sent live while it plays.
+//   It comes through our server (music.mjs), so the Gemini key never reaches the browser:
+//   GET /api/music/stream — frames [type:1][length:4 LE][payload], 1 = PCM16 48 kHz stereo,
+//   2 = a JSON event; POST /api/music/control — prompts, settings, play / pause / reset.
+//   Weight 0 means "not now" and is never sent (the API refuses zero weights).
+const MooodMusic = (() => {
+  const RATE = 48000, LEAD = 0.25; // seconds of audio queued ahead
+  const store = {
+    get: k => { try { return localStorage.getItem(k); } catch { return null; } },
+    set: (k, v) => { try { localStorage.setItem(k, v); } catch {} },
+  };
+  let ui = null, onSave = null;
+  let music = null, savedJson = '';           // what the panel shows / what the scene has
+  let sid = null, opening = null, ctx = null, out = null, nextT = 0;
+  let playing = false, starting = false, sentBpm = null, pushTimer = null;
+  let wanted = store.get('moood:music') !== 'off';
+  MooodVolume.on((kind, v) => { if (kind === 'music' && playing && out) out.gain.setTargetAtTime(v, ctx.currentTime, 0.1); });
+
+  const clone = m => JSON.parse(JSON.stringify(m || { prompts: [] }));
+  const active = () => (music?.prompts || []).filter(p => p.text.trim() && p.weight > 0);
+
+  function status(text) { if (ui) ui.status.textContent = text; }
+
+  // ── the stream ───────────────────────────────────────────────────────────
+  function open() {
+    if (sid) return Promise.resolve();
+    if (opening) return opening;
+    opening = new Promise((resolve, reject) => {
+      const id = 's-' + Math.random().toString(36).slice(2, 12);
+      status('подключаюсь…');
+      fetch(`/api/music/stream?sid=${id}`).then(async r => {
+        if (!r.ok || !r.body) throw new Error('поток музыки не открылся');
+        const reader = r.body.getReader();
+        let buf = new Uint8Array(0);
+        for (;;) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          const joined = new Uint8Array(buf.length + value.length);
+          joined.set(buf); joined.set(value, buf.length);
+          buf = joined;
+          while (buf.length >= 5) {
+            const len = buf[1] | (buf[2] << 8) | (buf[3] << 16) | (buf[4] << 24);
+            if (buf.length < 5 + len) break;
+            const type = buf[0], payload = buf.slice(5, 5 + len);
+            buf = buf.slice(5 + len);
+            if (type === 1) enqueue(payload);
+            else {
+              const ev = JSON.parse(new TextDecoder().decode(payload));
+              if (ev.ready) { sid = id; resolve(); }
+              if (ev.error) { status('ошибка: ' + ev.error); reject(new Error(ev.error)); }
+              if (ev.filtered) status(`не принят: «${ev.filtered}»`);
+            }
+          }
+        }
+        throw new Error('поток закрыт');
+      }).catch(e => {
+        const was = sid === id;
+        if (sid === id) sid = null;
+        sentBpm = null;
+        reject(e);
+        if (was && playing) { playing = false; paint(); status(e.message); }
+      });
+    });
+    return opening.finally(() => { opening = null; });
+  }
+
+  async function control(body) {
+    if (!sid) return;
+    const r = await fetch('/api/music/control', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sid, ...body }) });
+    if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'управление не прошло');
+  }
+
+  function enqueue(bytes) {
+    window.__mooodMusicChunks = (window.__mooodMusicChunks || 0) + 1; // for checking the stream
+    if (!ctx || !playing) return;
+    const n = bytes.length >> 2, buf = ctx.createBuffer(2, n, RATE);
+    const L = buf.getChannelData(0), R = buf.getChannelData(1);
+    const pcm = new DataView(bytes.buffer, bytes.byteOffset, n * 4);
+    for (let i = 0; i < n; i++) {
+      L[i] = pcm.getInt16(i * 4, true) / 32768;
+      R[i] = pcm.getInt16(i * 4 + 2, true) / 32768;
+    }
+    const src = ctx.createBufferSource();
+    src.buffer = buf;
+    src.connect(out);
+    const at = Math.max(nextT, ctx.currentTime + LEAD);
+    src.start(at);
+    nextT = at + buf.duration;
+  }
+
+  // send what the panel shows: the prompts with weight, and the settings
+  async function push() {
+    if (!sid || !playing) return;
+    const prompts = active();
+    if (!prompts.length) { status('все веса на нуле — тишина'); await control({ action: 'pause' }); return; }
+    const config = {};
+    for (const k of ['density', 'brightness']) if (typeof music[k] === 'number') config[k] = music[k];
+    if (typeof music.bpm === 'number') config.bpm = Math.round(music.bpm);
+    const reset = config.bpm !== sentBpm && sentBpm !== null; // tempo changes need a fresh start
+    sentBpm = config.bpm ?? null;
+    await control({ prompts: prompts.map(p => ({ text: p.text.trim(), weight: p.weight })), config });
+    if (reset) await control({ action: 'reset' });
+    await control({ action: 'play' });
+    status('играет');
+  }
+  function pushSoon() { clearTimeout(pushTimer); pushTimer = setTimeout(() => push().catch(e => status('ошибка: ' + e.message)), 200); }
+
+  async function start() {
+    if (playing || starting) return;
+    starting = true;
+    paint();
+    try {
+      ctx = ctx || new AudioContext({ sampleRate: RATE });
+      await ctx.resume();
+      if (!out) { out = ctx.createGain(); out.connect(ctx.destination); }
+      out.gain.setTargetAtTime(MooodVolume.get('music'), ctx.currentTime, 0.3);
+      await open();
+      if (!wanted) return; // switched off while connecting
+      playing = true;
+      paint();
+      await push();
+    } catch (e) { playing = false; status(e.message); } finally { starting = false; paint(); }
+  }
+  async function stop() {
+    playing = false;
+    paint();
+    status('пауза');
+    if (out && ctx) out.gain.setTargetAtTime(0, ctx.currentTime, 0.25);
+    nextT = 0;
+    try { await control({ action: 'pause' }); } catch {}
+  }
+
+  // ── the panel ────────────────────────────────────────────────────────────
+  function el(tag, cls, text) { const e = document.createElement(tag); if (cls) e.className = cls; if (text !== undefined) e.textContent = text; return e; }
+
+  function build() {
+    const root = el('section');
+    root.id = 'music';
+    root.hidden = true;
+    const head = el('div', 'music-head');
+    const play = el('button', 'play');
+    play.type = 'button';
+    play.onclick = () => { wanted = !(playing || starting); store.set('moood:music', wanted ? 'on' : 'off'); wanted ? start() : stop(); };
+    const title = el('span', 'title', 'Музыка');
+    const close = el('button', 'close', '×');
+    close.type = 'button';
+    close.title = 'закрыть';
+    close.onclick = () => { root.hidden = true; };
+    head.append(play, title, close);
+    const st = el('div', 'status');
+    const list = el('ol', 'prompts');
+    const add = el('form', 'add');
+    const addText = el('input');
+    addText.placeholder = 'своё описание музыки…';
+    const addBtn = el('button', '', '+');
+    add.append(addText, addBtn);
+    add.onsubmit = e => {
+      e.preventDefault();
+      const text = addText.value.trim();
+      if (!text) return;
+      music.prompts.push({ text, weight: 1 });
+      addText.value = '';
+      renderList(); changed();
+    };
+    const knobs = el('div', 'knobs');
+    const save = el('button', 'save', 'сохранить');
+    save.type = 'button';
+    save.onclick = async () => {
+      if (!onSave) return;
+      save.disabled = true;
+      status('сохраняю…');
+      try { await onSave(clone(music)); savedJson = JSON.stringify(music); status(playing ? 'играет' : 'сохранено'); } catch (e) { status('ошибка: ' + e.message); }
+      paint();
+    };
+    const revert = el('button', 'revert', 'как было');
+    revert.type = 'button';
+    revert.onclick = () => { music = JSON.parse(savedJson); renderList(); renderKnobs(); changed(); };
+    const foot = el('div', 'foot');
+    foot.append(revert, save);
+    root.append(head, st, list, add, knobs, foot);
+    document.body.append(root);
+    return { root, play, status: st, list, knobs, save, revert };
+  }
+
+  function slider(min, max, step, value, onInput) {
+    const r = el('input');
+    r.type = 'range'; r.min = min; r.max = max; r.step = step; r.value = value;
+    r.oninput = () => onInput(Number(r.value));
+    return r;
+  }
+
+  function renderList() {
+    ui.list.innerHTML = '';
+    for (const p of music.prompts) {
+      const li = el('li', p.weight > 0 ? 'on' : '');
+      const text = el('textarea');
+      text.rows = 1;
+      text.value = p.text;
+      text.oninput = () => { p.text = text.value; changed(); };
+      const val = el('span', 'val', p.weight.toFixed(2));
+      const w = slider(0, 2, 0.05, p.weight, v => { p.weight = v; val.textContent = v.toFixed(2); li.classList.toggle('on', v > 0); changed(); });
+      const del = el('button', 'del', '×');
+      del.type = 'button';
+      del.title = 'убрать';
+      del.onclick = () => { music.prompts.splice(music.prompts.indexOf(p), 1); renderList(); changed(); };
+      const row = el('div', 'row');
+      row.append(w, val, del);
+      li.append(text, row);
+      ui.list.append(li);
+    }
+  }
+
+  function renderKnobs() {
+    ui.knobs.innerHTML = '';
+    for (const [k, label, min, max, step, def] of [['density', 'плотность', 0, 1, 0.01, 0.5], ['brightness', 'яркость', 0, 1, 0.01, 0.5], ['bpm', 'темп', 60, 200, 1, 90]]) {
+      const set = typeof music[k] === 'number';
+      const row = el('label', set ? '' : 'auto');
+      const val = el('span', 'val', set ? String(music[k]) : 'авто');
+      const r = slider(min, max, step, set ? music[k] : def, v => { music[k] = v; val.textContent = String(v); row.classList.remove('auto'); changed(); });
+      const reset = el('button', 'del', '↺');
+      reset.type = 'button';
+      reset.title = 'авто';
+      reset.onclick = () => { delete music[k]; renderKnobs(); changed(); };
+      row.append(el('span', 'name', label), r, val, reset);
+      ui.knobs.append(row);
+    }
+  }
+
+  function paint() {
+    if (!ui) return;
+    const on = playing || starting;
+    ui.play.textContent = on ? '⏸' : '▶';
+    ui.play.title = on ? 'пауза' : 'играть';
+    const dirty = JSON.stringify(music) !== savedJson;
+    ui.save.disabled = !dirty || !onSave;
+    ui.revert.disabled = !dirty;
+  }
+
+  function changed() { paint(); pushSoon(); }
+
+  // ── the page's side ──────────────────────────────────────────────────────
+  // init: once; toggle: a button that opens the panel (or the page calls panel()); save(music) →
+  // persists it (author)
+  function init({ toggle, save }) {
+    ui = build();
+    onSave = save;
+    if (toggle) toggle.onclick = panel;
+    // sound may only start from a gesture: the first touch of the page starts it
+    const first = () => { removeEventListener('pointerdown', first, true); removeEventListener('keydown', first, true); if (wanted && music && active().length) start(); };
+    addEventListener('pointerdown', first, true);
+    addEventListener('keydown', first, true);
+    status(wanted ? 'заиграет от первого касания' : 'пауза');
+    paint();
+  }
+
+  // the open world's music (from its spec), or none
+  function show(m) {
+    music = clone(m);
+    music.prompts = (music.prompts || []).map(p => ({ text: String(p.text || ''), weight: Number(p.weight) || 0 }));
+    savedJson = JSON.stringify(music);
+    if (!ui) return;
+    renderList();
+    renderKnobs();
+    paint();
+    if (playing) pushSoon();
+  }
+
+  // author or player: players hear, only authors tune
+  function setEditable(on) { if (ui) ui.root.classList.toggle('readonly', !on); }
+
+  // opens or closes the panel
+  function panel() { ui.root.hidden = !ui.root.hidden; }
+
+  return { init, show, setEditable, panel };
+})();