diff --git a/app/static/js/app.jsx b/app/static/js/app.jsx index 4d6cd23..144992d 100644 --- a/app/static/js/app.jsx +++ b/app/static/js/app.jsx @@ -2029,6 +2029,48 @@ function fxRtWsOnMessage(ev) { for (let i = 0; i < half; i++) { l[i] = f[i * 2]; r[i] = f[i * 2 + 1]; } fxRt.node.port.postMessage({ type: 'out', l, r }); } +// M25: shim giu nguyen API WebSocket cu (readyState/send/onopen/onmessage/ +// onclose/onerror) nhung WS + binary deinterleave chay tren Web Worker; output +// di THANG worker->worklet qua MessageChannel (directPort). ~20 call-site +// fxRt.ws giu nguyen - khong sua. Main chi nhan text (latency/flush_done). +function fxRtWsConnect(wsUrl, directPort) { + const _fireClose = (sh) => { + if (sh._closed) return; + sh._closed = true; + sh.readyState = 3; // CLOSED + try { if (sh._worker) sh._worker.terminate(); } catch (e) {} + if (sh.onclose) { try { sh.onclose(); } catch (e) {} } + }; + const shim = { + readyState: 0, + onopen: null, + onmessage: null, + onclose: null, + onerror: null, + _worker: null, + _closed: false, + send(data) { + if (this._closed || !this._worker || this.readyState !== 1) return; + try { + if (typeof data === 'string') this._worker.postMessage({ kind: 'send', text: data }); + // KHONG transfer list - fxRtChunks c.buffer reused (ws.send cu khong neuter) + else if (data instanceof ArrayBuffer) this._worker.postMessage({ kind: 'send', buf: data }); + } catch (e) {} + }, + close() { _fireClose(this); } + }; + try { shim._worker = new Worker(`${API_BASE_URL}/static/js/fx-rt-worker.js?v=202608291749`); } catch (e) { throw e; } // giong ws constructor that -> caller catch cu giu nguyen + shim._worker.onmessage = (ev) => { + const d = ev.data; + if (!d || shim._closed) return; + if (d.kind === 'open') { shim.readyState = 1; if (shim.onopen) { try { shim.onopen(); } catch (e) {} } return; } + if (d.kind === 'close') { _fireClose(shim); return; } + if (d.kind === 'text') { if (shim.onmessage) { try { shim.onmessage({ data: d.text }); } catch (e) {} } } + }; + shim._worker.onerror = () => _fireClose(shim); + try { shim._worker.postMessage({ kind: 'init', wsUrl, port: directPort || undefined }, directPort ? [directPort] : []); } catch (e) {} + return shim; +} async function fxRtStart() { // V21: mọi play/chain-change gọi đây — hủy idle timer của lần stop trước // (không để session warm bị teardown giữa lúc đang chơi). @@ -2177,9 +2219,14 @@ async function fxRtStart() { : u.host; const tok = localStorage.getItem('sonic_token') || ''; const wsUrl = `${wsProto}${wsHost}${st.ws_url}${tok ? '?token=' + encodeURIComponent(tok) : ''}`; - const ws = new WebSocket(wsUrl); + // M25: WS chay tren Web Worker - binary output/input di THANG + // worker<->worklet qua MessageChannel (directPort). Main-thread stall (rAF/ + // React/render luc cold start) khong con tre frame -> het underrun u1/u10. + // Text (latency/flush_done) van forward main nhu cu. + const _chan = new MessageChannel(); + try { fxRt.node.port.postMessage({ type: '__direct', port: _chan.port2 }, [_chan.port2]); } catch (e) {} + const ws = fxRtWsConnect(wsUrl, _chan.port1); fxRt.ws = ws; - ws.binaryType = 'arraybuffer'; ws.onopen = () => { if (token !== fxRt.startToken) { try { ws.close(); } catch (e) {} fxRt.starting = false; return; } fxRt.active = true; @@ -2468,9 +2515,11 @@ async function fxRtWarmEnsure(chain) { : u.host; const tok = localStorage.getItem('sonic_token') || ''; const wsUrl = `${wsProto}${wsHost}${st.ws_url}${tok ? '?token=' + encodeURIComponent(tok) : ''}`; + // M25: WS chay tren Web Worker - warm chua co node (khong directPort); + // worker van giu WS, binary drop trong worker nhu cu main drop (!fxRt.node). let ws; try { - ws = new WebSocket(wsUrl); + ws = fxRtWsConnect(wsUrl, null); } catch (e) { try { window.SonicAPI.fxRealtimeStop({ session_id: st.session_id }).catch(() => {}); } catch (e2) {} fxRt.sessionId = null; @@ -2479,7 +2528,6 @@ async function fxRtWarmEnsure(chain) { return null; } fxRt.ws = ws; - ws.binaryType = 'arraybuffer'; ws.onopen = () => { if (token !== fxRt.startToken) { // Bị thay bằng session mới hơn — dọn session mình vừa tạo (nếu vẫn là diff --git a/app/static/js/app.precompiled.js b/app/static/js/app.precompiled.js index 3dc2eb5..bbab85a 100644 --- a/app/static/js/app.precompiled.js +++ b/app/static/js/app.precompiled.js @@ -378,7 +378,14 @@ try{if(fxRt.node&&fxRt.node.port)fxRt.node.port.postMessage({type:'latency',samp if(fxRt.fadedIn)fxRtApplyPdc();}else if(d&&d.cmd==='flush_done'){// V24: engine da flush ring xong — mo lai nhan output + bao worklet // (worklet drop block cho ack nay; mat ack -> fallback timer nha). fxRt.flushing=false;if(fxRt.flushTimer){clearTimeout(fxRt.flushTimer);fxRt.flushTimer=null;}if(fxRt.node)fxRt.node.port.postMessage({type:'flush_done'});}}catch(e){}return;}if(!(ev.data instanceof ArrayBuffer)||!fxRt.node)return;if(fxRt.flushing)return;// V24: output stale trong luc flush — drop -const f=new Float32Array(ev.data);const half=f.length/2;let l=fxRt.outL,r=fxRt.outR;if(!l||l.length!==half){l=fxRt.outL=new Float32Array(half);r=fxRt.outR=new Float32Array(half);}for(let i=0;iworklet qua MessageChannel (directPort). ~20 call-site +// fxRt.ws giu nguyen - khong sua. Main chi nhan text (latency/flush_done). +function fxRtWsConnect(wsUrl,directPort){const _fireClose=sh=>{if(sh._closed)return;sh._closed=true;sh.readyState=3;// CLOSED +try{if(sh._worker)sh._worker.terminate();}catch(e){}if(sh.onclose){try{sh.onclose();}catch(e){}}};const shim={readyState:0,onopen:null,onmessage:null,onclose:null,onerror:null,_worker:null,_closed:false,send(data){if(this._closed||!this._worker||this.readyState!==1)return;try{if(typeof data==='string')this._worker.postMessage({kind:'send',text:data});// KHONG transfer list - fxRtChunks c.buffer reused (ws.send cu khong neuter) +else if(data instanceof ArrayBuffer)this._worker.postMessage({kind:'send',buf:data});}catch(e){}},close(){_fireClose(this);}};try{shim._worker=new Worker(`${API_BASE_URL}/static/js/fx-rt-worker.js?v=202608291749`);}catch(e){throw e;}// giong ws constructor that -> caller catch cu giu nguyen +shim._worker.onmessage=ev=>{const d=ev.data;if(!d||shim._closed)return;if(d.kind==='open'){shim.readyState=1;if(shim.onopen){try{shim.onopen();}catch(e){}}return;}if(d.kind==='close'){_fireClose(shim);return;}if(d.kind==='text'){if(shim.onmessage){try{shim.onmessage({data:d.text});}catch(e){}}}};shim._worker.onerror=()=>_fireClose(shim);try{shim._worker.postMessage({kind:'init',wsUrl,port:directPort||undefined},directPort?[directPort]:[]);}catch(e){}return shim;}async function fxRtStart(){// V21: mọi play/chain-change gọi đây — hủy idle timer của lần stop trước // (không để session warm bị teardown giữa lúc đang chơi). if(fxRtWarmIdleTimer){clearTimeout(fxRtWarmIdleTimer);fxRtWarmIdleTimer=null;}const chain=fxRtChain();const ck=fxRtChainKey(chain);const ckStruct=fxRtChainStructKey(chain);if(fxRt.active){// masterBus bị rebuild (recovery/export) → node thuộc graph cũ → restart. if(!fxRt.node||fxRt.node.context!==getAudioContext())fxRtStop(true);// Chain ĐỔI CẤU TRÚC (insert/remove/bypass/reorder/type) — KHÔNG restart @@ -425,10 +432,14 @@ if(fxRt.warm)fxRtStop(true);// Token chống race bypass: user bấm PWR/Bypass // node → bypass vô hiệu. Mỗi fxRtStop() bump startToken → mọi checkpoint // dưới đây thấy mismatch → hủy session vừa tạo, không nối node. const token=++fxRt.startToken;fxRt.starting=true;const ctx=getAudioContext();if(!ctx||!ctx.audioWorklet||!masterBus||!masterBus.output||!masterBus.analyser||!masterBus.masterFxGain||!masterBus.masterFxDryGain)return;const chainPayload=chain.map(s=>s.type==='vst3'?{type:'vst3',path:s.path,name:s.name||s.path,preset_b64:s.preset_b64||'',bypass:!!s.bypass||!!(window.currentMasteringSettings||{}).vstBypass}:{type:'builtin',id:s.type,params:s.params&&Object.keys(s.params).length?s.params:{},bypass:!!s.bypass});let st;try{st=await window.SonicAPI.fxRealtimeStart({fx_chain:chainPayload,sample_rate:ctx.sampleRate||44100});}catch(e){console.warn('[FX RT] start fail:',e);showToast('Không khởi động VST FX realtime: '+(e.message||e),'warning');fxRt.starting=false;return;}if(token!==fxRt.startToken){// Bypass/stop giữa lúc engine đang load chain — hủy session vừa tạo. -console.warn('[FX RT] start cancelled mid-flight — session stopped');try{window.SonicAPI.fxRealtimeStop({session_id:st.session_id}).catch(()=>{});}catch(e2){}fxRt.starting=false;return;}fxRt.sessionId=st.session_id;fxRtGuiPushShm();try{await ctx.audioWorklet.addModule(`${API_BASE_URL}/static/js/sf-fx-realtime.js?v=202609071125`);if(token!==fxRt.startToken){fxRt.starting=false;return;}fxRt.node=new AudioWorkletNode(ctx,'sf-fx-realtime',{numberOfInputs:1,numberOfOutputs:1,outputChannelCount:[2]});const u=new URL(API_BASE_URL);const wsProto=u.protocol==='https:'?'wss://':'ws://';// WS to 'localhost' bi tre ~300ms: Chromium thu ::1 truoc (Windows khong +console.warn('[FX RT] start cancelled mid-flight — session stopped');try{window.SonicAPI.fxRealtimeStop({session_id:st.session_id}).catch(()=>{});}catch(e2){}fxRt.starting=false;return;}fxRt.sessionId=st.session_id;fxRtGuiPushShm();try{await ctx.audioWorklet.addModule(`${API_BASE_URL}/static/js/sf-fx-realtime.js?v=202608291749`);if(token!==fxRt.startToken){fxRt.starting=false;return;}fxRt.node=new AudioWorkletNode(ctx,'sf-fx-realtime',{numberOfInputs:1,numberOfOutputs:1,outputChannelCount:[2]});const u=new URL(API_BASE_URL);const wsProto=u.protocol==='https:'?'wss://':'ws://';// WS to 'localhost' bi tre ~300ms: Chromium thu ::1 truoc (Windows khong // co listener IPv6 -> SYN hang ~2s) roi moi fallback 127.0.0.1. Dung // thang 127.0.0.1 (loopback) -> WS open ~5ms. Server chap nhan loopback. -const wsHost=u.hostname==='localhost'||u.hostname==='::1'?'127.0.0.1'+(u.port?':'+u.port:''):u.host;const tok=localStorage.getItem('sonic_token')||'';const wsUrl=`${wsProto}${wsHost}${st.ws_url}${tok?'?token='+encodeURIComponent(tok):''}`;const ws=new WebSocket(wsUrl);fxRt.ws=ws;ws.binaryType='arraybuffer';ws.onopen=()=>{if(token!==fxRt.startToken){try{ws.close();}catch(e){}fxRt.starting=false;return;}fxRt.active=true;fxRt.flushing=false;fxRt.starting=false;fxRt.inQueue=[];// bỏ audio stale sản xuất trước khi WS open (~4s load VST) — hết lag khởi đầu +const wsHost=u.hostname==='localhost'||u.hostname==='::1'?'127.0.0.1'+(u.port?':'+u.port:''):u.host;const tok=localStorage.getItem('sonic_token')||'';const wsUrl=`${wsProto}${wsHost}${st.ws_url}${tok?'?token='+encodeURIComponent(tok):''}`;// M25: WS chay tren Web Worker - binary output/input di THANG +// worker<->worklet qua MessageChannel (directPort). Main-thread stall (rAF/ +// React/render luc cold start) khong con tre frame -> het underrun u1/u10. +// Text (latency/flush_done) van forward main nhu cu. +const _chan=new MessageChannel();try{fxRt.node.port.postMessage({type:'__direct',port:_chan.port2},[_chan.port2]);}catch(e){}const ws=fxRtWsConnect(wsUrl,_chan.port1);fxRt.ws=ws;ws.onopen=()=>{if(token!==fxRt.startToken){try{ws.close();}catch(e){}fxRt.starting=false;return;}fxRt.active=true;fxRt.flushing=false;fxRt.starting=false;fxRt.inQueue=[];// bỏ audio stale sản xuất trước khi WS open (~4s load VST) — hết lag khởi đầu try{fxRtPushAllParams();}catch(e){}};ws.onmessage=fxRtWsOnMessage;ws.onclose=()=>fxRtStop(true);ws.onerror=()=>{try{ws.close();}catch(e){}};// Worklet gom 4 block (1024 mẫu) vào 1 frame → tách 4 WS frame 512 floats // ở đây. Bridge VST3 nhận input dồn → take=4 → batch 1 call process 1024 // mẫu (~3.5-4.75ms/block) → đủ 187.5/s (take=1: 5.5ms > budget 5.33ms → @@ -505,7 +516,9 @@ fxRt.active=false;fxRt.warm=true;fxRt.latencyTotal=0;}// C: warm-ensure — tạ async function fxRtWarmEnsure(chain){if(!chain||!chain.length)return null;if(fxRt.starting)return null;if(fxRt.active&&fxRt.sessionId)return null;const ctx=getAudioContext();if(!ctx||!ctx.audioWorklet)return null;const token=++fxRt.startToken;fxRt.starting=true;const chainPayload=chain.map(s=>s.type==='vst3'?{type:'vst3',path:s.path,name:s.name||s.path,preset_b64:s.preset_b64||'',bypass:!!s.bypass||!!(window.currentMasteringSettings||{}).vstBypass}:{type:'builtin',id:s.type,params:s.params&&Object.keys(s.params).length?s.params:{},bypass:!!s.bypass});let st;try{st=await window.SonicAPI.fxRealtimeStart({fx_chain:chainPayload,sample_rate:ctx.sampleRate||44100});}catch(e){console.warn('[FX RT] warm-ensure start fail:',e);fxRt.starting=false;return null;}if(token!==fxRt.startToken){// stop/cold-start đã bump token giữa lúc chờ -> dọn session orphan này. try{window.SonicAPI.fxRealtimeStop({session_id:st.session_id}).catch(()=>{});}catch(e2){}return null;// không reset starting — người bump (fxRtStop/fxRtStart) sở hữu nó }fxRt.sessionId=st.session_id;fxRtGuiPushShm();const u=new URL(API_BASE_URL);const wsProto=u.protocol==='https:'?'wss://':'ws://';// WS to 'localhost' bi tre ~300ms (xem fxRtStart) — dùng 127.0.0.1 loopback. -const wsHost=u.hostname==='localhost'||u.hostname==='::1'?'127.0.0.1'+(u.port?':'+u.port:''):u.host;const tok=localStorage.getItem('sonic_token')||'';const wsUrl=`${wsProto}${wsHost}${st.ws_url}${tok?'?token='+encodeURIComponent(tok):''}`;let ws;try{ws=new WebSocket(wsUrl);}catch(e){try{window.SonicAPI.fxRealtimeStop({session_id:st.session_id}).catch(()=>{});}catch(e2){}fxRt.sessionId=null;fxRtGuiPushShm();fxRt.starting=false;return null;}fxRt.ws=ws;ws.binaryType='arraybuffer';ws.onopen=()=>{if(token!==fxRt.startToken){// Bị thay bằng session mới hơn — dọn session mình vừa tạo (nếu vẫn là +const wsHost=u.hostname==='localhost'||u.hostname==='::1'?'127.0.0.1'+(u.port?':'+u.port:''):u.host;const tok=localStorage.getItem('sonic_token')||'';const wsUrl=`${wsProto}${wsHost}${st.ws_url}${tok?'?token='+encodeURIComponent(tok):''}`;// M25: WS chay tren Web Worker - warm chua co node (khong directPort); +// worker van giu WS, binary drop trong worker nhu cu main drop (!fxRt.node). +let ws;try{ws=fxRtWsConnect(wsUrl,null);}catch(e){try{window.SonicAPI.fxRealtimeStop({session_id:st.session_id}).catch(()=>{});}catch(e2){}fxRt.sessionId=null;fxRtGuiPushShm();fxRt.starting=false;return null;}fxRt.ws=ws;ws.onopen=()=>{if(token!==fxRt.startToken){// Bị thay bằng session mới hơn — dọn session mình vừa tạo (nếu vẫn là // session hiện tại) + đóng ws. if(fxRt.sessionId===st.session_id){fxRt.sessionId=null;try{window.SonicAPI.fxRealtimeStop({session_id:st.session_id}).catch(()=>{});}catch(e){}fxRtGuiPushShm();}try{ws.close();}catch(e){}return;}fxRt.starting=false;fxRt.warm=true;fxRt.chainKey=fxRtChainKey(chain);fxRt.chainStructKey=fxRtChainStructKey(chain);};ws.onmessage=fxRtWsOnMessage;ws.onclose=()=>{// Chỉ teardown khi ws này vẫn là session hiện tại (guard session mới hơn). if(token===fxRt.startToken&&fxRt.sessionId===st.session_id)fxRtStop(true);};ws.onerror=()=>{try{ws.close();}catch(e){}};return st.session_id;}// C: bảo đảm session realtime sống cho GUI master native của path: PWR ON đã @@ -2224,7 +2237,7 @@ fxRtTrackReconcile(trackId,node,track);}catch(e){console.warn('rebuildTrackFxGra // Cần activeTrackNodesRef/isPlayingRef. Session giống master (fxRtStart): // fetch start → AudioWorkletNode 'sf-fx-realtime' → WS; WS open → splice // worklet vào chain hiện tại (đọc mods MỚI NHẤT — an toàn với rebuild). -const fxRtTrackStart=async(trackId,track,path)=>{const key=trackId+':'+path;const chain=fxRtTrackChain(track);if(!chain.length)return;if(fxRtTracks[key]){if(!fxRtTracks[key].node||fxRtTracks[key].node.context!==getAudioContext())fxRtTrackStop(trackId,path,true);else return;}const ctx=getAudioContext();if(!ctx||!ctx.audioWorklet)return;const chainPayload=chain.map(s=>s.type==='vst3'?{type:'vst3',path:s.path,name:s.name||s.path,preset_b64:s.preset_b64||'',bypass:!!s.bypass||!!(track&&track.vstFxBypass)}:{type:'builtin',id:s.type,params:s.params&&Object.keys(s.params).length?s.params:{},bypass:!!s.bypass});let st;try{st=await window.SonicAPI.fxRealtimeStart({fx_chain:chainPayload,sample_rate:ctx.sampleRate||44100});}catch(e){console.warn('[FX RT track] start fail',trackId,path,e);return;}const entry={sessionId:st.session_id,ws:null,node:null,ready:false,path,spliced:null,chainKey:fxRtTrackChainKey(chain)+'|vb:'+(track&&track.vstFxBypass?'1':'0'),paramsBySlot:chain.map(s=>fxRtEntryParams(s,null)),inQueue:[],pumpTimer:null,lastInSent:0,flushing:false,flushTimer:null};fxRtTracks[key]=entry;fxRtGuiPushShm();try{await ctx.audioWorklet.addModule(`${API_BASE_URL}/static/js/sf-fx-realtime.js?v=202609071125`);const node=new AudioWorkletNode(ctx,'sf-fx-realtime',{numberOfInputs:1,numberOfOutputs:1,outputChannelCount:[2]});entry.node=node;const u=new URL(API_BASE_URL);const wsProto=u.protocol==='https:'?'wss://':'ws://';// WS to 'localhost' bi tre ~300ms (Chromium thu ::1 truoc roi fallback) - dung 127.0.0.1 +const fxRtTrackStart=async(trackId,track,path)=>{const key=trackId+':'+path;const chain=fxRtTrackChain(track);if(!chain.length)return;if(fxRtTracks[key]){if(!fxRtTracks[key].node||fxRtTracks[key].node.context!==getAudioContext())fxRtTrackStop(trackId,path,true);else return;}const ctx=getAudioContext();if(!ctx||!ctx.audioWorklet)return;const chainPayload=chain.map(s=>s.type==='vst3'?{type:'vst3',path:s.path,name:s.name||s.path,preset_b64:s.preset_b64||'',bypass:!!s.bypass||!!(track&&track.vstFxBypass)}:{type:'builtin',id:s.type,params:s.params&&Object.keys(s.params).length?s.params:{},bypass:!!s.bypass});let st;try{st=await window.SonicAPI.fxRealtimeStart({fx_chain:chainPayload,sample_rate:ctx.sampleRate||44100});}catch(e){console.warn('[FX RT track] start fail',trackId,path,e);return;}const entry={sessionId:st.session_id,ws:null,node:null,ready:false,path,spliced:null,chainKey:fxRtTrackChainKey(chain)+'|vb:'+(track&&track.vstFxBypass?'1':'0'),paramsBySlot:chain.map(s=>fxRtEntryParams(s,null)),inQueue:[],pumpTimer:null,lastInSent:0,flushing:false,flushTimer:null};fxRtTracks[key]=entry;fxRtGuiPushShm();try{await ctx.audioWorklet.addModule(`${API_BASE_URL}/static/js/sf-fx-realtime.js?v=202608291749`);const node=new AudioWorkletNode(ctx,'sf-fx-realtime',{numberOfInputs:1,numberOfOutputs:1,outputChannelCount:[2]});entry.node=node;const u=new URL(API_BASE_URL);const wsProto=u.protocol==='https:'?'wss://':'ws://';// WS to 'localhost' bi tre ~300ms (Chromium thu ::1 truoc roi fallback) - dung 127.0.0.1 const wsHost=u.hostname==='localhost'||u.hostname==='::1'?'127.0.0.1'+(u.port?':'+u.port:''):u.host;const tok=localStorage.getItem('sonic_token')||'';const ws=new WebSocket(`${wsProto}${wsHost}${st.ws_url}${tok?'?token='+encodeURIComponent(tok):''}`);entry.ws=ws;ws.binaryType='arraybuffer';ws.onopen=()=>{entry.ready=true;entry.inQueue=[];// bỏ audio stale trước khi WS open — hết lag khởi đầu fxRtTrackSplice(trackId,path);try{(entry.paramsBySlot||[]).forEach((pl,slot)=>pl.forEach(p=>ws.send(JSON.stringify({cmd:'set_param',slot,key:p.key,value:p.value}))));}catch(e){}};ws.onmessage=ev=>{if(typeof ev.data==='string'){try{const d=JSON.parse(ev.data);if(d&&d.cmd==='flush_done'){entry.flushing=false;if(entry.flushTimer){clearTimeout(entry.flushTimer);entry.flushTimer=null;}if(entry.node)entry.node.port.postMessage({type:'flush_done'});}}catch(e){}return;}if(!(ev.data instanceof ArrayBuffer)||!entry.node)return;if(entry.flushing)return;// V24: output stale trong luc flush — drop const f=new Float32Array(ev.data);const half=f.length/2;const l=new Float32Array(half);const r=new Float32Array(half);for(let i=0;ifxRtTrackStop(trackId,path,true);ws.onerror=()=>{try{ws.close();}catch(e){}};entry.node.port.onmessage=ev=>{const d=ev.data;if(!d||!entry.ws)return;if(d.type==='flush'){// V24: nhu master — worklet underrun-resume → flush engine ring diff --git a/app/static/js/fx-rt-worker.js b/app/static/js/fx-rt-worker.js new file mode 100644 index 0000000..c291ed9 --- /dev/null +++ b/app/static/js/fx-rt-worker.js @@ -0,0 +1,85 @@ +// fx-rt-worker.js — M25: WebSocket FX realtime chạy trên Web Worker. +// Động lực: main thread bị stall (rAF/React/render, longtask 375ms lúc cold +// start) làm trễ cả WS receive lẫn postMessage → worklet queue cạn → underrun +// nghe được (u1/u10). Chuyển WS + deinterleave sang worker; binary output đi +// THẲNG worker→worklet qua MessageChannel (directPort) — delivery không phụ +// thuộc event loop main → stall main không còn tạo hole âm thanh. Text +// (latency/flush_done) vẫn forward main (PDC/UI). Input: worklet gửi thẳng +// qua directPort ngược chiều (cùng channel, 2 chiều). +// +// Protocol main→worker: +// {kind:'init', wsUrl, port} port = MessagePort tới worklet (transfer) +// {kind:'send', text|buf} send 1 frame (text cmd hoặc binary input) +// {kind:'close'} +// Protocol worker→main: +// {kind:'open'} | {kind:'close'} | {kind:'text', text} (chỉ text; binary +// không bao giờ chạm main) +let ws = null; +let directPort = null; +let flushing = false; // từ lúc gửi cmd 'flush' tới flush_done — drop output stale (V24, cùng logic fxRt.flushing phía main cũ) + +self.onmessage = (ev) => { + const d = ev.data; + if (!d) return; + if (d.kind === 'init') { + directPort = d.port || null; + if (directPort) { + // Input burst 2048 floats (4 block) — tách 4 WS frame 512 floats như + // fxRtSendFrames cũ (frame = 1 block 256 stereo; slice() copy đúng + // 2048B, KHÔNG subarray().buffer = gửi cả backing 8192B). + directPort.onmessage = (e2) => { + const d2 = e2.data; + if (!d2 || d2.type !== 'in' || !(d2.data instanceof ArrayBuffer)) return; + if (!ws || ws.readyState !== 1) return; + try { + const f = new Float32Array(d2.data); + for (let i = 0; i < f.length; i += 512) { + const c = new Float32Array(512); + c.set(f.subarray(i, i + 512)); + ws.send(c.buffer); + } + } catch (e) {} + }; + } + try { ws = new WebSocket(d.wsUrl); } catch (e) { self.postMessage({ kind: 'close' }); return; } + ws.binaryType = 'arraybuffer'; + ws.onopen = () => self.postMessage({ kind: 'open' }); + ws.onmessage = (mev) => { + if (typeof mev.data === 'string') { + try { + const c = JSON.parse(mev.data); + if (c && c.cmd === 'flush_done') { + flushing = false; + // Xóa cờ worklet NGAY trên cùng channel (trước mọi 'out' kế — FIFO) + // — không chờ main forward (main có thể bận/stall). + if (directPort) directPort.postMessage({ type: 'flush_done' }); + } + } catch (e) {} + self.postMessage({ kind: 'text', text: mev.data }); + return; + } + if (!(mev.data instanceof ArrayBuffer) || flushing || !directPort) return; + // Deinterleave stereo (giống fxRtWsOnMessage cũ) → gửi thẳng worklet. + const f = new Float32Array(mev.data); + const half = f.length / 2; + const l = new Float32Array(half); + const r = new Float32Array(half); + for (let i = 0, j = 0; i < half; i++) { l[i] = f[j++]; r[i] = f[j++]; } + directPort.postMessage({ type: 'out', l, r }); + }; + ws.onclose = () => self.postMessage({ kind: 'close' }); + ws.onerror = () => { try { ws.close(); } catch (e) {} }; + return; + } + if (d.kind === 'send') { + if (!ws || ws.readyState !== 1) return; + if (d.text !== undefined) { + try { const c = JSON.parse(d.text); if (c && c.cmd === 'flush') flushing = true; } catch (e) {} + try { ws.send(d.text); } catch (e) {} + } else if (d.buf !== undefined) { + try { ws.send(d.buf); } catch (e) {} + } + return; + } + if (d.kind === 'close') { try { if (ws) ws.close(); } catch (e) {} } +}; diff --git a/app/static/js/sf-fx-realtime.js b/app/static/js/sf-fx-realtime.js index 24054ab..eae363c 100644 --- a/app/static/js/sf-fx-realtime.js +++ b/app/static/js/sf-fx-realtime.js @@ -64,6 +64,23 @@ class SfFxRealtimeProcessor extends AudioWorkletProcessor { this.fadeFromR = 0.0; this.port.onmessage = (e) => { const d = e.data; + // M25: nhận MessageChannel port từ main (worker FX realtime) — output + // đi THẲNG worker→worklet (bỏ hop main thread, hết underrun lớp u1/u10); + // input burst 'in' cũng gửi thẳng ngược chiều trên cùng port. Track FX + // path (không có directPort) vẫn dùng node.port như cũ — không đụng. + if (d && d.type === '__direct') { + const _dp = (e.ports && e.ports[0]) || (d.port) || null; + if (_dp) { + this.directPort = _dp; + this.directPort.onmessage = (e2) => { + const d2 = e2.data; + if (!d2) return; + if (d2.type === 'out' && d2.l && d2.r) this._enqueueOut(d2.l, d2.r); + else if (d2.type === 'flush_done') this.flushPending = false; + }; + } + return; + } if (d && d.type === 'set_param') { this.port.postMessage(d); return; } if (d && d.type === 'flush_done') { this.flushPending = false; return; } if (d && d.type === 'latency') { this.latencySamples = (d.samples || 0); return; } @@ -197,29 +214,7 @@ class SfFxRealtimeProcessor extends AudioWorkletProcessor { return; } if (!d || d.type !== 'out' || !d.l || !d.r) return; - // V24: đang chờ flush (resume sau underrun/stall) → drop block stale. - // Backlog engine gửi khi worklet im là audio CŨ (chơi lại → lag cộng dồn - // ~1s) — chỉ nhận block MỚI từ sau flush_done. - if (this.stopped || this.flushPending) return; - this.outQueue.push({ l: d.l, r: d.r }); - if (this.dbgOutFirst) { - this.dbgOutFirst = false; - this.port.postMessage({ type: 'dbg', tag: 'fx_out_first', t: Math.round(currentTime * 1000), q: this.outQueue.length }); - } - while (this.outQueue.length > this.CAP) { - this.outQueue.shift(); - this.statCapDrop++; - // V23: drop cứng = jump mẫu → click. Crossfade 64 mẫu từ mẫu output - // cuối sang block mới; chỉ đặt 1 lần cho đợt drop liên tiếp. outPos=0: - // block mới (front) phải phát từ đầu, không tiếp tục vị trí block cũ. - if (this.skipFade <= 0) { - this.skipFade = 64; - this.skipFadeTotal = 64; - this.skipFromL = this.lastOutL; - this.skipFromR = this.lastOutR; - } - this.outPos = 0; - } + this._enqueueOut(d.l, d.r); }; // Telemetry (chẩn đoán crackle trên session thật): đếm sự kiện + báo main // thread mỗi ~2s. Nếu user bật master FX nghe crackle mà stats cho thấy @@ -234,6 +229,30 @@ class SfFxRealtimeProcessor extends AudioWorkletProcessor { this.dbgOutFirst = false; this.dbgPlayFirst = false; } + // M25: enqueue 1 block output — dùng chung cho node.port (track FX) và + // directPort (master FX worker→worklet thẳng). Logic giữ nguyên V24/V23. + _enqueueOut(l, r) { + if (this.stopped || this.flushPending) return; + this.outQueue.push({ l: l, r: r }); + if (this.dbgOutFirst) { + this.dbgOutFirst = false; + this.port.postMessage({ type: 'dbg', tag: 'fx_out_first', t: Math.round(currentTime * 1000), q: this.outQueue.length }); + } + while (this.outQueue.length > this.CAP) { + this.outQueue.shift(); + this.statCapDrop++; + // V23: drop cứng = jump mẫu → click. Crossfade 64 mẫu từ mẫu output + // cuối sang block mới; chỉ đặt 1 lần cho đợt drop liên tiếp. outPos=0: + // block mới (front) phải phát từ đầu, không tiếp tục vị trí block cũ. + if (this.skipFade <= 0) { + this.skipFade = 64; + this.skipFadeTotal = 64; + this.skipFromL = this.lastOutL; + this.skipFromR = this.lastOutR; + } + this.outPos = 0; + } + } process(inputs, outputs) { const input = inputs[0]; const output = outputs[0]; @@ -258,7 +277,15 @@ class SfFxRealtimeProcessor extends AudioWorkletProcessor { inter[j * 2] = this.inL[j]; inter[j * 2 + 1] = this.inR[j]; } - this.port.postMessage({ type: 'in', data: inter.buffer }, [inter.buffer]); + if (this.directPort) { + // M25: master FX — input burst đi THẲNG worklet→worker (bỏ hop + // main; main stall không làm gián đoạn nguồn input → engine không + // ngừng sản xuất output). + this.directPort.postMessage({ type: 'in', data: inter.buffer }, [inter.buffer]); + } else { + // Track FX / chưa có directPort — legacy qua main thread. + this.port.postMessage({ type: 'in', data: inter.buffer }, [inter.buffer]); + } this.inCount = 0; if (this.dbgInFirst) { this.dbgInFirst = false; diff --git a/build.mjs b/build.mjs index b10ad11..3483da2 100644 --- a/build.mjs +++ b/build.mjs @@ -12,6 +12,7 @@ const transformed = Babel.transform(src, { filename: 'app.jsx', sourceType: 'script', }).code; -const out = transformed.replace(/(sf-fx-realtime\.js\?v=)\d+/g, '$1' + ver); +// M25: gom ca fx-rt-worker.js vao cache-buster (worker URL trong app.jsx). +const out = transformed.replace(/((?:sf-fx-realtime|fx-rt-worker)\.js\?v=)\d+/g, '$1' + ver); writeFileSync('app/static/js/app.precompiled.js', out.replace(/\r?\n/g, '\r\n')); // repo CRLF console.log('BUILD OK', 'v=' + ver, out.length, 'bytes');