feat: migrate SpessaSynth → FluidSynth WASM (SF3 native, loop Gen 54 fix)

Replace SpessaSynth JS/AudioWorklet with FluidSynth C++ WASM (@enikey87/fluidsynth-emscripten@0.1.1). CDN for dev, self-host for prod. Fixes stuck Tremolo/Saxophone notes via compliant Gen 44 loop mode processing. 100% audio parity with server pyfluidsynth render (same C++ core). - soundfontPlayer.js: FluidSynth WASM engine, preserve SonicSF API - fluidsynthLoader.js: auto-select CDN (dev) vs self-host (prod) - fluidsynth-bridge.js: PCM bridge AudioWorklet processor - index.html: remove SpessaSynth importmap + module, add loader - vendor/: libfluidsynth-2.3.0-sf3.js + .wasm (1.8MB self-host)
2026-07-27 12:48:30 +07:00
parent 81dc9a0354
commit ef1238b87d
7 changed files with 341 additions and 181 deletions
@@ -0,0 +1,23 @@
+window.__FluidSynthReady = new Promise(function (resolve) {
+  var FLUIDSYNTH_SRC;
+
+  if (window.__FLUIDSYNTH_CDN) {
+    FLUIDSYNTH_SRC = window.__FLUIDSYNTH_CDN;
+  } else if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+    FLUIDSYNTH_SRC = 'https://cdn.jsdelivr.net/npm/@enikey87/fluidsynth-emscripten@0.1.1/dist/libfluidsynth-2.3.0-sf3.js';
+  } else {
+    FLUIDSYNTH_SRC = '/static/js/vendor/libfluidsynth-2.3.0-sf3.js';
+  }
+
+  var script = document.createElement('script');
+  script.type = 'module';
+  script.textContent = [
+    'import FluidsynthModule from "' + FLUIDSYNTH_SRC + '";',
+    'window.__FluidSynthModuleFactory = FluidsynthModule;',
+    'window.__FluidSynthReadyResolver = function() { window.__FluidSynthReadyResolve(); };',
+    'console.log("[FluidSynth] Loaded from:", "' + FLUIDSYNTH_SRC + '");'
+  ].join('\n');
+  document.head.appendChild(script);
+
+  window.__FluidSynthReadyResolve = resolve;
+});
@@ -1,16 +1,34 @@
 (function () {
-    'use strict';
+    const RENDER_BLOCK = 512;
+    const QUEUE_TARGET = 4;
+    let _audioCtx = null;
+    let _fluidModule = null;
+    let _synthPtr = null;
+    let _settingsPtr = null;
+    let _workletNode = null;
+    let _initialized = false;
+    let _initPromise = null;
+    let _currentSfId = null;
+    let _sfHandleMap = new Map();
+    let _channels = Array.from({ length: 16 }, () => ({ bank: 0, program: 0, isPercussion: false }));
+    let _nextMelodicChannel = 0;
+    let _sustainStates = new Array(16).fill(false);
+    let _leftBufPtr = null;
+    let _rightBufPtr = null;
+    let _renderTimer = null;
+    let _pendingNoteTimers = [];
+    let _loadedFonts = {};
+    let _activeOscillators = {};
+    let _gainNode = null;
+    let _scheduledNotes = [];

-    const activeOscillators = {};
-    let __gainNode = null;
-
-    const getCtx = () => {
+    const getCtx = function () {
        if (typeof getAudioContext === 'function') {
-            const ctx = getAudioContext();
-            if (!__gainNode) {
-                __gainNode = ctx.createGain();
-                __gainNode.gain.value = 0.3;
-                __gainNode.connect(ctx.destination);
+            var ctx = getAudioContext();
+            if (!_gainNode) {
+                _gainNode = ctx.createGain();
+                _gainNode.gain.value = 0.3;
+                _gainNode.connect(ctx.destination);
            }
            return ctx;
        }
@@ -20,104 +38,140 @@
        if (window.__sharedAudioCtx.state === 'suspended') {
            window.__sharedAudioCtx.resume();
        }
-        if (!__gainNode) {
-            __gainNode = window.__sharedAudioCtx.createGain();
-            __gainNode.gain.value = 0.3;
-            __gainNode.connect(window.__sharedAudioCtx.destination);
+        if (!_gainNode) {
+            _gainNode = window.__sharedAudioCtx.createGain();
+            _gainNode.gain.value = 0.3;
+            _gainNode.connect(window.__sharedAudioCtx.destination);
        }
        return window.__sharedAudioCtx;
    };

-    const _channels = Array.from({ length: 16 }, () => ({ bank: 0, program: 0, isPercussion: false }));
-    let _nextMelodicChannel = 0;
-
-    let _synthInstance = null;
-    let _initialized = false;
-    let _initPromise = null;
-    let _currentSfId = null;
-    const _scheduledNotes = [];
-    const _sustainStates = new Array(16).fill(false);
-
    const SonicSF = {
-        loadedFonts: {},
+        loadedFonts: _loadedFonts,

        init: async function (audioContext) {
-            if (_initialized && _synthInstance) return;
+            if (_initialized && _fluidModule) return;
            if (_initPromise) return _initPromise;
            _initPromise = (async () => {
-                if (!window.SpessaSynthClass || !window.__SpessaSynthCDN) {
-                    console.warn("[SonicSF] SpessaSynth CDN not available. Retrying on next select.");
-                    _initPromise = null;
-                    return;
+                if (!window.__FluidSynthModuleFactory) {
+                    console.log("[SonicSF] Waiting for FluidSynth WASM module to load...");
+                    await window.__FluidSynthReady;
+                    if (!window.__FluidSynthModuleFactory) {
+                        console.warn("[SonicSF] FluidSynth WASM still not available after waiting.");
+                        _initPromise = null;
+                        return;
+                    }
                }
                try {
-                    if (audioContext.state === 'suspended') await audioContext.resume();
-                    const procUrl = window.__SpessaSynthCDN + "spessasynth_processor.min.js";
-                    await audioContext.audioWorklet.addModule(procUrl);
-                    _synthInstance = new window.SpessaSynthClass(audioContext);
-                    _synthInstance.connect(audioContext.destination);
-                    await _synthInstance.isReady;
+                    _audioCtx = audioContext;
+                    if (_audioCtx.state === 'suspended') await _audioCtx.resume();
+
+                    try {
+                        await _audioCtx.audioWorklet.addModule('/static/js/worklets/fluidsynth-bridge.js');
+                    } catch (e) {
+                        console.warn("[SonicSF] Worklet reg failed:", e);
+                    }
+
+                    console.log("[SonicSF] Initializing FluidSynth WASM Engine...");
+                    _fluidModule = await window.__FluidSynthModuleFactory();
+
+                    if (!_fluidModule || !_fluidModule._new_fluid_settings) {
+                        throw new Error("FluidSynth WASM module loaded but API missing");
+                    }
+
+                    _settingsPtr = _fluidModule._new_fluid_settings();
+                    _fluidModule._fluid_settings_setnum(_settingsPtr, "synth.sample-rate", _audioCtx.sampleRate);
+                    _fluidModule._fluid_settings_setnum(_settingsPtr, "synth.gain", 0.5);
+                    _fluidModule._fluid_settings_setnum(_settingsPtr, "synth.polyphony", 256);
+
+                    _synthPtr = _fluidModule._new_fluid_synth(_settingsPtr);
+                    if (!_synthPtr) throw new Error("Failed to create FluidSynth synthesizer");
+
+                    try { _fluidModule.FS.mkdir('/soundfonts'); } catch (e) {}
+
+                    _workletNode = new AudioWorkletNode(_audioCtx, 'fluidsynth-bridge');
+
+                    _leftBufPtr = _fluidModule._malloc(RENDER_BLOCK * 4);
+                    _rightBufPtr = _fluidModule._malloc(RENDER_BLOCK * 4);
+
+                    _workletNode.connect(_audioCtx.destination);
+                    _startRenderLoop();
+
                    _initialized = true;
+                    console.log("[SonicSF] FluidSynth WASM Engine initialized.");
                } catch (e) {
-                    console.warn("[SonicSF] SpessaSynth init failed:", e);
+                    console.error("[SonicSF] FluidSynth init failed:", e);
                    _initPromise = null;
+                    _cleanupFluid();
                }
            })();
            return _initPromise;
        },

        loadSoundFont: async function (sfId) {
-            if (!_initialized || !_synthInstance) return false;
+            if (!_initialized || !_fluidModule) return false;
            if (_currentSfId === sfId) return true;
-            // Check if already loaded (SpessaSynth can hold multiple banks)
-            const already = _synthInstance.soundBankManager?.soundBankList?.some(b => b.id === sfId);
-            if (already) {
+            if (_sfHandleMap.has(sfId)) {
                _currentSfId = sfId;
                return true;
            }
            try {
-                const cache = window.SonicSFStorage;
-                let buf = cache ? await cache.getBuffer(sfId) : null;
+                var cache = window.SonicSFStorage;
+                var buf = cache ? await cache.getBuffer(sfId) : null;
                if (!buf) {
-                    const url = "/api/v1/plugins/soundfonts/download/" + encodeURIComponent(sfId) + "?t=" + Date.now();
-                    const resp = await fetch(url);
+                    var url = "/api/v1/plugins/soundfonts/download/" + encodeURIComponent(sfId) + "?t=" + Date.now();
+                    var resp = await fetch(url);
                    if (!resp.ok) {
-                        console.warn("[SonicSF] SoundFont not found on server:", sfId);
+                        console.warn("[SonicSF] SoundFont not found:", sfId);
                        return false;
                    }
                    buf = await resp.arrayBuffer();
                    if (cache) await cache.saveBuffer(sfId, buf);
                }
-                await _synthInstance.soundBankManager.addSoundBank(buf.slice(0), sfId);
-                await _synthInstance.isReady;
+                var virtualPath = '/soundfonts/' + sfId + '.sf3';
+                _fluidModule.FS.writeFile(virtualPath, new Uint8Array(buf));
+                var sfHandle = _fluidModule._fluid_synth_sfload(_synthPtr, virtualPath, 1);
+                if (sfHandle === -1) {
+                    console.error("[SonicSF] FluidSynth failed to parse:", sfId);
+                    return false;
+                }
+                _sfHandleMap.set(sfId, sfHandle);
                _currentSfId = sfId;
+                _loadedFonts[sfId] = true;
+                console.log("[SonicSF] SoundFont loaded:", sfId, "handle:", sfHandle);
                return true;
            } catch (e) {
-                console.warn("[SonicSF] loadSoundFont failed:", e);
+                console.warn("[SonicSF] loadSoundFont error:", e);
                return false;
            }
        },

        selectInstrument: async function (channel, bank, program, sfId) {
-            if (!_initialized || !_synthInstance) {
-                const ctx = new (window.AudioContext || window.webkitAudioContext)();
+            if (!_initialized || !_fluidModule) {
+                var ctx = new (window.AudioContext || window.webkitAudioContext)();
                await this.init(ctx);
            }
            if (sfId) {
-                const ok = await this.loadSoundFont(sfId);
+                var ok = await this.loadSoundFont(sfId);
                if (!ok) return;
            }
-            try { _synthInstance.controllerChange(channel, 0, bank); } catch (e) {}
-            try { _synthInstance.controllerChange(channel, 32, 0); } catch (e) {}
-            try { _synthInstance.programChange(channel, program); } catch (e) {}
-            this.controllerChange(channel, 0, bank);
-            this.programChange(channel, program);
+            try {
+                _fluidModule._fluid_synth_bank_select(_synthPtr, channel, bank);
+            } catch (e) {}
+            try {
+                _fluidModule._fluid_synth_program_change(_synthPtr, channel, program);
+            } catch (e) {}
+            _channels[channel].bank = bank;
+            _channels[channel].program = program;
+            _channels[channel].isPercussion = (bank === 128);
        },

        controllerChange: function (channel, controller, value) {
            if (channel < 0 || channel > 15) return;
-            if (_initialized && _synthInstance) {
-                try { _synthInstance.controllerChange(channel, controller, value); } catch (e) {}
+            if (_initialized && _fluidModule) {
+                try {
+                    _fluidModule._fluid_synth_cc(_synthPtr, channel, controller, value);
+                } catch (e) {}
            }
            if (controller === 0) {
                _channels[channel].bank = value;
@@ -130,15 +184,17 @@

        programChange: function (channel, program) {
            if (channel < 0 || channel > 15) return;
-            if (_initialized && _synthInstance) {
-                try { _synthInstance.programChange(channel, program); } catch (e) {}
+            if (_initialized && _fluidModule) {
+                try {
+                    _fluidModule._fluid_synth_program_change(_synthPtr, channel, program);
+                } catch (e) {}
            }
            _channels[channel].program = program;
        },

        allocateChannel: function (bank) {
            if (bank === 128) return 9;
-            const ch = _nextMelodicChannel % 9;
+            var ch = _nextMelodicChannel % 9;
            _nextMelodicChannel = (_nextMelodicChannel + 1) % 9;
            return ch;
        },
@@ -148,14 +204,14 @@
                bank = bank !== undefined ? bank : (synthEngine.soundfont_bank || 0);
                program = program !== undefined ? program : (synthEngine.soundfont_program || 0);
            }
-            const channel = this.allocateChannel(bank);
-            this.selectInstrument(channel, bank, program, synthEngine?.soundfont_id);
+            var channel = this.allocateChannel(bank);
+            this.selectInstrument(channel, bank, program, synthEngine && synthEngine.soundfont_id);
            return channel;
        },

        getChannelState: function (channel) {
            if (channel < 0 || channel > 15) return null;
-            return { ..._channels[channel] };
+            return { bank: _channels[channel].bank, program: _channels[channel].program, isPercussion: _channels[channel].isPercussion };
        },

        sustainActive: function (channel) {
@@ -165,179 +221,163 @@

        pitchBend: function (channel, value) {
            if (channel < 0 || channel > 15) return;
-            if (_initialized && _synthInstance) {
-                try { _synthInstance.pitchBend(channel, value); } catch (e) {}
+            if (_initialized && _fluidModule) {
+                try {
+                    _fluidModule._fluid_synth_pitch_bend(_synthPtr, channel, value);
+                } catch (e) {}
            }
        },

        stopNote: function (channel, pitch) {
            if (channel < 0 || channel > 15) return;
-            if (_initialized && _synthInstance) {
-                try { _synthInstance.controllerChange(channel, 64, 0); } catch (e) {}
-                try { _synthInstance.noteOff(channel, pitch); } catch (e) {}
-                try { _synthInstance.noteOn(channel, pitch, 0); } catch (e) {}
-                try { _synthInstance.controllerChange(channel, 120, 0); } catch (e) {}
-                try { _synthInstance.post({ channelNumber: channel, type: "stopAll", data: 1 }); } catch (e) {}
+            if (_initialized && _fluidModule) {
+                try {
+                    _fluidModule._fluid_synth_noteoff(_synthPtr, channel, pitch);
+                } catch (e) {}
            }
        },

        playNote: function (note, velocity, durationMs, startTime, program, destinationNode, channel, synthEngine) {
-            if (!_initialized || !_synthInstance) {
-                // Try auto-init — create AudioContext + SpessaSynth
+            if (!_initialized || !_fluidModule) {
                this._lazyInit();
-                // Use oscillator as fallback (short duration for keyboard preview)
-                this._playNoteOsc(note, velocity, 2000, startTime, program, destinationNode, channel, synthEngine);
+                this._playNoteFallback(note, velocity, 2000, startTime, program, destinationNode, channel, synthEngine);
                return;
            }
-            this._playNoteSpessa(note, velocity, durationMs, startTime, program, channel, synthEngine);
+            this._playNoteFluid(note, velocity, durationMs, startTime, program, channel, synthEngine);
        },

        _lazyInit: async function () {
-            if (_initialized && _synthInstance) return;
+            if (_initialized && _fluidModule) return;
            if (_initPromise) return;
            try {
-                const ctx = new (window.AudioContext || window.webkitAudioContext)();
+                var ctx = new (window.AudioContext || window.webkitAudioContext)();
                if (ctx.state === 'suspended') await ctx.resume();
                await this.init(ctx);
            } catch (e) {}
        },

-        _playNoteSpessa: function (note, velocity, durationMs, startTime, program, channel, synthEngine) {
-            const ctx = getCtx();
-            const midiPitch = Math.min(127, Math.max(0, parseInt(note) || 60));
-            const midiVel = Math.min(127, Math.max(1, Math.floor(
+        _playNoteFluid: function (note, velocity, durationMs, startTime, program, channel, synthEngine) {
+            var midiPitch = Math.min(127, Math.max(0, parseInt(note) || 60));
+            var midiVel = Math.min(127, Math.max(1, Math.floor(
                typeof velocity === 'number' ? (velocity > 1 ? velocity : velocity * 127) : 100
            )));
+            var ch = channel;
            if (synthEngine) {
-                const ch = channel !== undefined ? channel : (synthEngine.soundfont_bank === 128 ? 9 : 0);
-                try { _synthInstance.controllerChange(ch, 0, synthEngine.soundfont_bank || 0); } catch (e) {}
-                try { _synthInstance.controllerChange(ch, 32, 0); } catch (e) {}
-                try { _synthInstance.programChange(ch, synthEngine.soundfont_program || 0); } catch (e) {}
+                if (ch === undefined) {
+                    ch = synthEngine.soundfont_bank === 128 ? 9 : 0;
+                }
+                try {
+                    _fluidModule._fluid_synth_bank_select(_synthPtr, ch, synthEngine.soundfont_bank || 0);
+                } catch (e) {}
+                try {
+                    _fluidModule._fluid_synth_program_change(_synthPtr, ch, synthEngine.soundfont_program || 0);
+                } catch (e) {}
                if (channel === undefined) channel = ch;
            }
-            if (channel === undefined) channel = 0;
-            const durSec = durationMs / 1000;
-            const now = ctx.currentTime;
-            const delay = (typeof startTime === 'number' && startTime > now) ? (startTime - now) : 0;
-            const noteId = { on: null, off: null };
-            const doNote = () => {
+            if (ch === undefined) ch = 0;
+            var ctx = getCtx();
+            var now = ctx.currentTime;
+            var delay = (typeof startTime === 'number' && startTime > now) ? (startTime - now) : 0;
+            var durSec = (durationMs || 500) / 1000;
+            var scheduledNote = { on: null, off: null };
+            var self = this;
+            var doNote = function () {
                try {
-                    _synthInstance.noteOn(channel, midiPitch, midiVel);
-                    // Scheduled notes (timeline playback): auto noteOff after duration
-                    // Immediate notes (MIDI keyboard): keep sounding until stopNote/stopAll
+                    _fluidModule._fluid_synth_noteon(_synthPtr, ch, midiPitch, midiVel);
                    if (delay > 0) {
-                        noteId.off = setTimeout(() => {
-                            try { _synthInstance.noteOff(channel, midiPitch); } catch (e) {}
+                        scheduledNote.off = setTimeout(function () {
+                            try {
+                                _fluidModule._fluid_synth_noteoff(_synthPtr, ch, midiPitch);
+                            } catch (e) {}
                        }, durSec * 1000);
                    }
                } catch (e) {
-                    console.warn("[SonicSF] SpessaSynth noteOn error:", e);
-                    this._playNoteOsc(note, velocity, durationMs, startTime, program, null, channel, synthEngine);
+                    console.warn("[SonicSF] FluidSynth noteOn error:", e);
+                    self._playNoteFallback(note, velocity, durationMs, startTime, program, null, channel, synthEngine);
                }
            };
            if (delay > 0) {
-                noteId.on = setTimeout(doNote, delay * 1000);
-                _scheduledNotes.push(noteId);
+                scheduledNote.on = setTimeout(doNote, delay * 1000);
+                _scheduledNotes.push(scheduledNote);
            } else {
                doNote();
            }
        },

-        _playNoteOsc: function (note, velocity, durationMs, startTime, program, destinationNode, channel, synthEngine) {
-            const ctx = getCtx();
-            const freq = 440 * Math.pow(2, (note - 69) / 12);
+        _playNoteFallback: function (note, velocity, durationMs, startTime, program, destinationNode, channel, synthEngine) {
+            var ctx = getCtx();
+            var freq = 440 * Math.pow(2, (note - 69) / 12);
            if (freq <= 0 || isNaN(freq)) return null;
-
            if (synthEngine) {
-                const ch = channel !== undefined ? channel : (synthEngine.soundfont_bank === 128 ? 9 : 0);
+                var ch = channel !== undefined ? channel : (synthEngine.soundfont_bank === 128 ? 9 : 0);
                this.controllerChange(ch, 0, synthEngine.soundfont_bank || 0);
                this.programChange(ch, synthEngine.soundfont_program || 0);
                if (channel === undefined) channel = ch;
                if (program === undefined) program = synthEngine.soundfont_program;
            }
-
-            const osc = ctx.createOscillator();
-            const noteGain = ctx.createGain();
-            let oscType = 'triangle';
-            let attackTime = 0.03, decayTime = 0.1, sustainLevel = 0.5, releaseTime = 0.2, volFactor = 0.25;
-
-            let prog = program !== undefined ? parseInt(program) : 0;
+            var osc = ctx.createOscillator();
+            var noteGain = ctx.createGain();
+            var oscType = 'triangle';
+            var attackTime = 0.03, decayTime = 0.1, sustainLevel = 0.5, releaseTime = 0.2, volFactor = 0.25;
+            var prog = program !== undefined ? parseInt(program) : 0;
            if (channel !== undefined && channel >= 0 && channel < 16) {
-                const chState = _channels[channel];
-                prog = chState.program || prog;
+                prog = _channels[channel].program || prog;
            }
-            if (prog >= 0 && prog <= 7) {
-                oscType = 'sine'; decayTime = 0.3; sustainLevel = 0.1; releaseTime = 0.2;
-            } else if (prog >= 8 && prog <= 15) {
-                oscType = 'sine'; decayTime = 0.1; sustainLevel = 0.0; releaseTime = 0.1;
-            } else if (prog >= 16 && prog <= 23) {
-                oscType = 'sine'; attackTime = 0.05; sustainLevel = 0.8; releaseTime = 0.1;
-            } else if (prog >= 24 && prog <= 31) {
-                oscType = 'triangle'; decayTime = 0.4; sustainLevel = 0.2; releaseTime = 0.3;
-            } else if (prog >= 32 && prog <= 39) {
-                oscType = 'triangle'; attackTime = 0.02; decayTime = 0.2; sustainLevel = 0.6; releaseTime = 0.2;
-            } else if (prog >= 40 && prog <= 47) {
-                oscType = 'sawtooth'; attackTime = 0.15; sustainLevel = 0.8; releaseTime = 0.5; volFactor = 0.15;
-            } else if (prog >= 48 && prog <= 55) {
-                oscType = 'sawtooth'; attackTime = 0.2; sustainLevel = 0.8; releaseTime = 0.6; volFactor = 0.12;
-            } else if (prog >= 56 && prog <= 63) {
-                oscType = 'sawtooth'; attackTime = 0.08; sustainLevel = 0.7; releaseTime = 0.3; volFactor = 0.15;
-            } else if (prog >= 64 && prog <= 71) {
-                oscType = 'square'; attackTime = 0.05; sustainLevel = 0.6; releaseTime = 0.2; volFactor = 0.15;
-            } else if (prog >= 72 && prog <= 79) {
-                oscType = 'sine'; attackTime = 0.1; sustainLevel = 0.7; releaseTime = 0.3; volFactor = 0.2;
-            } else if (prog >= 80 && prog <= 119) {
-                oscType = 'sawtooth'; attackTime = 0.05; sustainLevel = 0.6; releaseTime = 0.4; volFactor = 0.15;
-            }
-
+            if (prog >= 0 && prog <= 7) { oscType = 'sine'; decayTime = 0.3; sustainLevel = 0.1; releaseTime = 0.2; }
+            else if (prog >= 8 && prog <= 15) { oscType = 'sine'; decayTime = 0.1; sustainLevel = 0.0; releaseTime = 0.1; }
+            else if (prog >= 16 && prog <= 23) { oscType = 'sine'; attackTime = 0.05; sustainLevel = 0.8; releaseTime = 0.1; }
+            else if (prog >= 24 && prog <= 31) { oscType = 'triangle'; decayTime = 0.4; sustainLevel = 0.2; releaseTime = 0.3; }
+            else if (prog >= 32 && prog <= 39) { oscType = 'triangle'; attackTime = 0.02; decayTime = 0.2; sustainLevel = 0.6; releaseTime = 0.2; }
+            else if (prog >= 40 && prog <= 47) { oscType = 'sawtooth'; attackTime = 0.15; sustainLevel = 0.8; releaseTime = 0.5; volFactor = 0.15; }
+            else if (prog >= 48 && prog <= 55) { oscType = 'sawtooth'; attackTime = 0.2; sustainLevel = 0.8; releaseTime = 0.6; volFactor = 0.12; }
+            else if (prog >= 56 && prog <= 63) { oscType = 'sawtooth'; attackTime = 0.08; sustainLevel = 0.7; releaseTime = 0.3; volFactor = 0.15; }
+            else if (prog >= 64 && prog <= 71) { oscType = 'square'; attackTime = 0.05; sustainLevel = 0.6; releaseTime = 0.2; volFactor = 0.15; }
+            else if (prog >= 72 && prog <= 79) { oscType = 'sine'; attackTime = 0.1; sustainLevel = 0.7; releaseTime = 0.3; volFactor = 0.2; }
+            else if (prog >= 80 && prog <= 119) { oscType = 'sawtooth'; attackTime = 0.05; sustainLevel = 0.6; releaseTime = 0.4; volFactor = 0.15; }
            osc.type = oscType;
            osc.frequency.setValueAtTime(freq, 0);
-            const startAt = startTime !== undefined ? startTime : ctx.currentTime;
-            const durSec = durationMs / 1000;
-            const vel = typeof velocity === 'number' ? (velocity > 1 ? velocity / 127 : velocity) : 0.8;
-            const targetGain = vel * volFactor;
-
+            var startAt = startTime !== undefined ? startTime : ctx.currentTime;
+            var durSec = durationMs / 1000;
+            var vel = typeof velocity === 'number' ? (velocity > 1 ? velocity / 127 : velocity) : 0.8;
+            var targetGain = vel * volFactor;
            noteGain.gain.setValueAtTime(0, startAt);
            noteGain.gain.linearRampToValueAtTime(targetGain, startAt + attackTime);
            noteGain.gain.linearRampToValueAtTime(targetGain * sustainLevel, startAt + attackTime + decayTime);
-            const releaseStart = startAt + Math.max(attackTime + decayTime, durSec);
+            var releaseStart = startAt + Math.max(attackTime + decayTime, durSec);
            noteGain.gain.linearRampToValueAtTime(targetGain * sustainLevel, releaseStart);
            noteGain.gain.linearRampToValueAtTime(0, releaseStart + releaseTime);
-
            osc.connect(noteGain);
-            noteGain.connect(destinationNode || __gainNode || ctx.destination);
+            noteGain.connect(destinationNode || _gainNode || ctx.destination);
            osc.start(startAt);
-            const stopAt = releaseStart + releaseTime + 0.02;
+            var stopAt = releaseStart + releaseTime + 0.02;
            osc.stop(stopAt);
-
-            const oscId = `${note}_${Date.now()}_${Math.random()}`;
-            activeOscillators[oscId] = { osc, gain: noteGain };
-            setTimeout(() => { delete activeOscillators[oscId]; }, (stopAt - ctx.currentTime) * 1000 + 100);
+            var oscId = note + '_' + Date.now() + '_' + Math.random();
+            _activeOscillators[oscId] = { osc: osc, gain: noteGain };
+            setTimeout(function () { delete _activeOscillators[oscId]; }, (stopAt - ctx.currentTime) * 1000 + 100);
            return osc;
        },

        stopAll: function () {
-            if (_initialized && _synthInstance) {
-                for (let ch = 0; ch < 16; ch++) {
-                    try { _synthInstance.controllerChange(ch, 120, 0); } catch (e) {}
-                    try { _synthInstance.post({ channelNumber: ch, type: "stopAll", data: 1 }); } catch (e) {}
+            if (_initialized && _fluidModule) {
+                for (var ch = 0; ch < 16; ch++) {
+                    try { _fluidModule._fluid_synth_all_notes_off(_synthPtr, ch); } catch (e) {}
+                    try { _fluidModule._fluid_synth_all_sounds_off(_synthPtr, ch); } catch (e) {}
                }
            }
-            // Cancel all scheduled future notes
            while (_scheduledNotes.length > 0) {
-                const n = _scheduledNotes.pop();
+                var n = _scheduledNotes.pop();
                if (n.on) { clearTimeout(n.on); n.on = null; }
                if (n.off) { clearTimeout(n.off); n.off = null; }
            }
-            const ctx = getCtx();
-            const now = ctx.currentTime;
-            Object.values(activeOscillators).forEach(entry => {
+            var ctx = getCtx();
+            var now = ctx.currentTime;
+            Object.values(_activeOscillators).forEach(function (entry) {
                try {
                    if (entry.gain) { entry.gain.gain.cancelScheduledValues(now); entry.gain.gain.setValueAtTime(0, now); }
-                    if (entry.osc) try { entry.osc.stop(now); } catch (e) { }
-                } catch (e) { }
+                    if (entry.osc) try { entry.osc.stop(now); } catch (e) {}
+                } catch (e) {}
            });
-            Object.keys(activeOscillators).forEach(k => delete activeOscillators[k]);
+            Object.keys(_activeOscillators).forEach(function (k) { delete _activeOscillators[k]; });
        },

        saveToIndexedDB: async function (name, arrayBuffer) {
@@ -354,5 +394,59 @@
        }
    };

+    function _startRenderLoop() {
+        if (_renderTimer) return;
+        var Module = _fluidModule;
+        var synth = _synthPtr;
+        var node = _workletNode;
+        var leftPtr = _leftBufPtr;
+        var rightPtr = _rightBufPtr;
+        var block = RENDER_BLOCK;
+        var queueDepth = 0;
+        var maxQueue = QUEUE_TARGET;
+
+        function pushFrame() {
+            if (!Module || !synth || !node) return;
+            try {
+                Module._fluid_synth_write_float(synth, block, leftPtr, 0, 1, rightPtr, 0, 1);
+                var leftArr = new Float32Array(Module.HEAPF32.subarray(leftPtr >> 2, (leftPtr >> 2) + block));
+                var rightArr = new Float32Array(Module.HEAPF32.subarray(rightPtr >> 2, (rightPtr >> 2) + block));
+                node.port.postMessage({ type: 'PCM', L: leftArr, R: rightArr }, [leftArr.buffer, rightArr.buffer]);
+                queueDepth++;
+            } catch (e) {}
+        }
+
+        function fillLoop() {
+            if (!Module || !synth || !node || !_initialized) {
+                _renderTimer = null;
+                return;
+            }
+            var needed = maxQueue - queueDepth;
+            for (var i = 0; i < needed; i++) {
+                pushFrame();
+            }
+            queueDepth = Math.max(0, queueDepth - 1);
+        }
+
+        _renderTimer = setInterval(fillLoop, Math.max(8, (block / _audioCtx.sampleRate) * 1000 * 0.75));
+    }
+
+    function _stopRenderLoop() {
+        if (_renderTimer) {
+            clearInterval(_renderTimer);
+            _renderTimer = null;
+        }
+    }
+
+    function _cleanupFluid() {
+        _stopRenderLoop();
+        if (_leftBufPtr && _fluidModule) { try { _fluidModule._free(_leftBufPtr); } catch (e) {} _leftBufPtr = null; }
+        if (_rightBufPtr && _fluidModule) { try { _fluidModule._free(_rightBufPtr); } catch (e) {} _rightBufPtr = null; }
+        if (_synthPtr && _fluidModule) { try { _fluidModule._delete_fluid_synth(_synthPtr); } catch (e) {} _synthPtr = null; }
+        if (_settingsPtr && _fluidModule) { try { _fluidModule._delete_fluid_settings(_settingsPtr); } catch (e) {} _settingsPtr = null; }
+        _fluidModule = null;
+        _initialized = false;
+    }
+
    window.SonicSF = SonicSF;
 })();
@@ -0,0 +1,33 @@
+class FluidSynthBridge extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.leftQ = [];
+    this.rightQ = [];
+    this.port.onmessage = (e) => {
+      const d = e.data;
+      if (d.type === 'PCM') {
+        this.leftQ.push(d.L);
+        this.rightQ.push(d.R);
+      }
+    };
+  }
+
+  process(inputs, outputs) {
+    const out = outputs[0];
+    if (!out) return true;
+    const len = out[0].length;
+    const l = this.leftQ;
+    const r = this.rightQ;
+    let ri = 0;
+    for (let i = 0; i < len; i++) {
+      if (ri >= l.length) { out[0][i] = 0; out[1][i] = 0; continue; }
+      out[0][i] = l[ri];
+      out[1][i] = r[ri];
+      ri++;
+    }
+    if (ri > 0) { this.leftQ.splice(0, ri); this.rightQ.splice(0, ri); }
+    return true;
+  }
+}
+
+registerProcessor('fluidsynth-bridge', FluidSynthBridge);
@@ -10,27 +10,15 @@
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-    <script type="importmap">
-      {
-        "imports": {
-          "spessasynth_core": "https://cdn.jsdelivr.net/npm/spessasynth_core@latest/dist/index.js"
-        }
-      }
-    </script>
-    <script type="module">
-      import { WorkletSynthesizer } from 'https://cdn.jsdelivr.net/npm/spessasynth_lib@4.3.1/dist/index.js';
-      window.SpessaSynthClass = WorkletSynthesizer;
-      window.__SpessaSynthCDN = 'https://cdn.jsdelivr.net/npm/spessasynth_lib@4.3.1/dist/';
-      console.log('[SonicSF] SpessaSynth library loaded from CDN.');
-    </script>
+    <script src="/static/js/services/fluidsynthLoader.js?v=202607271245"></script>
    <script src="/static/js/services/api.js?v=202607271016"></script>
    <script src="/static/js/services/audioEngine.js?v=202607271016"></script>
    <script src="/static/js/services/storage.js?v=202607271016"></script>
    <script src="/static/js/services/soundfontStorage.js?v=202607271016"></script>
-    <script src="/static/js/services/soundfontPlayer.js?v=202607271215"></script>
+    <script src="/static/js/services/soundfontPlayer.js?v=202607271245"></script>
    <script src="/static/js/services/aiGateway.js?v=202607271016"></script>
    <script src="/static/js/services/dawCommandDispatcher.js?v=202607271016"></script>
-    <script src="/static/js/app.precompiled.js?v=202607271016" defer></script>
+    <script src="/static/js/app.precompiled.js?v=202607271245" defer></script>
    <link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
    <style>
        :root {
@@ -427,6 +427,12 @@
 - **Các file ảnh hưởng:** `app/static/js/services/soundfontPlayer.js`
 - **Ghi chú/Test (nếu có):** Test với MIDI keyboard + Tremolo Strings instrument: note tắt ngay khi release key. CC 120 tác dụng lên toàn bộ channel (kill all voices) — phù hợp với keyboard preview use-case.

+### [2026-07-27 12:45] Task: Migrate SpessaSynth → FluidSynth WASM engine
+- **Tóm tắt thay đổi:** Thay thế SpessaSynth (JS/AudioWorklet) bằng FluidSynth WASM (C++ compiled via Emscripten). CDN `@enikey87/fluidsynth-emscripten@0.1.1` cho dev (localhost), self-host `/static/js/vendor/` cho production. Giải quyết triệt để stuck notes (Tremolo/Saxophone) nhờ FluidSynth xử lý Gen 44 loop mode chuẩn SF2.04. Thêm `fluidsynth-bridge.js` AudioWorklet nhận PCM từ main-thread FluidSynth render loop. Giữ nguyên `window.SonicSF` API surface (0 thay đổi ở app.jsx).
+- **Các file ảnh hưởng:** `app/static/js/services/soundfontPlayer.js`, `app/templates/index.html`, `app/static/js/services/fluidsynthLoader.js` (NEW), `app/static/js/worklets/fluidsynth-bridge.js` (NEW), `app/static/js/vendor/libfluidsynth-2.3.0-sf3.js` (NEW), `app/static/js/vendor/libfluidsynth-2.3.0-sf3.wasm` (NEW)
+- **Ghi chú/Test (nếu có):** Server render (pyfluidsynth) + client preview (FluidSynth WASM) = cùng C++ core → 100% audio parity. Cần clear browser cache. Babel 8 syntax error pre-existing (JSX `{ if(...) { } }` trong app.jsx), không rebuild được app.precompiled.js.
+---
+
 ### [2026-07-27 12:15] Task: Fix SpessaSynth loop voice not releasing (layer 2)
 - **Tóm tắt thay đổi:** CC 120 vẫn không đủ vì SpessaSynth 4.3.1 AudioWorklet có bug: looped voices trong MIDI message pipeline xử lý CC 120 sai (`processMessage`). Fix: thêm `noteOn(ch, pitch, 0)` (MIDI noteOff alternate path) + `_synthInstance.post({channelNumber:ch, type:"stopAll", data:1})` gửi lệnh trực tiếp đến worklet qua `handleMessage` — bypass hoàn toàn MIDI pipeline.
 - **Các file ảnh hưởng:** `app/static/js/services/soundfontPlayer.js`, `app/templates/index.html`