feat: VST FX rack per-track + masterbus render via native_bridge

This commit is contained in:
2026-08-17 21:31:57 +07:00
parent 8fbacd1d2b
commit b261eb0d7e
18 changed files with 1805 additions and 14 deletions
+200 -2
View File
@@ -10885,6 +10885,8 @@ const serializeTracksList = (tracksList, secondsPerBar) => {
synth_engine: t.synth_engine || undefined,
midi_channel: t.midiChannel !== undefined ? t.midiChannel : null,
fx_chain: (t.fxChain || []).map(m => typeof m === 'string' ? { type: m, active: true } : { type: m.type, active: m.active !== false }),
vst_fx_chain: (t.vstFxChain || []).map(s => ({ type: s.type || 'vst3', path: s.path || '', name: s.name || '', preset_b64: s.preset_b64 || '', bypass: !!s.bypass })),
vst_fx_bypass: !!t.vstFxBypass,
server_file_id: t.serverFileId || null,
items: items
};
@@ -10985,6 +10987,8 @@ const deserializeTracksList = (schemaTracks, secondsPerBar, sectionStore, visite
soundfont_program: t.soundfont_program !== null ? t.soundfont_program : undefined,
synth_engine: t.synth_engine || undefined,
fxChain: (t.fx_chain || []).map(m => typeof m === 'string' ? { type: m, active: true } : { type: m.type || m, active: m.active !== false }),
vstFxChain: (t.vst_fx_chain || []).map(s => ({ type: s.type || 'vst3', path: s.path || '', name: s.name || '', preset_b64: s.preset_b64 || '', bypass: !!s.bypass })),
vstFxBypass: t.vst_fx_bypass !== undefined ? !!t.vst_fx_bypass : false,
};
});
};
@@ -11094,7 +11098,15 @@ const serializeProjectToSchema = (projectId, name, bpmVal, tracksList, subTabsLi
return maxBar;
})(),
auto_compute_length: true,
tracks: mainTracks
tracks: mainTracks,
...(masteringSettings && Array.isArray(masteringSettings.vstFxChain) && masteringSettings.vstFxChain.length > 0 ? {
master: {
fx_chain: masteringSettings.vstFxChain.map(s => ({ type: s.type || 'vst3', path: s.path || '', name: s.name || '', preset_b64: s.preset_b64 || '', bypass: !!s.bypass })),
volume_db: 0,
mute: false,
bypass: !!masteringSettings.vstBypass
}
} : {})
},
sub_tabs: subTabs,
section_store: sectionStore,
@@ -11177,12 +11189,19 @@ const deserializeProjectFromSchema = (schemaObj) => {
return migrated;
};
const _migratedMastering = _migrateMasteringSettings(schemaObj.mastering_settings) || {};
const _masterBus = (schemaObj.main_session && schemaObj.main_session.master) || {};
const _masterFx = Array.isArray(_masterBus.fx_chain) ? _masterBus.fx_chain : [];
return {
bpm: bpmVal,
tracks: restoredTracks,
sessionTabs: restoredSessionTabs,
subTabs: restoredSubTabs,
masteringSettings: _migrateMasteringSettings(schemaObj.mastering_settings),
masteringSettings: {
..._migratedMastering,
vstFxChain: _masterFx.map(s => ({ type: s.type || 'vst3', path: s.path || '', name: s.name || '', preset_b64: s.preset_b64 || '', bypass: !!s.bypass })),
vstBypass: !!_masterBus.bypass
},
zoom: schemaObj.metadata && schemaObj.metadata.zoom ? parseFloat(schemaObj.metadata.zoom) : 1.0
};
};
@@ -11735,6 +11754,25 @@ const ExportModal = ({ open, onClose, exportSettings, setExportSettings, isExpor
);
};
const vstRow = (s, idx, toggleV, changeV, uploadV, moveV, removeV, fxl, chainLen) => (
<div key={idx} className="flex items-center gap-2 bg-slate-900/60 border border-slate-800 rounded-lg px-2 py-1.5 flex-wrap">
<button onClick={() => toggleV(idx)} className={`w-4 h-4 rounded-full flex items-center justify-center text-[9px] font-bold shrink-0 ${!s.bypass ? 'bg-teal-500 text-slate-950' : 'bg-slate-700 text-slate-300'}`} title={s.bypass ? 'Bypass' : 'Active'}>
<i data-lucide="power" className="w-2.5 h-2.5"></i>
</button>
<span className="text-[10px] font-bold text-slate-300 font-mono w-6 shrink-0">{idx + 1}</span>
<select value={s.path || ''} onChange={e => changeV(idx, e.target.value)} className="flex-1 min-w-[200px] bg-slate-950 border border-slate-700 text-teal-300 rounded px-2 py-1 text-[11px] outline-none focus:border-teal-500">
<option value="">— Chọn VST FX —</option>
{(fxl || []).map(f => <option key={f.path} value={f.path}>{f.name || f.id}</option>)}
</select>
<span className={`text-[9px] font-mono ${s.preset_b64 ? 'text-emerald-400' : 'text-slate-600'}`}>{s.preset_b64 ? '✓ preset' : 'no preset'}</span>
<button onClick={() => uploadV(idx)} className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[10px] font-semibold rounded transition" title="Upload .vstpreset xuất từ Carla (Save preset)">Preset</button>
<button onClick={() => { if (!s.path) { window.showToast && window.showToast('Chọn VST FX trước', 'warning'); return; } window.SonicAPI.openInCarla(s.name || s.path, s.path).then(r => { if (r && r.success) window.showToast && window.showToast('Đã mở Carla với ' + (s.name || s.path) + ' — chỉnh âm trong Carla rồi Save preset', 'success'); else window.showToast && window.showToast('Không mở được Carla', 'error'); }).catch(err => window.showToast && window.showToast('Lỗi mở Carla: ' + (err.message || err), 'error')); }} className="px-2 py-1 bg-teal-800 hover:bg-teal-700 text-teal-100 text-[10px] font-semibold rounded transition" title="Mở native GUI trong Carla">Carla</button>
<button onClick={() => moveV(idx, -1)} disabled={idx === 0} className="w-6 h-6 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded text-xs disabled:opacity-30" title="Lên"><i data-lucide="chevron-up" className="w-3 h-3"></i></button>
<button onClick={() => moveV(idx, 1)} disabled={idx === chainLen - 1} className="w-6 h-6 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded text-xs disabled:opacity-30" title="Xuống"><i data-lucide="chevron-down" className="w-3 h-3"></i></button>
<button onClick={() => removeV(idx)} className="text-slate-600 hover:text-red-400 text-xs px-0.5" title="Xóa slot"><i data-lucide="x" className="w-3 h-3"></i></button>
</div>
);
const FXRackModal = ({ track, onUpdateTrack, onClose }) => {
const [activeType, setActiveType] = React.useState('eq');
const [addModuleOpen, setAddModuleOpen] = React.useState(false);
@@ -11758,9 +11796,59 @@ const FXRackModal = ({ track, onUpdateTrack, onClose }) => {
}
}, [track && track.id]);
// VST FX (native_bridge --render-fx) — list VST3 effect plugins + preview
const [fxList, setFxList] = React.useState([]);
React.useEffect(() => {
if (window.SonicAPI && window.SonicAPI.listFx) {
window.SonicAPI.listFx().then(d => setFxList((d && d.plugins) || [])).catch(() => setFxList([]));
}
}, [track && track.id]);
const previewAudioRef = React.useRef(null);
const [vstBypass, setVstBypass] = React.useState(!!(track && track.vstFxBypass));
const [addVstSel, setAddVstSel] = React.useState('');
if (!track) return null;
const chain = track.fxChain || [];
// ── VST FX chain (native_bridge --render-fx, áp dụng khi Export/Offline render) ──
const vstChain = (track.vstFxChain || []);
const setVstChain = (next) => { if (onUpdateTrack) onUpdateTrack(track.id, { vstFxChain: next, vstFxBypass: vstBypass }); };
const toggleVst = (idx) => setVstChain(vstChain.map((s, i) => i === idx ? { ...s, bypass: !s.bypass } : s));
const removeVst = (idx) => setVstChain(vstChain.filter((_, i) => i !== idx));
const moveVst = (idx, dir) => { const j = idx + dir; if (j < 0 || j >= vstChain.length) return; const next = [...vstChain]; const mv = next.splice(idx, 1)[0]; next.splice(j, 0, mv); setVstChain(next); };
const addVst = (path) => { const fx = (fxList || []).find(f => f.path === path); if (!fx) return; setVstChain([...vstChain, { type: 'vst3', path: fx.path, name: fx.name || fx.id, preset_b64: '', bypass: false }]); };
const changeVstPlugin = (idx, path) => { const fx = (fxList || []).find(f => f.path === path); setVstChain(vstChain.map((s, i) => i === idx ? { ...s, path, name: fx ? (fx.name || fx.id) : s.name, preset_b64: '' } : s)); };
const uploadVstPreset = (idx) => {
const inp = document.createElement('input');
inp.type = 'file';
inp.accept = '.vstpreset,.fxp,.fxb,.dspreset';
inp.onchange = () => {
const f = inp.files && inp.files[0];
if (!f) return;
const reader = new FileReader();
reader.onload = () => {
const b64 = String(reader.result || '').split(',')[1] || '';
setVstChain(vstChain.map((s, i) => i === idx ? { ...s, preset_b64: b64 } : s));
window.showToast && window.showToast('Đã gắn preset .vstpreset vào slot ' + (idx + 1), 'success');
};
reader.readAsDataURL(f);
};
inp.click();
};
const previewFx = async () => {
try {
if (previewAudioRef.current) { previewAudioRef.current.pause(); previewAudioRef.current = null; }
if (!window.__renderProjectPreview) { window.showToast && window.showToast('Không có hàm render preview', 'warning'); return; }
window.showToast && window.showToast('Đang render offline (bridge)...', 'info');
const res = await window.__renderProjectPreview();
const au = new Audio((window.API_BASE_URL || '') + res.url);
previewAudioRef.current = au;
au.onended = () => { previewAudioRef.current = null; };
au.play().then(() => window.showToast && window.showToast('Preview offline — âm thật = âm export (VST FX)', 'success')).catch(() => {});
} catch (e) { /* toast ở __renderProjectPreview */ }
};
const setChain = (next) => {
if (onUpdateTrack) onUpdateTrack(track.id, { fxChain: next });
if (window.__rebuildTrackFxGraph) window.__rebuildTrackFxGraph(track.id);
@@ -12033,6 +12121,30 @@ const FXRackModal = ({ track, onUpdateTrack, onClose }) => {
</button>
</div>
{/* VST FX CHAIN (native_bridge --render-fx — áp dụng khi Export/Offline render) */}
<div className="bg-slate-950 border border-teal-900/60 rounded-xl px-3 py-2 flex flex-col gap-2 shrink-0 select-none">
<div className="flex items-center justify-between flex-wrap gap-2">
<div className="flex items-center gap-2 min-w-0">
<span className="text-[10px] font-bold text-teal-400 uppercase tracking-widest font-mono shrink-0">VST FX:</span>
<span className="text-[9px] text-slate-500 font-mono truncate">Plugin VST3 (Ozone...) — realtime browser vẫn WebAudio builtin; VST áp dụng lúc Export/Offline render (preview = âm export)</span>
</div>
<div className="flex items-center gap-2 shrink-0">
<button onClick={previewFx} className="px-2 py-1 bg-teal-800 hover:bg-teal-700 text-teal-100 text-[10px] font-semibold rounded transition flex items-center gap-1">
<i data-lucide="play" className="w-3 h-3"></i> Nghe thử (render offline)
</button>
<label className="flex items-center gap-1 text-[10px] text-slate-400 font-mono cursor-pointer">
<input type="checkbox" checked={vstBypass} onChange={e => { const val = e.target.checked; setVstBypass(val); if (onUpdateTrack) onUpdateTrack(track.id, { vstFxBypass: val }); }} className="w-3 h-3" /> Bypass
</label>
</div>
</div>
{vstChain.length === 0 && <div className="text-[10px] text-slate-500 font-mono">Chưa có VST FX — chọn plugin bên dưới để thêm vào insert chain (WebAudio chain → VST FX → Fader).</div>}
{vstChain.map((s, idx) => vstRow(s, idx, toggleVst, changeVstPlugin, uploadVstPreset, moveVst, removeVst, fxList, vstChain.length))}
<select value={addVstSel} onChange={e => { setAddVstSel(e.target.value); if (e.target.value) { addVst(e.target.value); setAddVstSel(''); } }} className="w-full bg-slate-950 border border-dashed border-slate-700 hover:border-teal-600 text-teal-300 rounded px-2 py-1.5 text-[11px] outline-none" title="Thêm VST FX">
<option value="">+ Thêm VST FX...</option>
{(fxList || []).map(f => <option key={f.path} value={f.path}>{f.name || f.id}</option>)}
</select>
</div>
{/* WORKSPACE CONTROLS */}
<div className="flex-1 bg-slate-950 border border-slate-800 rounded-xl p-4 flex flex-col gap-4 min-h-[240px] overflow-y-auto oz-scrollbar">
<div className="h-8 bg-slate-900/80 border-b border-slate-800/80 px-3 flex items-center justify-between text-xs font-mono rounded-t-lg shrink-0">
@@ -12257,6 +12369,44 @@ const MasteringModal = ({ isOpen, onClose, masteringSettings, setMasteringSettin
}));
};
// ── VST FX masterbus (native_bridge --render-fx, áp dụng khi Export/Offline render) ──
const masterVstChain = (ozState.vstFxChain || []);
const setMasterVstChain = (next) => setOzState(prev => ({ ...prev, vstFxChain: next }));
const toggleMasterVst = (idx) => setMasterVstChain(masterVstChain.map((s, i) => i === idx ? { ...s, bypass: !s.bypass } : s));
const removeMasterVst = (idx) => setMasterVstChain(masterVstChain.filter((_, i) => i !== idx));
const moveMasterVst = (idx, dir) => { const j = idx + dir; if (j < 0 || j >= masterVstChain.length) return; const next = [...masterVstChain]; const mv = next.splice(idx, 1)[0]; next.splice(j, 0, mv); setMasterVstChain(next); };
const addMasterVst = (path) => { const fx = (masterFxList || []).find(f => f.path === path); if (!fx) return; setMasterVstChain([...masterVstChain, { type: 'vst3', path: fx.path, name: fx.name || fx.id, preset_b64: '', bypass: false }]); };
const changeMasterVstPlugin = (idx, path) => { const fx = (masterFxList || []).find(f => f.path === path); setMasterVstChain(masterVstChain.map((s, i) => i === idx ? { ...s, path, name: fx ? (fx.name || fx.id) : s.name, preset_b64: '' } : s)); };
const uploadMasterVstPreset = (idx) => {
const inp = document.createElement('input');
inp.type = 'file';
inp.accept = '.vstpreset,.fxp,.fxb,.dspreset';
inp.onchange = () => {
const f = inp.files && inp.files[0];
if (!f) return;
const reader = new FileReader();
reader.onload = () => {
const b64 = String(reader.result || '').split(',')[1] || '';
setMasterVstChain(masterVstChain.map((s, i) => i === idx ? { ...s, preset_b64: b64 } : s));
window.showToast && window.showToast('Đã gắn preset .vstpreset vào slot ' + (idx + 1), 'success');
};
reader.readAsDataURL(f);
};
inp.click();
};
const previewMasterFx = async () => {
try {
if (previewAudioRef.current) { previewAudioRef.current.pause(); previewAudioRef.current = null; }
if (!window.__renderProjectPreview) { window.showToast && window.showToast('Không có hàm render preview', 'warning'); return; }
window.showToast && window.showToast('Đang render offline (bridge)...', 'info');
const res = await window.__renderProjectPreview();
const au = new Audio((window.API_BASE_URL || '') + res.url);
previewAudioRef.current = au;
au.onended = () => { previewAudioRef.current = null; };
au.play().then(() => window.showToast && window.showToast('Preview offline — âm thật = âm export (VST FX)', 'success')).catch(() => {});
} catch (e) { /* toast ở __renderProjectPreview */ }
};
const audioRef = React.useRef({ source: null });
const eqCanvasRef = React.useRef(null);
const imagerCanvasRef = React.useRef(null);
@@ -12266,6 +12416,16 @@ const MasteringModal = ({ isOpen, onClose, masteringSettings, setMasteringSettin
const lufsAccRef = React.useRef([]);
const knobsInitializedRef = React.useRef(false);
// VST FX masterbus (native_bridge --render-fx) — list VST3 effect plugins + preview
const [masterFxList, setMasterFxList] = React.useState([]);
React.useEffect(() => {
if (window.SonicAPI && window.SonicAPI.listFx) {
window.SonicAPI.listFx().then(d => setMasterFxList((d && d.plugins) || [])).catch(() => setMasterFxList([]));
}
}, []);
const previewAudioRef = React.useRef(null);
const [addMasterVstSel, setAddMasterVstSel] = React.useState('');
// Wave Observer Refs & States
const woCanvasRef = React.useRef(null);
const woLeftHistoryRef = React.useRef(new Float32Array(400).fill(0));
@@ -12966,6 +13126,30 @@ const MasteringModal = ({ isOpen, onClose, masteringSettings, setMasteringSettin
</button>
</div>
{/* VST FX MASTERBUS (native_bridge --render-fx — áp dụng khi Export/Offline render) */}
<div className="bg-slate-950 border-b border-teal-900/60 px-4 py-2 flex flex-col gap-2 shrink-0">
<div className="flex items-center justify-between flex-wrap gap-2">
<div className="flex items-center gap-2 min-w-0">
<span className="text-[10px] font-bold text-teal-400 uppercase tracking-widest oz-font-mono shrink-0">VST FX MASTERBUS:</span>
<span className="text-[9px] text-slate-500 oz-font-mono truncate">Plugin VST3 (Ozone...) — realtime browser vẫn WebAudio builtin; VST áp dụng lúc Export/Offline render (preview = âm export)</span>
</div>
<div className="flex items-center gap-2 shrink-0">
<button onClick={previewMasterFx} className="px-2 py-1 bg-teal-800 hover:bg-teal-700 text-teal-100 text-[10px] font-semibold rounded transition flex items-center gap-1">
<i data-lucide="play" className="w-3 h-3"></i> Nghe thử (render offline)
</button>
<label className="flex items-center gap-1 text-[10px] text-slate-400 oz-font-mono cursor-pointer">
<input type="checkbox" checked={!!ozState.vstBypass} onChange={e => setOzState(prev => ({ ...prev, vstBypass: e.target.checked }))} className="w-3 h-3" /> Bypass
</label>
</div>
</div>
{masterVstChain.length === 0 && <div className="text-[10px] text-slate-500 oz-font-mono">Chưa có VST FX masterbus — chọn plugin bên dưới (Ozone...) để chạy chain sau khi mix WebAudio.</div>}
{masterVstChain.map((s, idx) => vstRow(s, idx, toggleMasterVst, changeMasterVstPlugin, uploadMasterVstPreset, moveMasterVst, removeMasterVst, masterFxList, masterVstChain.length))}
<select value={addMasterVstSel} onChange={e => { setAddMasterVstSel(e.target.value); if (e.target.value) { addMasterVst(e.target.value); setAddMasterVstSel(''); } }} className="w-full bg-slate-950 border border-dashed border-slate-700 hover:border-teal-600 text-teal-300 rounded px-2 py-1.5 text-[11px] outline-none" title="Thêm VST FX">
<option value="">+ Thêm VST FX...</option>
{(masterFxList || []).map(f => <option key={f.path} value={f.path}>{f.name || f.id}</option>)}
</select>
</div>
{/* MAIN WORKSPACE */}
<main className="flex-1 flex overflow-hidden min-h-0">
@@ -17417,6 +17601,18 @@ const App = () => {
// Unified FX Rack target context (unified_fx_rack_panel.md): { trackId, trackName } | null
const [fxRackTarget, setFxRackTarget] = useState(null);
window.__openFxRack = (trackId, trackName) => setFxRackTarget({ trackId, trackName });
// Render offline toàn project qua native_bridge (VST FX masterbus + track) → WAV.
// Dùng cho nút "Nghe thử" trong FX Rack / Mastering — preview = âm export.
window.__renderProjectPreview = async () => {
const schema = serializeProjectToSchema(currentProjectId || 'temp_project', projectName || 'Dự án tạm chưa lưu', bpm, tracks, subTabs, sessionTabs, masteringSettings);
try {
const res = await window.SonicAPI.renderProject(schema, 'preview_' + Date.now() + '.wav');
return res;
} catch (e) {
window.showToast && window.showToast('Render preview lỗi: ' + (e.message || e), 'error');
throw e;
}
};
const [masteringSettings, setMasteringSettings] = useState({
masterConnected: true, // ⚠️ FIX: bật ON mặc định — MIDI item/preview PHẢI được xử lí qua mastering FX ngay khi chạy app (không cần bật/tắt power)
activeModule: 'eq',
@@ -17443,6 +17639,8 @@ const App = () => {
limActive: false, limThreshold: -1.0,
excActive: false, excDrive: 40,
rebalActive: false, rebalMid: 0, rebalSide: 0,
vstFxChain: [],
vstBypass: false,
});
useEffect(() => {
File diff suppressed because one or more lines are too long
+2
View File
@@ -90,6 +90,8 @@ window.API_BASE_URL = (window.API_BASE_URL || window.location.origin).replace(/\
// Render MIDI notes → WAV bằng VSTi (pedalboard, âm thật) — trả file_id
// để UI preview / gán clip vào track / download
midiRender: (payload) => apiRequest('/api/v1/plugins/midi-render', { method: 'POST', body: JSON.stringify(payload) }),
listFx: () => apiRequest('/api/v1/plugins/fx', { method: 'GET' }),
fxRender: (payload) => apiRequest('/api/v1/plugins/fx-render', { method: 'POST', body: JSON.stringify(payload) }),
soundfontRender: (payload) => apiRequest('/api/v1/plugins/soundfont-render', { method: 'POST', body: JSON.stringify(payload) }),
// Phát dãy MIDI notes realtime qua Carla bridge (OSC) — preview khi
// pedalboard không render được plugin (VD VST2)