asterism-games 0.20.0 → 0.22.0

data/lib/asterism_games/commentate/assets/commentate.js

@@ -8,8 +8,14 @@
 // the browser's speech synthesis.
 // The AI's one-liners (l.ai) come after the fixed lines, marked "AI" in
 // the captions, and are the first to go when the voice falls behind.
-// Keys: Space pause, M voice, H hide the hands. URL parameters: table=<id>,
-// hands=0 (hidden), voice=0, obs=1 (no bar, a transparent background).
+// The sound of Family mruby's mahjong app (README "The sound"): its BGM
+// for the scene ("state"'s bgm) and its effects for each step ("state"'s
+// sounds), files made with the app's own APU (/sounds/, sounds.json),
+// played with Web Audio beside the voice; the BGM goes down while the
+// voice speaks.
+// Keys: Space pause, M voice, B BGM (off, low, mid, high), E effects,
+// H hide the hands. URL parameters: table=<id>, hands=0 (hidden), voice=0,
+// obs=1 (no bar, a transparent background).
 "use strict";
 
 (function () {
@@ -29,7 +35,7 @@
     voiceOn: params.get("voice") !== "0",
     unlocked: false,      // the page was clicked: the browser lets it speak
     paused: false,
-    held: { view: null, lines: [] },
+    held: { view: null, lines: [], bgm: null },
     connected: false,
     sheets: null,
   };
@@ -399,7 +405,7 @@
     const e = { t: Date.now(), kind: kind, id: item ? item.line.id : null, prio: item ? item.prio : null, src: src };
     played.push(e);
     if (played.length > 500) played.shift();
-    if (window.console) console.log("voice", kind, e.id, src);
+    if (window.console) console.log("voice", kind, e.id, src, e.t);
   }
 
   // Queues the line's voice; false when nothing is said (the caption then
@@ -468,16 +474,20 @@
     if (!item) return;
     speech.speaking = true;
     speech.current = item;
+    sound.duck();
     showLine(item.line);
     sayItem(item).then(() => {
       if (speech.current !== item) return;   // cut off (M, H)
       speech.current = null;
       speech.speaking = false;
+      sound.duck();
       setTimeout(next, 120);
     });
   }
 
   async function sayItem(item) {
+    await sound.afterJingle();
+    if (speech.current !== item) return;
     if (item.clips || item.blob) {
       for (const c of item.clips || []) {
         if (speech.current !== item) return;
@@ -536,6 +546,7 @@
     drop(() => true, "cut");
     speech.current = null;
     speech.speaking = false;
+    sound.duck();
   }
 
   function showVoice() {
@@ -559,17 +570,20 @@
     if (st.unlocked) return;
     st.unlocked = true;
     $("hint").hidden = true;
+    sound.start();
     // A first sound inside the gesture opens the way on some browsers.
     const v = vv();
     if (st.voiceOn && canSpeak()) {
       const item = { line: { id: 0 }, prio: 1, at: Date.now() };
       speech.speaking = true;
       speech.current = item;
+      sound.duck();
       const p = v && v.start ? (log("clip", item, v.start), playUrl(v.start)) : speak(item, "実況を始めます");
       p.then(() => {
         if (speech.current !== item) return;
         speech.current = null;
         speech.speaking = false;
+        sound.duck();
         next();
       });
     }
@@ -596,6 +610,270 @@
     }
   }
 
+  // ------------------------------------------------------------ the app's sound
+
+  // The BGM and the effects of Family mruby's mahjong app, as files made
+  // with its APU (sounds.json lists them: the effects' priorities and
+  // channels, the tunes' loops, the app's BGM levels and scenes). Web Audio,
+  // after the first click (the browser's autoplay rule): the BGM is the
+  // scene's tune from its start, its loop repeated without a seam; the
+  // levels are the app's (off, low, mid, high: low by default, as the
+  // app's), and while the voice speaks the BGM is at DUCK of its level
+  // (the effects stay as they are). An effect plays at once, beside the
+  // voice (not in its queue), and claims the APU channels it uses as the
+  // app's do: one of a higher priority still sounding on them keeps them
+  // (the new one is left out when it gets none), otherwise the older
+  // sounds on them stop. A voice that would start on top of a jingle
+  // waits for most of it (at most JINGLE_WAIT_MS). B and E switch, and the
+  // page remembers both (localStorage).
+  const sound = {
+    ctx: null,
+    manifest: null,
+    buffers: {},          // file => AudioBuffer (or a Promise of one)
+    bgmLevel: null,
+    seOn: true,
+    scene: "lobby",
+    bgm: null,            // {key, src, gain} playing
+    bgmGain: null,
+    seGain: null,
+    ducked: false,
+    duckTimer: null,
+    holders: [null, null, null, null],   // per APU channel: {pri, until, src}
+    jingleUntil: 0,
+    paused: false,
+    log: [],
+    DUCK: 0.5,
+    JINGLE_WAIT_MS: 600,
+    STORE: "asterism-games.commentate.",
+  };
+
+  sound.note = function (kind, name) {
+    const e = { t: Date.now(), kind: kind, name: name };
+    sound.log.push(e);
+    if (sound.log.length > 500) sound.log.shift();
+    if (window.console) console.log("sound", kind, name, e.t);
+  };
+
+  function stored(key) {
+    try { return window.localStorage.getItem(sound.STORE + key); } catch (e) { return null; }
+  }
+  function store(key, value) {
+    try { window.localStorage.setItem(sound.STORE + key, String(value)); } catch (e) { /* not kept */ }
+  }
+
+  sound.levels = function () { return (sound.manifest && sound.manifest.bgm_levels) || [0, 0.3, 0.55, 1]; };
+  sound.names = function () { return (sound.manifest && sound.manifest.bgm_names) || ["切", "小", "中", "大"]; };
+
+  sound.load = function () {
+    const lv = parseInt(stored("bgm"), 10);
+    sound.bgmLevel = lv >= 0 && lv <= 3 ? lv : null;
+    sound.seOn = stored("se") !== "0";
+    fetch("/sounds/sounds.json").then((r) => (r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status))))
+      .then((m) => {
+        sound.manifest = m;
+        if (sound.bgmLevel === null || sound.bgmLevel >= m.bgm_levels.length) sound.bgmLevel = m.bgm_default;
+        sound.show();
+        if (sound.ctx) { sound.preload(); sound.applyBgm(); }
+      })
+      .catch(() => { sound.manifest = null; sound.show(); });
+    sound.show();
+  };
+
+  // The first click: the context, the two volumes, the effects' files.
+  sound.start = function () {
+    if (sound.ctx) return;
+    const AC = window.AudioContext || window.webkitAudioContext;
+    if (!AC) { sound.show(); return; }
+    // 24 kHz is plenty for the APU's sound (15.72 kHz) and halves what the
+    // decoded tunes take; a browser that will not have it gets its own rate.
+    try { sound.ctx = new AC({ sampleRate: 24000 }); } catch (e) { sound.ctx = new AC(); }
+    sound.bgmGain = sound.ctx.createGain();
+    sound.bgmGain.gain.value = sound.bgmVolume();
+    sound.bgmGain.connect(sound.ctx.destination);
+    sound.seGain = sound.ctx.createGain();
+    sound.seGain.connect(sound.ctx.destination);
+    if (sound.ctx.state === "suspended") sound.ctx.resume().catch(() => {});
+    if (sound.manifest) { sound.preload(); sound.applyBgm(); }
+    sound.show();
+  };
+
+  sound.buffer = function (file) {
+    const b = sound.buffers[file];
+    if (b) return b instanceof Promise ? b : Promise.resolve(b);
+    const p = fetch("/sounds/" + file)
+      .then((r) => (r.ok ? r.arrayBuffer() : Promise.reject(new Error("HTTP " + r.status))))
+      .then((data) => new Promise((resolve, reject) => sound.ctx.decodeAudioData(data, resolve, reject)))
+      .then((buf) => { sound.buffers[file] = buf; return buf; })
+      .catch((e) => { delete sound.buffers[file]; sound.note("failed", file); throw e; });
+    sound.buffers[file] = p;
+    return p;
+  };
+
+  sound.preload = function () {
+    Object.keys(sound.manifest.effects).forEach((n) => sound.buffer(sound.manifest.effects[n].file).catch(() => {}));
+  };
+
+  sound.bgmVolume = function () {
+    const v = sound.levels()[sound.bgmLevel || 0] || 0;
+    return sound.ducked ? v * sound.DUCK : v;
+  };
+
+  sound.setScene = function (scene) {
+    if (scene === sound.scene) return;
+    sound.scene = scene;
+    sound.applyBgm();
+  };
+
+  // The tune of the scene, or none (off, the end of a game, paused).
+  sound.applyBgm = function () {
+    const m = sound.manifest;
+    if (!sound.ctx || !m) return;
+    let key = m.scenes[sound.scene] || null;
+    if (!key && sound.scene === "tense") key = m.scenes.play || null;
+    if (!sound.bgmLevel || sound.paused) key = null;
+    const cur = sound.bgm;
+    if (cur && cur.key === key) return;
+    if (cur) {
+      const t = sound.ctx.currentTime;
+      cur.gain.gain.setTargetAtTime(0, t, 0.03);
+      cur.src.stop(t + 0.2);
+      sound.bgm = null;
+    }
+    if (!key) return;
+    const tune = m.tunes[key];
+    const want = { key: key, src: null, gain: null };
+    sound.bgm = want;
+    sound.buffer(tune.file).then((buf) => {
+      if (sound.bgm !== want) return;
+      const src = sound.ctx.createBufferSource();
+      src.buffer = buf;
+      src.loop = true;
+      src.loopStart = tune.loop_start;
+      src.loopEnd = tune.loop_start + tune.loop_s;
+      const g = sound.ctx.createGain();
+      src.connect(g);
+      g.connect(sound.bgmGain);
+      src.start();
+      want.src = src;
+      want.gain = g;
+      sound.note("bgm", key);
+    }).catch(() => { if (sound.bgm === want) sound.bgm = null; });
+  };
+
+  // An effect of the app (name: sounds.json's effects), delay ms from now.
+  sound.effect = function (name, delay) {
+    if (!sound.ctx || !sound.seOn || sound.paused || !sound.manifest) return;
+    const e = sound.manifest.effects[name];
+    if (!e) return;
+    const go = () => {
+      if (!sound.seOn || sound.paused) return;
+      sound.buffer(e.file).then((buf) => sound.play(name, e, buf)).catch(() => {});
+    };
+    if (delay > 0) setTimeout(go, delay); else go();
+  };
+
+  sound.play = function (name, e, buf) {
+    const now = Date.now();
+    const free = e.channels.filter((ch) => {
+      const h = sound.holders[ch];
+      return !h || h.until <= now || e.priority >= h.pri;
+    });
+    if (!free.length) { sound.note("left out", name); return; }
+    const src = sound.ctx.createBufferSource();
+    src.buffer = buf;
+    src.connect(sound.seGain);
+    const until = now + buf.duration * 1000;
+    free.forEach((ch) => {
+      const h = sound.holders[ch];
+      if (h && h.until > now && h.src !== src) {
+        try { h.src.stop(); } catch (x) { /* ended */ }
+      }
+      sound.holders[ch] = { pri: e.priority, until: until, src: src };
+    });
+    src.start();
+    if (e.priority >= 3) sound.jingleUntil = Math.max(sound.jingleUntil, until);
+    sound.note("sfx", name);
+  };
+
+  // Resolves when a voice may start: after most of a sounding jingle.
+  sound.afterJingle = function () {
+    const wait = Math.min(sound.JINGLE_WAIT_MS, sound.jingleUntil - Date.now() - 120);
+    return wait > 0 ? new Promise((resolve) => setTimeout(resolve, wait)) : Promise.resolve();
+  };
+
+  // The BGM down while the voice speaks; up again a moment after it stops
+  // (not between two lines).
+  sound.duck = function () {
+    const on = speech.speaking;
+    if (on) {
+      if (sound.duckTimer) { clearTimeout(sound.duckTimer); sound.duckTimer = null; }
+      if (!sound.ducked) { sound.ducked = true; sound.volume(0.05); sound.note("duck", "down"); }
+    } else if (sound.ducked && !sound.duckTimer) {
+      sound.duckTimer = setTimeout(() => {
+        sound.duckTimer = null;
+        if (speech.speaking) return;
+        sound.ducked = false;
+        sound.volume(0.25);
+        sound.note("duck", "up");
+      }, 600);
+    }
+  };
+
+  sound.volume = function (tc) {
+    if (!sound.bgmGain) return;
+    const t = sound.ctx.currentTime;
+    sound.bgmGain.gain.cancelScheduledValues(t);
+    sound.bgmGain.gain.setTargetAtTime(sound.bgmVolume(), t, tc || 0.05);
+  };
+
+  sound.cycleBgm = function () {
+    const n = sound.levels().length;
+    sound.bgmLevel = ((sound.bgmLevel || 0) + 1) % n;
+    store("bgm", sound.bgmLevel);
+    sound.volume(0.05);
+    sound.applyBgm();
+    sound.show();
+  };
+
+  sound.toggleSe = function () {
+    sound.seOn = !sound.seOn;
+    store("se", sound.seOn ? 1 : 0);
+    if (!sound.seOn) {
+      sound.holders.forEach((h) => { if (h) { try { h.src.stop(); } catch (x) { /* ended */ } } });
+      sound.holders = [null, null, null, null];
+    }
+    sound.show();
+  };
+
+  sound.pause = function (p) {
+    sound.paused = p;
+    if (!sound.ctx) return;
+    if (p) sound.ctx.suspend().catch(() => {});
+    else sound.ctx.resume().catch(() => {});
+  };
+
+  sound.show = function () {
+    const b = $("bgm");
+    const e = $("se");
+    const credit = $("bgmcredit");
+    if (!sound.manifest) {
+      b.textContent = "BGM: なし";
+      b.className = "item";
+      e.textContent = "";
+      credit.hidden = true;
+      return;
+    }
+    const lv = sound.bgmLevel || 0;
+    const wait = st.unlocked ? "" : " (クリック待ち)";
+    b.textContent = "BGM " + sound.names()[lv] + " [B]" + (lv ? wait : "");
+    b.className = "item btn" + (lv ? " on" : "");
+    e.textContent = "効果音 " + (sound.seOn ? "入" : "切") + " [E]";
+    e.className = "item btn" + (sound.seOn ? " on" : "");
+    credit.hidden = !lv;
+  };
+  $("bgm").addEventListener("click", () => sound.cycleBgm());
+  $("se").addEventListener("click", () => sound.toggleSe());
+
   // ------------------------------------------------------------ the bar
 
   function showBar() {
@@ -627,6 +905,7 @@
     $("conn").className = "item warn";
     showVoice();
     showAI();
+    sound.show();
   }
 
   $("tables").addEventListener("change", (e) => {
@@ -644,6 +923,7 @@
 
   document.addEventListener("keydown", (e) => {
     if (e.target && e.target.tagName === "SELECT") return;
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
     if (e.key === " ") {
       e.preventDefault();
       setPaused(!st.paused);
@@ -652,6 +932,12 @@
       if (!st.voiceOn) cut();
       unlock();
       showVoice();
+    } else if (e.key === "b" || e.key === "B") {
+      sound.cycleBgm();
+      unlock();
+    } else if (e.key === "e" || e.key === "E") {
+      sound.toggleSe();
+      unlock();
     } else if (e.key === "h" || e.key === "H") {
       st.hide = !st.hide;
       cut();
@@ -670,10 +956,12 @@
     st.paused = p;
     if (synth) { if (p) synth.pause(); else synth.resume(); }
     if (speech.audio) { if (p) speech.audio.pause(); else speech.audio.play().catch(() => {}); }
+    sound.pause(p);
     if (!p) {
       if (st.held.view) st.view = st.held.view;
+      if (st.held.bgm) sound.setScene(st.held.bgm);
       const held = st.held.lines;
-      st.held = { view: null, lines: [] };
+      st.held = { view: null, lines: [], bgm: null };
       const big = held.filter((l) => (l.prio || 0) >= 3).pop();
       held.forEach((l) => { st.lines.push(l); if (l !== big) addCaption(l); });
       if (big && !say(big)) addCaption(big);
@@ -707,8 +995,10 @@
       const d = JSON.parse(e.data);
       if (st.table && d.table !== st.table) return;
       if (!st.table) st.table = d.table;
-      if (st.paused) { st.held.view = d.view; return; }
+      if (st.paused) { st.held.view = d.view; st.held.bgm = d.bgm; return; }
       st.view = d.view;
+      sound.setScene(d.bgm || "lobby");
+      (d.sounds || []).forEach((x) => sound.effect(x[0], x[1]));
       draw();
       showBar();
     });
@@ -730,6 +1020,7 @@
   draw();
   showBar();
   connect();
+  sound.load();
   // For a test or a tool driving the page.
-  window.commentate = { state: st, played: played, speech: speech };
+  window.commentate = { state: st, played: played, speech: speech, sound: sound };
 })();

data/lib/asterism_games/commentate/assets/index.html

@@ -11,16 +11,18 @@
   <span id="tname" class="item strong">卓を待っています</span>
   <select id="tables" class="item" title="卓" hidden></select>
   <span id="voice" class="item" title="M で切り替え">声: 切</span>
+  <span id="bgm" class="item btn" role="button" title="B で切り替え (切/小/中/大)">BGM 小 [B]</span>
+  <span id="se" class="item btn" role="button" title="E で切り替え">効果音 入 [E]</span>
   <span id="ai" class="item"></span>
   <span id="delay" class="item"></span>
   <span id="mode" class="item"></span>
   <span id="conn" class="item"></span>
 </header>
-<div id="hint" role="button" tabindex="0">画面をクリックすると実況の声が出ます (ブラウザの自動再生の決まり)</div>
+<div id="hint" role="button" tabindex="0">画面をクリックすると実況の声と音が出ます (ブラウザの自動再生の決まり)</div>
 <main id="stage"><canvas id="table" aria-label="卓"></canvas></main>
 <section id="captions" aria-live="polite"></section>
-<footer id="keys">Space 一時停止 / M 声 / H 手牌を隠す</footer>
-<div id="credit" hidden></div>
+<footer id="keys">Space 一時停止 / M 声 / B BGM / E 効果音 / H 手牌を隠す</footer>
+<div id="credits"><span id="credit" hidden></span><span id="bgmcredit" hidden>BGM: shiru8bit (CC BY 3.0)</span></div>
 <script src="/commentate.js"></script>
 </body>
 </html>