From cf6a8b75d061bd688acd7e070496614dca7617d8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 30 Apr 2026 22:41:53 +0000
Subject: [PATCH] add lo-fi Opus effect via WebCodecs

Adds a bitrate dropdown next to the SAVE button. Selecting a non-zero
value runs the rendered AudioBuffer through AudioEncoder (Opus) at the
chosen bitrate and immediately back through AudioDecoder. The decoded
PCM is then written to WAV and downloaded, so the saved file audibly
contains Opus codec artifacts (more pronounced at lower bitrates).
---
 src/components/Toolbar.css | 16 ++++++-
 src/components/Toolbar.jsx | 49 ++++++++++++++++++--
 src/utils/exportWav.js     |  8 ++--
 src/utils/lofiCodec.js     | 95 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 159 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/lofiCodec.js

diff --git a/src/components/Toolbar.css b/src/components/Toolbar.css
index abc344f..49453e3 100644
--- a/src/components/Toolbar.css
+++ b/src/components/Toolbar.css
@@ -24,12 +24,26 @@
   }
 
   .button_save {
-    margin-left: var(--spacer);
+    margin-left: calc(var(--spacer) / 2);
     padding: 0 10px;
     cursor: pointer;
     letter-spacing: 0.05em;
   }
 
+  .select_lofi {
+    margin-left: var(--spacer);
+    padding: 0 10px;
+    text-transform: uppercase;
+    border-radius: 0;
+    -webkit-appearance: none;
+    -webkit-border-radius: 0px;
+  }
+
+  .select_lofi:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   .button_save:disabled {
     cursor: progress;
     opacity: 0.6;
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 25ff0f8..16753bc 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -1,9 +1,22 @@
 import { useContext, memo, useState } from "react";
 import { sequenceList } from "../constants/config";
 import { Context } from "../Provider";
-import { renderSequenceToWav, downloadBlob } from "../utils/exportWav";
+import {
+  renderSequence,
+  audioBufferToWavBlob,
+  downloadBlob,
+} from "../utils/exportWav";
+import { applyOpusLofi, isWebCodecsSupported } from "../utils/lofiCodec";
 import "./Toolbar.css";
 
+const LOFI_OPTIONS = [
+  { value: 0, label: "Hi-Fi" },
+  { value: 64000, label: "64k Opus" },
+  { value: 32000, label: "32k Opus" },
+  { value: 16000, label: "16k Opus" },
+  { value: 6000, label: "6k Opus" },
+];
+
 const ToolBar = ({
   setStartTime,
   setPastLapse,
@@ -17,6 +30,7 @@ const ToolBar = ({
   const { sequence, selectSequence } = useContext(Context);
   const { id: selectedSequenceID, title: sequenceTitle } = sequence;
   const [isSaving, setIsSaving] = useState(false);
+  const [lofiBitrate, setLofiBitrate] = useState(0);
 
   function togglePlayback() {
     if (isSequencePlaying) {
@@ -39,14 +53,25 @@ const ToolBar = ({
   async function saveTrack() {
     setIsSaving(true);
     try {
-      const blob = await renderSequenceToWav({
+      // Opus only natively supports 8/12/16/24/48kHz; render at 48k when lo-fi
+      // is enabled to avoid an extra resampling step before the encoder.
+      const sampleRate = lofiBitrate ? 48000 : 44100;
+      const rendered = await renderSequence({
         sequence,
         BPM: Number(BPM),
         totalSteps,
         totalBeats,
+        sampleRate,
       });
+      const finalBuffer = lofiBitrate
+        ? await applyOpusLofi(rendered, lofiBitrate)
+        : rendered;
       const safeName = String(sequenceTitle).replace(/\s+/g, "_").toLowerCase();
-      downloadBlob(blob, `${safeName}_${BPM}bpm.wav`);
+      const suffix = lofiBitrate ? `_opus${lofiBitrate / 1000}k` : "";
+      downloadBlob(
+        audioBufferToWavBlob(finalBuffer),
+        `${safeName}_${BPM}bpm${suffix}.wav`,
+      );
     } finally {
       setIsSaving(false);
     }
@@ -103,6 +128,24 @@ const ToolBar = ({
       <label className="label_bpm" htmlFor="bpm">
         BPM
       </label>
+      <select
+        className="form_element select_lofi"
+        value={lofiBitrate}
+        onChange={(e) => setLofiBitrate(+e.target.value)}
+        disabled={!isWebCodecsSupported}
+        aria-label="Lo-fi bitrate"
+        title={
+          isWebCodecsSupported
+            ? "Run the saved track through Opus at this bitrate"
+            : "WebCodecs not supported in this browser"
+        }
+      >
+        {LOFI_OPTIONS.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
       <button
         className="form_element button_save"
         onClick={saveTrack}
diff --git a/src/utils/exportWav.js b/src/utils/exportWav.js
index 8653505..b87f48a 100644
--- a/src/utils/exportWav.js
+++ b/src/utils/exportWav.js
@@ -1,7 +1,6 @@
 import { soundFiles } from '../constants/config'
 
-export async function renderSequenceToWav({ sequence, BPM, totalSteps, totalBeats }) {
-    const sampleRate = 44100
+export async function renderSequence({ sequence, BPM, totalSteps, totalBeats, sampleRate = 44100 }) {
     const numChannels = 2
     const tailSeconds = 1
     const durationSeconds = (60 / BPM) * totalBeats + tailSeconds
@@ -33,11 +32,10 @@ export async function renderSequenceToWav({ sequence, BPM, totalSteps, totalBeat
         }
     }
 
-    const rendered = await offlineCtx.startRendering()
-    return audioBufferToWavBlob(rendered)
+    return await offlineCtx.startRendering()
 }
 
-function audioBufferToWavBlob(buffer) {
+export function audioBufferToWavBlob(buffer) {
     const numChannels = buffer.numberOfChannels
     const sampleRate = buffer.sampleRate
     const bytesPerSample = 2
diff --git a/src/utils/lofiCodec.js b/src/utils/lofiCodec.js
new file mode 100644
index 0000000..a42fd56
--- /dev/null
+++ b/src/utils/lofiCodec.js
@@ -0,0 +1,95 @@
+export const isWebCodecsSupported =
+    typeof globalThis.AudioEncoder !== 'undefined' &&
+    typeof globalThis.AudioDecoder !== 'undefined' &&
+    typeof globalThis.AudioData !== 'undefined'
+
+// Push the rendered AudioBuffer through Opus at the given bitrate, then decode
+// it back to PCM. Lower bitrate = more audible codec artifacts.
+export async function applyOpusLofi(audioBuffer, bitrate) {
+    if (!isWebCodecsSupported) {
+        throw new Error('WebCodecs AudioEncoder/AudioDecoder not available in this browser')
+    }
+
+    const sampleRate = audioBuffer.sampleRate
+    const numberOfChannels = audioBuffer.numberOfChannels
+
+    const encoderConfig = { codec: 'opus', sampleRate, numberOfChannels, bitrate }
+    const support = await AudioEncoder.isConfigSupported(encoderConfig)
+    if (!support.supported) {
+        throw new Error(`Opus config not supported: ${JSON.stringify(encoderConfig)}`)
+    }
+
+    // Per-channel buffers we'll fill from decoded AudioData frames.
+    const decodedChunks = Array.from({ length: numberOfChannels }, () => [])
+    let totalDecodedFrames = 0
+    let pipelineError = null
+
+    const decoder = new AudioDecoder({
+        output: (audioData) => {
+            const frames = audioData.numberOfFrames
+            for (let c = 0; c < audioData.numberOfChannels; c++) {
+                const chunk = new Float32Array(frames)
+                audioData.copyTo(chunk, { planeIndex: c, format: 'f32-planar' })
+                decodedChunks[c].push(chunk)
+            }
+            totalDecodedFrames += frames
+            audioData.close()
+        },
+        error: (e) => { pipelineError = e },
+    })
+    decoder.configure({ codec: 'opus', sampleRate, numberOfChannels })
+
+    const encoder = new AudioEncoder({
+        output: (chunk) => decoder.decode(chunk),
+        error: (e) => { pipelineError = e },
+    })
+    encoder.configure(encoderConfig)
+
+    // Feed the rendered buffer into the encoder in 20ms slices. WebCodecs is
+    // happy with any size, but matching Opus' native frame size keeps things
+    // tidy and timestamps clean.
+    const framesPerChunk = Math.floor(sampleRate * 0.02)
+    const totalFrames = audioBuffer.length
+    const channelData = []
+    for (let c = 0; c < numberOfChannels; c++) channelData.push(audioBuffer.getChannelData(c))
+
+    for (let offset = 0; offset < totalFrames; offset += framesPerChunk) {
+        const frames = Math.min(framesPerChunk, totalFrames - offset)
+        // f32-planar = each channel laid out contiguously, back-to-back.
+        const planar = new Float32Array(frames * numberOfChannels)
+        for (let c = 0; c < numberOfChannels; c++) {
+            planar.set(channelData[c].subarray(offset, offset + frames), c * frames)
+        }
+        // Timestamps are in microseconds.
+        const timestamp = Math.round((offset / sampleRate) * 1_000_000)
+        const data = new AudioData({
+            format: 'f32-planar',
+            sampleRate,
+            numberOfFrames: frames,
+            numberOfChannels,
+            timestamp,
+            data: planar,
+        })
+        encoder.encode(data)
+        data.close()
+    }
+
+    await encoder.flush()
+    encoder.close()
+    await decoder.flush()
+    decoder.close()
+
+    if (pipelineError) throw pipelineError
+
+    const result = new AudioBuffer({ sampleRate, length: totalDecodedFrames, numberOfChannels })
+    for (let c = 0; c < numberOfChannels; c++) {
+        const merged = new Float32Array(totalDecodedFrames)
+        let p = 0
+        for (const arr of decodedChunks[c]) {
+            merged.set(arr, p)
+            p += arr.length
+        }
+        result.copyToChannel(merged, c, 0)
+    }
+    return result
+}