Offer an MP3 download alongside the WAV

A 5.5-hour take is ~950MB of WAV; as 96kbps mono MP3 it's ~6x smaller
with no audible loss for 24kHz speech. The server encodes lazily on
first request (lameenc in a worker thread, cached per take, pruned with
the audio store) at /api/audio/{id}.mp3; the dock and stage grow a
Download MP3 button pointing there, shown only while the server still
holds the take.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app.py

@@ -519,6 +519,7 @@ def _prune_audio_store() -> None:
     ]
     for k in stale:
         AUDIO_STORE.pop(k, None)
+        MP3_CACHE.pop(k, None)
 
 
 # --- Abuse guardrails ---
@@ -803,6 +804,46 @@ async def api_last_take() -> dict:
     }
 
 
+MP3_CACHE: dict[str, bytes] = {}  # audio_id -> encoded mp3, built lazily on first request
+
+
+def _encode_mp3(wav_bytes: bytes) -> bytes:
+    """Encode our PCM16 WAV to mono MP3 (96 kbps — transparent for 24kHz speech)."""
+    import lameenc
+
+    sample_rate, samples = wavfile.read(io.BytesIO(wav_bytes))
+    if samples.ndim > 1:
+        samples = samples[:, 0]
+    if samples.dtype != np.int16:
+        samples = np.asarray(samples, dtype=np.int16)
+    encoder = lameenc.Encoder()
+    encoder.set_bit_rate(96)
+    encoder.set_in_sample_rate(int(sample_rate))
+    encoder.set_channels(1)
+    encoder.set_quality(2)
+    mp3 = bytes(encoder.encode(samples.tobytes()))
+    mp3 += bytes(encoder.flush())
+    return mp3
+
+
+@app.get("/api/audio/{audio_id}.mp3")
+async def api_audio_mp3(audio_id: str) -> Response:
+    entry = AUDIO_STORE.get(audio_id)
+    if entry is None:
+        raise HTTPException(status_code=404, detail="Audio not found or expired.")
+    if audio_id not in MP3_CACHE:
+        _, wav_bytes = entry
+        # Encoding hours of audio takes minutes of CPU — keep the event loop free.
+        MP3_CACHE[audio_id] = await asyncio.get_event_loop().run_in_executor(
+            None, _encode_mp3, wav_bytes
+        )
+    return Response(
+        content=MP3_CACHE[audio_id],
+        media_type="audio/mpeg",
+        headers={"Content-Disposition": 'attachment; filename="conference.mp3"'},
+    )
+
+
 @app.get("/api/audio/{audio_id}")
 async def api_audio(audio_id: str) -> Response:
     entry = AUDIO_STORE.get(audio_id)

requirements.txt

@@ -5,3 +5,4 @@ modal
 huggingface_hub
 numpy
 scipy
+lameenc

static/app.js

@@ -82,6 +82,7 @@ const el = {};
   "stageDot", "stageLine", "stageSpeaker", "stageCloseBtn", "stageDownloadBtn",
   "stageScriptToggle", "stageTranscript",
   "generationTime", "audioDuration", "resultModel", "downloadBtn",
+  "downloadMp3Btn", "stageDownloadMp3Btn",
   "logToggleBtn", "logBox",
   "voiceLibraryDialog", "closeLibraryBtn", "librarySearch", "libraryFilters", "libraryGrid", "libraryTitle",
   "cloneVoiceBtn", "cloneDialog", "closeCloneBtn", "recordBtn", "cloneFileInput", "recordTimer",
@@ -1588,12 +1589,21 @@ async function downloadTakeBlob(audioId) {
   return new Blob(parts, { type: audioRes.headers.get("Content-Type") || "audio/wav" });
 }
 
-async function presentTake(blob, durationSeconds, snapshot) {
+async function presentTake(blob, durationSeconds, snapshot, audioId) {
   setStatus("complete");
   const url = URL.createObjectURL(blob);
   el.resultAudio.src = url;
   el.downloadBtn.href = url;
   el.stageDownloadBtn.href = url;
+  // MP3 comes from the server (encoded lazily there) — only offer it while
+  // the server still holds this take.
+  const mp3Url = audioId ? `/api/audio/${audioId}.mp3` : null;
+  el.downloadMp3Btn.hidden = !mp3Url;
+  el.stageDownloadMp3Btn.hidden = !mp3Url;
+  if (mp3Url) {
+    el.downloadMp3Btn.href = mp3Url;
+    el.stageDownloadMp3Btn.href = mp3Url;
+  }
   el.audioDuration.textContent = formatDuration(durationSeconds);
   el.playerTime.textContent = `0:00 / ${formatClock(durationSeconds)}`;
   el.stageTime.textContent = `0:00 / ${formatClock(durationSeconds)}`;
@@ -1641,7 +1651,7 @@ async function checkLastTake() {
         el.generationTime.textContent = "--";
         el.resultModel.textContent = "recovered";
         state.resultTitle = "Recovered take";
-        await presentTake(blob, info.duration, []);
+        await presentTake(blob, info.duration, [], info.audio_id);
       } catch (error) {
         setStatus("error", error.message);
         btn.disabled = false;
@@ -1762,7 +1772,7 @@ el.generateBtn.addEventListener("click", async () => {
           el.generationTime.textContent = formatDuration((performance.now() - started) / 1000);
           el.resultModel.textContent = state.model;
           state.resultTitle = el.scriptTitle.textContent;
-          await presentTake(blob, evt.audio_duration, turnsSnapshot);
+          await presentTake(blob, evt.audio_duration, turnsSnapshot, evt.audio_id);
         }
       }
     }

static/index.html

@@ -173,6 +173,8 @@
             <div><span>Model</span> <strong id="resultModel">--</strong></div>
           </div>
           <a id="downloadBtn" class="btn btn-pill-outline" download="chorus-audio.wav">Download WAV</a>
+          <a id="downloadMp3Btn" class="btn btn-pill-outline" download="chorus-audio.mp3"
+             title="Much smaller file — the server encodes it on first click, which can take a minute or two for long takes">Download MP3 (smaller)</a>
           <audio id="resultAudio" hidden></audio>
         </div>
 
@@ -200,6 +202,8 @@
         </div>
         <div class="stage-actions">
           <a class="btn btn-ink" id="stageDownloadBtn" download="chorus-audio.wav">Download WAV</a>
+          <a class="btn btn-pill-outline" id="stageDownloadMp3Btn" download="chorus-audio.mp3"
+             title="Much smaller file — encoded on the server on first click">MP3</a>
           <button class="btn btn-pill-outline" id="stageScriptToggle" type="button">View full script</button>
         </div>
         <div class="synced-transcript stage-transcript" id="stageTranscript" hidden></div>

static/styles.css

@@ -466,6 +466,7 @@ select:focus { outline: none; border-color: #d9a98c; }
 }
 .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
 .btn-accent:disabled { background: #d9a98c; border-color: #d9a98c; opacity: 1; }
+.result-block .btn-pill-outline { margin-bottom: 8px; }
 .btn-pill-outline {
   display: block;
   text-align: center;