Audio on by default, per-game volume, and fix real navigation + latency bugs

- Removed the "Enable Sound" button: AudioContext/worklet/WebSocket now
  connect eagerly on page load; only ctx.resume() still needs a user
  gesture, piggybacking on the page's first click/keypress (e.g.
  clicking Start) instead of a dedicated audio-only button.

- Added a per-game volume slider (POST /volume). Despite audio being
  one shared PulseAudio mix, this is a real independent control: every
  game is still its own distinct sink-input, found by matching
  `pactl -f json list sink-inputs`'s application.process.id against
  the game's own PID, then `pactl set-sink-input-volume`.

- Real bug: audio still never played after removing the button, because
  Install/Start/Stop/Uninstall were still <form method="post"> submits.
  Every click caused a full page navigation (303 redirect), tearing
  down whatever AudioContext had just connected; the fresh page after
  reload creates a new suspended context with no further gesture to
  unlock it. Tell: no speaker icon ever appeared on the Chrome tab.
  Fixed by removing <form>s entirely - every button is now
  onclick="doAction(...)", do_POST returns a plain 204, and client-side
  doAction()/refresh() fetch() the action and the updated page, then
  swap only #content's innerHTML. The page itself never navigates, so
  the audio connection survives every action. setInterval(refresh,
  3000) replaces the old <meta refresh> for keeping status current
  without that risk.

- Real bug: once audio worked, ~2s of latency that got worse over time
  plus multi-second delay before volume changes were audible - fixed
  upstream in docker-common's pcm-worklet.js (uncapped playback queue),
  propagated here.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NiNnj78HGx1KWyCCo39HSz
This commit is contained in:
2026-07-28 19:15:51 +02:00
co-authored by Claude Sonnet 5
parent eb63f46978
commit 588086e82c
4 changed files with 203 additions and 40 deletions
+27 -2
View File
@@ -3,12 +3,23 @@
// interleaved 16-bit signed little-endian stereo frames delivered via
// postMessage as ArrayBuffers; converts to Float32 and plays them back
// through a small ring buffer that absorbs network jitter.
//
// The queue is deliberately capped (see maxQueuedFrames): if the network/
// browser ever delivers data faster than real-time playback consumes it -
// which happens routinely on a fast local connection - an uncapped queue
// just accumulates that backlog forever, growing steadily out of sync with
// the video instead of settling back down. Dropping the oldest excess data
// keeps latency bounded at the cost of an occasional small audible glitch
// on the drop, which is a fair trade for staying live.
class PCMWorkletProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.queue = [];
this.readOffset = 0;
this.channels = 2;
this.maxQueuedFrames = Math.round(sampleRate * 0.1); // ~100ms cap
this.port.onmessage = (event) => {
const int16 = new Int16Array(event.data);
const float32 = new Float32Array(int16.length);
@@ -16,9 +27,23 @@ class PCMWorkletProcessor extends AudioWorkletProcessor {
float32[i] = int16[i] / 32768;
}
this.queue.push(float32);
this._trimBacklog();
};
}
_queuedFrames() {
let frames = -this.readOffset;
for (const chunk of this.queue) frames += chunk.length / this.channels;
return frames;
}
_trimBacklog() {
while (this._queuedFrames() > this.maxQueuedFrames && this.queue.length > 1) {
this.queue.shift();
this.readOffset = 0;
}
}
process(inputs, outputs) {
const output = outputs[0];
const numChannels = output.length;
@@ -31,11 +56,11 @@ class PCMWorkletProcessor extends AudioWorkletProcessor {
}
const current = this.queue[0];
for (let ch = 0; ch < numChannels; ch++) {
const idx = this.readOffset * numChannels + ch;
const idx = this.readOffset * this.channels + ch;
output[ch][frame] = idx < current.length ? current[idx] : 0;
}
this.readOffset++;
if (this.readOffset * numChannels >= current.length) {
if (this.readOffset * this.channels >= current.length) {
this.queue.shift();
this.readOffset = 0;
}