fix(stop): Antwort in 0,04 s statt bis 51 s — MP3-Encode in den Hintergrund
POST /api/record/stop wartete auf den kompletten loudnorm-Encode: gemessen ~1,4 s pro aufgenommener Minute (#114: 35,5 min -> 50,9 s). Sichtbar war davon nichts als ein ausgegrauter Knopf; der Reiterwechsel baute den Knopf per render() wieder klickbar auf und der zweite Klick lief in "not recording", weil stopAndSave() current sofort auf null setzt. - recorder.js: encodeMp3() ohne await, schreibt <name>.mp3.part und benennt erst danach um. MP3_ARGS + "-f mp3" (ffmpeg leitet den Muxer aus der Endung ab und scheitert an .part). - web/src/main.js: state.stopping ueberlebt render() -> Knopf bleibt gesperrt, Uhr friert ein, Toast mit geschaetzter Wartezeit, zweiter Klick verworfen, "not recording" kein roter Fehler. Player laedt nach, solange /media 404 liefert (#mp3wait, 5-s-Retry, Abbruch nach 5 min). - server.js: sweepOrphans erkennt rec_*.mp3.part. Gegenprobe: 0,033 s / 0,044 s Stop-Antwort, "mp3 fertig" ~2 s spaeter, 64 kbit CBR / 48 kHz / mono ohne Xing-Tabelle, /media 200. Doku: Kapitel 03 (neuer Abschnitt + Vorher/Nachher-Sequenzdiagramm), Changelog 2026-08-20. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+61
-35
@@ -323,6 +323,54 @@ export async function stopRaw() {
|
||||
// transcription. This is the crash-safety fix: whisper on a long clip can crash
|
||||
// the board (thermal), so the audio must already be on rootfs (not /tmp) and the
|
||||
// DB row created before whisper runs. Call transcribeWav() afterwards (async).
|
||||
// Wiedergabe-MP3 aus dem fertigen WAV — laeuft im HINTERGRUND (kein await im
|
||||
// Stop-Pfad, siehe stopAndSave). Geschrieben wird nach `<name>.mp3.part` und erst
|
||||
// dann umbenannt: so hoert der Browser nie eine halbe Datei, sondern bekommt bis
|
||||
// zum Umbenennen ein 404 (die GUI laedt den Player selbst nach).
|
||||
// Gentle cleanup for playback: cut low rumble + normalize loudness. Applied to
|
||||
// the MP3 only; whisper still transcribes the untouched WAV.
|
||||
// lame's psymodel asserts (`calc_energy: el >= 0`) on pure digital silence —
|
||||
// real since the gated mic path: nobody spoke = all-zero samples. Fall back
|
||||
// to a filterless encode instead of failing the whole stop.
|
||||
// KONSTANTE BITRATE, kein VBR (früher `-qscale:a 3`). Grund ist die
|
||||
// Wort-Markierung im Transkript: der Browser springt in einer VBR-MP3 über
|
||||
// die Xing-Tabelle, und die hat nur 100 Stützstellen — bei einer 63-Minuten-
|
||||
// Aufnahme also ein Raster von 38 s. Er landet auf der Stützstelle davor,
|
||||
// meldet aber die angefragte Zeit zurück. Gemessen an #85: Sprung auf 20:40
|
||||
// spielte in Wahrheit ab 20:11,5 (−28,5 s), die Markierung lief entsprechend
|
||||
// dem Ton voraus. Bei CBR ist die Byte-Position proportional zur Zeit, jeder
|
||||
// Sprung trifft damit auf Frame-Genauigkeit (~26 ms). 64 kbit ≈ die bisherige
|
||||
// Durchschnittsrate (68 kbit), die Dateigröße bleibt also praktisch gleich.
|
||||
// `-ar 48000` fest, damit der Fallback-Zweig ohne loudnorm nicht bei 16 kHz
|
||||
// landet (= MPEG-2.5, andere Framelänge).
|
||||
// `-write_xing 0` muss dazu: die Xing-Tabelle speichert Byte-Positionen nur
|
||||
// in 1/256 der Dateigröße, bei einer Stunde Audio also ~15 s grob — ein
|
||||
// Browser, der sie benutzt, wäre trotz CBR wieder daneben. Ohne sie rechnet
|
||||
// er linear, was bei CBR exakt ist (nachgemessen: 0,02 s = ein halber Frame).
|
||||
// '-f mp3' ist Pflicht, weil der Hintergrund-Encode nach '<name>.mp3.part'
|
||||
// schreibt: ffmpeg leitet den Muxer aus der Endung ab und bricht bei '.part'
|
||||
// mit 'Error initializing the muxer ... Invalid argument' ab.
|
||||
const MP3_ARGS = ['-codec:a', 'libmp3lame', '-b:a', '64k', '-ar', '48000', '-ac', '1', '-write_xing', '0', '-f', 'mp3'];
|
||||
|
||||
async function encodeMp3(wavPath, mp3Path) {
|
||||
const part = mp3Path + '.part';
|
||||
try {
|
||||
try {
|
||||
await pexec('ffmpeg', ['-y', '-i', wavPath,
|
||||
'-af', 'highpass=f=80,loudnorm=I=-16:TP=-1.5:LRA=11',
|
||||
...MP3_ARGS, part]);
|
||||
} catch (e) {
|
||||
console.warn('mp3 encode with filters failed (silence?), retrying plain:', String(e.message).slice(0, 200));
|
||||
await pexec('ffmpeg', ['-y', '-i', wavPath, ...MP3_ARGS, part]);
|
||||
}
|
||||
fs.renameSync(part, mp3Path);
|
||||
console.log(`mp3 fertig: ${path.basename(mp3Path)}`);
|
||||
} catch (e) {
|
||||
console.error('mp3 encode endgültig fehlgeschlagen:', String(e.message).slice(0, 300));
|
||||
try { fs.unlinkSync(part); } catch { }
|
||||
}
|
||||
}
|
||||
|
||||
export async function stopAndSave() {
|
||||
if (!current) throw new Error('not recording');
|
||||
const c = current; current = null;
|
||||
@@ -339,42 +387,20 @@ export async function stopAndSave() {
|
||||
throw new Error('Aufnahme leer/fehlgeschlagen. parecord: ' + c.err());
|
||||
|
||||
const base = `rec_${c.startTs}`;
|
||||
const mp3Path = path.join(REC_DIR, `${base}.mp3`);
|
||||
// Gentle cleanup for playback: cut low rumble + normalize loudness. Applied to
|
||||
// the MP3 only; whisper still transcribes the untouched WAV.
|
||||
// lame's psymodel asserts (`calc_energy: el >= 0`) on pure digital silence —
|
||||
// real since the gated mic path: nobody spoke = all-zero samples. Fall back
|
||||
// to a filterless encode instead of failing the whole stop.
|
||||
// KONSTANTE BITRATE, kein VBR (früher `-qscale:a 3`). Grund ist die
|
||||
// Wort-Markierung im Transkript: der Browser springt in einer VBR-MP3 über
|
||||
// die Xing-Tabelle, und die hat nur 100 Stützstellen — bei einer 63-Minuten-
|
||||
// Aufnahme also ein Raster von 38 s. Er landet auf der Stützstelle davor,
|
||||
// meldet aber die angefragte Zeit zurück. Gemessen an #85: Sprung auf 20:40
|
||||
// spielte in Wahrheit ab 20:11,5 (−28,5 s), die Markierung lief entsprechend
|
||||
// dem Ton voraus. Bei CBR ist die Byte-Position proportional zur Zeit, jeder
|
||||
// Sprung trifft damit auf Frame-Genauigkeit (~26 ms). 64 kbit ≈ die bisherige
|
||||
// Durchschnittsrate (68 kbit), die Dateigröße bleibt also praktisch gleich.
|
||||
// `-ar 48000` fest, damit der Fallback-Zweig ohne loudnorm nicht bei 16 kHz
|
||||
// landet (= MPEG-2.5, andere Framelänge).
|
||||
// `-write_xing 0` muss dazu: die Xing-Tabelle speichert Byte-Positionen nur
|
||||
// in 1/256 der Dateigröße, bei einer Stunde Audio also ~15 s grob — ein
|
||||
// Browser, der sie benutzt, wäre trotz CBR wieder daneben. Ohne sie rechnet
|
||||
// er linear, was bei CBR exakt ist (nachgemessen: 0,02 s = ein halber Frame).
|
||||
const MP3_ARGS = ['-codec:a', 'libmp3lame', '-b:a', '64k', '-ar', '48000', '-ac', '1', '-write_xing', '0'];
|
||||
try {
|
||||
await pexec('ffmpeg', ['-y', '-i', c.wavPath,
|
||||
'-af', 'highpass=f=80,loudnorm=I=-16:TP=-1.5:LRA=11',
|
||||
...MP3_ARGS, mp3Path]);
|
||||
} catch (e) {
|
||||
console.warn('mp3 encode with filters failed (silence?), retrying plain:', String(e.message).slice(0, 200));
|
||||
await pexec('ffmpeg', ['-y', '-i', c.wavPath, ...MP3_ARGS, mp3Path]);
|
||||
}
|
||||
|
||||
// Move the wav into REC_DIR (rootfs — survives a reboot); it is NOT left in
|
||||
// /tmp, so a crash during transcription can no longer lose it.
|
||||
// Zuerst das WAV in Sicherheit bringen (REC_DIR liegt im rootfs, nicht /tmp):
|
||||
// daran haengt alles Weitere — whisper transkribiert es, das Wiedergabe-MP3
|
||||
// entsteht daraus. Ein Absturz danach verliert nichts mehr.
|
||||
const wavFile = `${base}.wav`;
|
||||
try { fs.renameSync(c.wavPath, path.join(REC_DIR, wavFile)); }
|
||||
catch { fs.copyFileSync(c.wavPath, path.join(REC_DIR, wavFile)); try { fs.unlinkSync(c.wavPath); } catch {} }
|
||||
const wavDest = path.join(REC_DIR, wavFile);
|
||||
try { fs.renameSync(c.wavPath, wavDest); }
|
||||
catch { fs.copyFileSync(c.wavPath, wavDest); try { fs.unlinkSync(c.wavPath); } catch {} }
|
||||
|
||||
// MP3 NICHT mehr abwarten: der loudnorm-Encode laeuft nur ~40-fach, bei 35 min
|
||||
// Audio also ~51 s (gemessen an #114, ~1,4 s pro Aufnahmeminute). Genau diese
|
||||
// Zeit hing /api/record/stop, die GUI zeigte einen stumm ausgegrauten Knopf und
|
||||
// der Nutzer druckte ein zweites Mal Stop. Jetzt antwortet der Server sofort;
|
||||
// bis das MP3 da ist, liefert /media ein 404 und die GUI laedt den Player nach.
|
||||
encodeMp3(wavDest, path.join(REC_DIR, `${base}.mp3`));
|
||||
|
||||
return { mp3_file: `${base}.mp3`, wav_file: wavFile, duration_ms: dur,
|
||||
language: 'de', title: c.title, device: c.source, numSpeakers: c.numSpeakers,
|
||||
|
||||
+4
-1
@@ -632,7 +632,10 @@ async function sweepOrphans() {
|
||||
const keep = new Set(inUse);
|
||||
let removed = 0, bytes = 0;
|
||||
for (const f of fs.readdirSync(REC_DIR)) {
|
||||
if (!/^rec_.*\.(mp3|wav)$/.test(f) || keep.has(f)) continue;
|
||||
// `.mp3.part` = ein Encode, der gerade laeuft (recorder.js encodeMp3).
|
||||
// Faellt der Prozess mitten im Encode aus, bleibt die Halbdatei liegen —
|
||||
// die Altersgrenze ORPHAN_MIN_AGE_MS raeumt sie dann wie jede Waise weg.
|
||||
if (!/^rec_.*\.(mp3|wav)(\.part)?$/.test(f) || keep.has(f)) continue;
|
||||
const p = path.join(REC_DIR, f);
|
||||
try {
|
||||
const st = fs.statSync(p);
|
||||
|
||||
+54
-10
@@ -21,7 +21,14 @@ const state = { tab: 'recordings', recording: false, recStart: 0, timer: null, s
|
||||
// `ctxDrafts` hält getippten, noch nicht gespeicherten Text pro Aufnahme —
|
||||
// die Detailansicht baut sich nach der Analyse komplett neu, sonst wäre das
|
||||
// Getippte weg.
|
||||
ctxPromptFor: null, ctxDrafts: {} };
|
||||
ctxPromptFor: null, ctxDrafts: {},
|
||||
// `stopping` = der Stop-Klick ist raus, die Antwort steht noch aus. Der Server
|
||||
// braucht dafuer ~1,4 s pro aufgenommener Minute (ffmpeg-loudnorm ueber die
|
||||
// ganze Aufnahme, recorder.js stopAndSave; #114: 35 min Audio -> 51 s). Ohne
|
||||
// dieses Flag baut jeder render() - also auch ein Reiterwechsel - den Knopf
|
||||
// wieder klickbar auf; der zweite Klick schickt einen zweiten Stop, und der
|
||||
// scheitert mit "not recording", weil `current` serverseitig schon null ist.
|
||||
stopping: false };
|
||||
|
||||
function fmt(ms) { const s = Math.floor(ms / 1000); return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`; }
|
||||
function toast(msg, err) { const t = document.createElement('div'); t.className = 'toast' + (err ? ' err' : ''); t.textContent = msg; document.body.appendChild(t); setTimeout(() => t.remove(), 4000); }
|
||||
@@ -44,9 +51,11 @@ function render() {
|
||||
<h1>Aime <span class="sub">Anruf-Assistent</span></h1>
|
||||
</div>
|
||||
<div class="rec-ctl">
|
||||
<button id="recbtn" class="recbtn ${state.recording ? 'rec' : ''}" title="${state.recording ? 'Stop & Transkribieren' : 'Aufnahme starten'}">${state.recording ? '■' : '●'}</button>
|
||||
<button id="recbtn" class="recbtn ${state.recording && !state.stopping ? 'rec' : ''}" ${state.stopping ? 'disabled' : ''}
|
||||
title="${state.stopping ? 'Aufnahme wird gespeichert – bitte warten' : state.recording ? 'Stop & Transkribieren' : 'Aufnahme starten'}">${state.stopping ? '⏳' : state.recording ? '■' : '●'}</button>
|
||||
<span class="rectime mono" data-rectime>${state.recording ? fmt(Date.now() - state.recStart) : '00:00'}</span>
|
||||
${state.recording ? `
|
||||
${state.stopping ? '<span class="muted small">speichert…</span>' : ''}
|
||||
${state.recording && !state.stopping ? `
|
||||
<input id="mkname" class="input mkin" placeholder="Wer spricht? Name + Enter" value="${escapeHtml(state.mkDraft)}"
|
||||
title="Namen der Person eintippen, die JETZT spricht — der Zeitstempel ordnet ihn später dem Sprecher zu">
|
||||
<span id="mkcount" class="badge ${state.markers.length ? 'ok' : ''}" title="gesetzte Namensmarker">🏷 ${state.markers.length}</span>` : ''}
|
||||
@@ -72,7 +81,7 @@ function render() {
|
||||
paintSysmon(sysmon.last); // Werte sofort zurückmalen, render() leert das DOM
|
||||
startSysmon();
|
||||
bindMarkerInput();
|
||||
if (state.recording) startTimerUI();
|
||||
if (state.recording && !state.stopping) startTimerUI();
|
||||
({ bluetooth: viewBluetooth, recordings: viewRecordings, projects: viewProjects, search: viewSearch, voices: viewVoices, glossary: viewGlossary })[state.tab]();
|
||||
}
|
||||
|
||||
@@ -197,7 +206,6 @@ function startSysmon() {
|
||||
// codec auto, speaker count auto — the old options tab is gone on purpose).
|
||||
// A live placeholder card appears at the top of the recordings list instantly.
|
||||
async function toggleRecord() {
|
||||
const btn = document.querySelector('#recbtn');
|
||||
if (!state.recording) {
|
||||
try {
|
||||
await api.post('/api/record/start', {});
|
||||
@@ -207,11 +215,25 @@ async function toggleRecord() {
|
||||
if (state.tab === 'recordings') { state.lastListSig = null; refreshRecList(); }
|
||||
} catch (err) { toast(err.message, true); }
|
||||
} else {
|
||||
if (btn) { btn.disabled = true; }
|
||||
// Zweiter Klick, waehrend die erste Anfrage noch laeuft: ignorieren. Frueher
|
||||
// sah der Nutzer bis zu 51 s lang nur einen ausgegrauten Knopf, wechselte
|
||||
// den Reiter (= render(), Knopf wieder aktiv) und stoppte ein zweites Mal -
|
||||
// das lief dann in "Stop fehlgeschlagen: not recording".
|
||||
if (state.stopping) return;
|
||||
state.stopping = true;
|
||||
clearInterval(state.timer); state.timer = null;
|
||||
const recSec = Math.max(0, Math.round((Date.now() - state.recStart) / 1000));
|
||||
state.lastListSig = null; // Live-Karte auf "wird gespeichert" umschreiben
|
||||
render();
|
||||
// Ehrliche Wartezeit ansagen statt stumm auszugrauen: gemessen ~1,4 s
|
||||
// Encode pro aufgenommener Minute.
|
||||
const waitSec = Math.round(recSec * 1.4 / 60);
|
||||
toast(waitSec >= 5
|
||||
? `Aufnahme wird gespeichert… dauert etwa ${waitSec} s (${Math.round(recSec / 60)} min Audio)`
|
||||
: 'Aufnahme wird gespeichert…');
|
||||
try {
|
||||
const r = await api.post('/api/record/stop', {});
|
||||
state.recording = false;
|
||||
state.recording = false; state.stopping = false;
|
||||
toast('Aufnahme gespeichert – wird transkribiert…');
|
||||
// Kontextbox der frischen Aufnahme aufgeklappt anbieten: die Transkription
|
||||
// läuft jetzt minutenlang, der getippte Kontext ist also rechtzeitig da,
|
||||
@@ -220,7 +242,14 @@ async function toggleRecord() {
|
||||
state.tab = 'recordings'; render();
|
||||
state.lastListSig = null; refreshRecList();
|
||||
openRecording(r.id);
|
||||
} catch (err) { state.recording = false; toast('Stop fehlgeschlagen: ' + err.message, true); render(); }
|
||||
} catch (err) {
|
||||
state.recording = false; state.stopping = false;
|
||||
// "not recording" heisst: serverseitig ist schon gestoppt (zweites
|
||||
// Browserfenster, F5 mitten im Speichern) - kein Fehler fuer den Nutzer.
|
||||
if (/not recording/i.test(err.message)) toast('Aufnahme war bereits gestoppt');
|
||||
else toast('Stop fehlgeschlagen: ' + err.message, true);
|
||||
state.lastListSig = null; render(); refreshRecList();
|
||||
}
|
||||
}
|
||||
}
|
||||
// ---------- live speaker markers ----------
|
||||
@@ -1113,8 +1142,8 @@ async function refreshRecList() {
|
||||
const liveHtml = state.recording ? `
|
||||
<div class="item rec-live">
|
||||
<span class="rec-dot"></span>
|
||||
<div class="grow"><b>Aufnahme läuft…</b>
|
||||
<div class="muted">wird nach Stop transkribiert & analysiert</div>
|
||||
<div class="grow"><b>${state.stopping ? 'Aufnahme wird gespeichert…' : 'Aufnahme läuft…'}</b>
|
||||
<div class="muted">${state.stopping ? 'MP3 wird erzeugt, danach Transkription & Analyse' : 'wird nach Stop transkribiert & analysiert'}</div>
|
||||
<div class="mkchips" id="mkchips">${markerChipsHtml()}</div></div>
|
||||
<span class="rectime mono" data-rectime>${fmt(Date.now() - state.recStart)}</span>
|
||||
</div>` : '';
|
||||
@@ -1342,6 +1371,7 @@ async function openRecording(id) {
|
||||
<h2>${escapeHtml(r.title) || 'Aufnahme #' + r.id} ${analysisBadge(r.analysis_status)}</h2>
|
||||
<button class="btn icon rename-btn" id="renametitle" title="Titel umbenennen">✏️</button>
|
||||
<audio id="player" controls src="/media/${r.mp3_file}" preload="metadata"></audio>
|
||||
<div class="muted small hidden" id="mp3wait">🎧 Wiedergabe-Datei wird noch erzeugt – lädt automatisch nach…</div>
|
||||
${vizHtml}
|
||||
<div class="status-line">
|
||||
${anaTimeSpan(r) ? `<div class="muted ana-line">⏱ Analysezeit: ${anaTimeSpan(r)}</div>` : ''}
|
||||
@@ -1514,6 +1544,20 @@ async function openRecording(id) {
|
||||
setTimeout(pollDetail, 5000);
|
||||
}
|
||||
const audio = detail.querySelector('#player');
|
||||
// Direkt nach dem Stop gibt es die MP3 noch nicht: recorder.js encodeMp3 laeuft
|
||||
// im Hintergrund (~1,4 s pro Aufnahmeminute), /media liefert bis dahin 404.
|
||||
// Statt eines toten Players: Hinweis zeigen und alle 5 s neu laden. Nach 5 min
|
||||
// aufgeben — dann ist der Encode wirklich gescheitert (steht dann im Journal).
|
||||
if (audio) {
|
||||
const mp3wait = detail.querySelector('#mp3wait');
|
||||
let tries = 0;
|
||||
audio.addEventListener('error', () => {
|
||||
if (state.selectedId !== id || ++tries > 60) return;
|
||||
if (mp3wait) mp3wait.classList.remove('hidden');
|
||||
setTimeout(() => { if (state.selectedId === id) audio.load(); }, 5000);
|
||||
});
|
||||
audio.addEventListener('loadedmetadata', () => { if (mp3wait) mp3wait.classList.add('hidden'); });
|
||||
}
|
||||
// ---- marker actions (seek / add at playhead / delete / re-assign) ----
|
||||
detail.querySelectorAll('.mkseek').forEach(b => b.onclick = () => {
|
||||
audio.currentTime = (+b.dataset.t) / 1000 + 0.001; audio.play();
|
||||
|
||||
Reference in New Issue
Block a user