Refactor audio chain for enhanced dynamics and responsiveness to BPM changes

index.html

@@ -871,348 +871,195 @@
     btnDisconnect.addEventListener('click', doDisconnect);
     btnReconnect.addEventListener('click', doReconnect);
 
-    const masterGain = new Tone.Gain(1.15).toDestination();
-
-    // Low cut để bỏ rumble gây rợn
-    const lowCut = new Tone.Filter({
-        type: "highpass",
-        frequency: 140,
-        rolloff: -24
-    }).connect(masterGain);
-
-    // Soft compressor
+    // ================================================================
+    // AUDIO CHAIN — volume boosted, gain staging cẩn thận
+    // ================================================================
+    const masterGain = new Tone.Gain(1.5).toDestination();         // +3.5dB tổng thể
+    const limiter    = new Tone.Limiter(-0.3).connect(masterGain); // limiter thoáng hơn
     const compressor = new Tone.Compressor({
-        threshold: -18,
-        ratio: 2,
-        attack: 0.03,
-        release: 0.25
-    }).connect(lowCut);
-
-    // EQ dịu hơn
-    const eq = new Tone.EQ3({
-        low: -10,
-        mid: -2,
-        high: 2
-    }).connect(compressor);
-
-    // Stereo nhẹ
-    const stereo = new Tone.StereoWidener(0.35).connect(eq);
-
-    // Reverb rất nhẹ
-    const reverb = new Tone.Reverb({
-        decay: 2.2,
-        wet: 0.18
-    }).connect(stereo);
-
-    // Delay subtle
-    const delay = new Tone.FeedbackDelay({
-        delayTime: "8n",
-        feedback: 0.12,
-        wet: 0.08
-    }).connect(reverb);
-
-    // =========================================================
-    // PIANO
-    // =========================================================
-
+        threshold: -14, ratio: 3, attack: 0.008, release: 0.18
+    }).connect(limiter);
+    const eq = new Tone.EQ3({ low: -8, mid: 1, high: 4 }).connect(compressor);
+    const stereo = new Tone.StereoWidener(0.65).connect(eq);
+    const reverb = new Tone.Reverb({ decay: 3.5, wet: 0.38 }).connect(stereo); // wet sẽ thay đổi theo BPM
+    const delay  = new Tone.FeedbackDelay({ delayTime: "8n", feedback: 0.28, wet: 0.18 }).connect(reverb);
+
+    // 🎹 PIANO — volume tăng lên, kết nối thẳng vào delay
     const piano = new Tone.Sampler({
-        volume: -4,
-
+        volume: 2,   // +4dB so với trước (trước là 0)
         urls: {
-            A1:"A1.mp3",
-            C2:"C2.mp3",
-            "D#2":"Ds2.mp3",
-            "F#2":"Fs2.mp3",
-
-            A2:"A2.mp3",
-            C3:"C3.mp3",
-            "D#3":"Ds3.mp3",
-            "F#3":"Fs3.mp3",
-
-            A3:"A3.mp3",
-            C4:"C4.mp3",
-            "D#4":"Ds4.mp3",
-            "F#4":"Fs4.mp3",
-
-            A4:"A4.mp3",
-            C5:"C5.mp3"
+            A1:"A1.mp3", C2:"C2.mp3", "D#2":"Ds2.mp3", "F#2":"Fs2.mp3",
+            A2:"A2.mp3", C3:"C3.mp3", "D#3":"Ds3.mp3", "F#3":"Fs3.mp3",
+            A3:"A3.mp3", C4:"C4.mp3", "D#4":"Ds4.mp3", "F#4":"Fs4.mp3",
+            A4:"A4.mp3", C5:"C5.mp3"
         },
-
-        baseUrl:
-        "https://raw.githubusercontent.com/Tonejs/audio/master/salamander/",
-
-        release: 0.8
-
-    }).connect(delay);
-
-    // =========================================================
-    // SOFT PAD
-    // =========================================================
-
-    const pad = new Tone.PolySynth(
-        Tone.Synth,
-        {
-            volume: -20,
-
-            oscillator: {
-                type: "sine"
-            },
-
-            envelope: {
-                attack: 2.5,
-                decay: 0.3,
-                sustain: 0.7,
-                release: 4
-            }
-        }
-    ).connect(reverb);
-
-    // =========================================================
-    // VERY SOFT NOISE
-    // =========================================================
-
-    const noise = new Tone.Noise("pink");
-
-    const noiseFilter = new Tone.Filter({
-        type: "lowpass",
-        frequency: 4000
-    });
-
-    const noiseGain = new Tone.Gain(0.012);
-
-    noise
-        .connect(noiseFilter)
-        .connect(noiseGain)
-        .connect(stereo);
-
-    noise.start();
-
-    // =========================================================
-    // BPM TEXTURE
-    // =========================================================
-
+        baseUrl: "https://raw.githubusercontent.com/Tonejs/audio/master/salamander/",
+        release: 1
+    }).connect(delay)
+    const pad = new Tone.PolySynth(Tone.Synth, {
+            volume: -12,  
+            oscillator: { type: "triangle" },
+            envelope: { attack: 1.2, decay: 0.5, sustain: 0.8, release: 3 }
+        }).connect(reverb);
+    log("🎹 Đã khởi tạo audio chain. Volume boosted.");
+    setStatus("Sẵn sàng sinh nhạc AI", "ok");
+    // ================================================================
+    // BPM-REACTIVE: thay đổi texture theo nhịp tim
+    // ================================================================
     function applyBpmTexture(bpm) {
-
-        // BPM cao -> calm hơn
-        const t = Math.min(1, Math.max(0, (bpm - 50) / 100));
-
-        // Reverb
-        reverb.wet.rampTo(
-            0.14 + t * 0.08,
-            3
-        );
-
-        // Delay
-        delay.feedback.rampTo(
-            0.08 + t * 0.08,
-            3
-        );
-
-        delay.wet.rampTo(
-            0.05 + t * 0.05,
-            3
-        );
-
-        // Pad volume
-        pad.volume.rampTo(
-            -22 + t * 6,
-            3
-        );
-
-        // Piano volume
-        piano.volume.rampTo(
-            -5 + t * 2,
-            2
-        );
-
-        // Noise
-        noiseGain.gain.rampTo(
-            0.008 + t * 0.008,
-            3
-        );
-
-        // Tempo inverse entrainment
-        const musicTempo =
-            78 - t * 18;
-
-        Tone.getTransport().bpm.rampTo(
-            musicTempo,
-            4
-        );
-
-        // UI color
-        const color =
-            bpm < 70
-            ? '#4ecca3'
-            : bpm < 95
-            ? '#8ecae6'
-            : '#f9c74f';
-
-        bpmDisplay.style.color = color;
-        bpmDisplay.style.textShadow =
-            `0 0 18px ${color}`;
+        // ── ENTRAINMENT LOGIC ──────────────────────────────────────────
+        // Nhịp tim cao = cơ thể đang stress → nhạc kéo ngược lại: chậm,
+        // mơ màng, ambient hơn để hạ nhiệt.
+        // Nhịp tim thấp = nghỉ ngơi → nhạc có thể nhẹ nhàng groove hơn.
+
+        // Reverb: BPM CAO = nhiều reverb hơn (mơ màng, bay bổng, dịu)
+        //         BPM thấp = ít reverb (rõ ràng, có chiều sâu nhẹ)
+        const reverbWet = bpm < 70  ? 0.2 :
+                          bpm < 90  ? 0.3 :
+                          bpm < 110 ? 0.4 : 0.5;
+        reverb.wet.rampTo(reverbWet, 2.5);
+
+        // Delay feedback: BPM cao = echo dài hơn (hypnotic, calming)
+        const delayFb = bpm < 80 ? 0.16 : bpm < 110 ? 0.24 : 0.34;
+        delay.feedback.rampTo(delayFb, 2.5);
+        // Nhạc tempo: BPM cao → tempo chậm hơn để kéo nhịp tim xuống
+        // map BPM [40,180] → music tempo [85, 55] BPM (inverse linear)
+        const padVol = bpm < 75 ? -12 : bpm < 100 ? -8 : -4;
+        pad.volume.rampTo(padVol, 2.5);
+
+        // Pad attack: BPM cao = attack chậm (drifting), thấp = attack vừa
+        const padAttack = bpm < 75 ? 0.6 : bpm < 100 ? 1.2 : 2.2;
+        pad.set({ envelope: { attack: padAttack } });
+
+        const musicTempo = Math.round(85 - (bpm - 40) * (30 / 140));
+        Tone.getTransport().bpm.rampTo(Math.max(52, Math.min(88, musicTempo)), 3);
+
+        // BPM display color theo mức độ stress
+        // (màu vẫn phản ánh nhịp tim thực, không phải tempo nhạc)
+        const color = bpm < 70  ? '#4ecca3' :   // xanh — bình tĩnh
+                      bpm < 90  ? '#a0d8ef' :   // xanh dương — nhẹ nhàng
+                      bpm < 110 ? '#f9c74f' :   // vàng — đang tăng
+                                  '#e94560';    // đỏ — cần hạ nhiệt
+        bpmDisplay.style.color      = color;
+        bpmDisplay.style.textShadow = `0 0 20px ${color}`;
+
+        log(`🎚 Texture (entrainment) → reverb:${reverbWet} delayFb:${delayFb} padVol:${padVol} musicTempo:${musicTempo}`);
     }
 
-    // =========================================================
-    // PLAY AI MUSIC
-    // =========================================================
+    // Override applyBpm để gọi texture update
+    const _origApplyBpm = applyBpm;
+    // Không thể override function declaration, thêm hook vào ws.send thay thế
+    function sendBpmToServer(bpm) {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ bpm }));
+        }
+        applyBpmTexture(bpm);
+    }
 
+    // ================================================================
+    // WEBSOCKET — sinh nhạc
+    // ================================================================
     btnGenerate.addEventListener('click', async () => {
-
         if (currentBpm === 0) {
-            alert('Chưa có BPM!');
+            alert('Chưa có BPM! Kết nối đồng hồ hoặc nhập thủ công.');
             return;
         }
 
         await Tone.start();
         await Tone.loaded();
-
-        masterGain.gain.value = 1.15;
-
+        log("✅ Piano samples loaded");
+        masterGain.gain.rampTo(1.5, 0.1);
         if (ws) ws.close();
 
-        setStatus(
-            `Đang kết nối AI với ${currentBpm} BPM…`,
-            'info'
-        );
-
-        btnGenerate.disabled = true;
-        btnStop.disabled = false;
-
-        bpmDisplay.style.animation =
-            'pulse 1.2s infinite';
+        setStatus(`Đang kết nối AI với ${currentBpm} BPM…`, 'info');
+        btnGenerate.textContent = 'AI đang truyền nốt…';
+        btnGenerate.disabled    = true;
+        btnStop.disabled        = false;
+        bpmDisplay.style.animation = 'pulse 1s infinite';
 
+        // Khởi động texture + drum engine ngay
         applyBpmTexture(currentBpm);
 
-        const protocol =
-            window.location.protocol === 'https:'
-            ? 'wss:'
-            : 'ws:';
-
-        ws = new WebSocket(
-            `${protocol}//${window.location.host}/ws/vibe`
-        );
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(`${protocol}//${window.location.host}/ws/vibe`);
 
         ws.onopen = () => {
-
-            setStatus(
-                '🎵 Đang phát nhạc relaxing…',
-                'ok'
-            );
-
-            ws.send(JSON.stringify({
-                bpm: currentBpm
-            }));
+            setStatus('🎵 Đang phát nhạc Real-time…', 'ok');
+            ws.send(JSON.stringify({ bpm: currentBpm }));
         };
 
-        let startTime = Tone.now() + 0.12;
+        let startTime = Tone.now() + 0.15;
 
         ws.onmessage = (event) => {
-
             const data = JSON.parse(event.data);
 
-            data.notes.forEach(n => {
-
-                const noteStr =
-                    Tone.Frequency(
-                        n.note,
-                        "midi"
-                    ).toNote();
+            // Nếu BPM thay đổi (server gửi về), cập nhật texture
+            if (data.bpm && data.bpm !== currentBpm) {
+                applyBpmTexture(data.bpm);
+            }
 
+            data.notes.forEach(n => {
+                const noteStr = Tone.Frequency(n.note, "midi").toNote();
                 const t = startTime + n.time;
 
-                // =====================================================
-                // MELODY
-                // =====================================================
-
                 if (n.type === "melody") {
-
-                    // softer velocity
-                    const vel =
-                        Math.min(
-                            0.72,
-                            (n.velocity / 127) * 0.72
-                        );
-
-                    piano.triggerAttackRelease(
-                        noteStr,
-                        n.duration * 0.95,
-                        t,
-                        vel
-                    );
+                    // Velocity melody cũng phản ánh BPM: cao → piano mạnh hơn
+                    const velBoost = currentBpm > 100 ? 1.15 : 1.0;
+                    const vel = Math.min(1, (n.velocity / 127) * velBoost);
+                    piano.triggerAttackRelease(noteStr, n.duration, t, vel);
                 }
-
-                // =====================================================
-                // CHORDS
-                // =====================================================
-
                 else if (n.type === "chord") {
-
-                    // giảm note thấp gây rợn
-                    if (n.note < 58) return;
-
-                    pad.triggerAttackRelease(
-                        noteStr,
-                        n.duration * 0.7,
-                        t,
-                        0.22
-                    );
+                    pad.triggerAttackRelease(noteStr, n.duration, t, n.velocity / 127);
                 }
+                // drum events từ server bị bỏ qua — drum engine client đã xử lý
             });
 
             startTime += data.batch_duration;
         };
 
-        ws.onerror = (err) => {
-
-            console.error(err);
+        // Mỗi khi BPM thay đổi từ đồng hồ/manual → cập nhật texture + drum
+        const origApply = applyBpm;
+        // Patch ws.send để bắt BPM change
+        const _origSend = ws.send.bind(ws);
+        ws.send = function(data) {
+            try {
+                const parsed = JSON.parse(data);
+                if (parsed.bpm) applyBpmTexture(parsed.bpm);
+            } catch {}
+            return _origSend(data);
+        };
 
-            setStatus(
-                'Lỗi kết nối AI!',
-                'err'
-            );
+        ws.onerror = (err) => {
+            log('WebSocket Error: ' + err);
+            setStatus('Lỗi kết nối tới AI!', 'err');
         };
 
         ws.onclose = () => {
-
-            btnGenerate.disabled = false;
-            btnStop.disabled = true;
-
+            btnGenerate.textContent    = '2. Sinh nhạc AI';
+            btnGenerate.disabled       = false;
+            btnStop.disabled           = true;
             bpmDisplay.style.animation = 'none';
         };
     });
 
-    // =========================================================
-    // STOP
-    // =========================================================
-
+    // ================================================================
+    // STOP — fade masterGain ngay lập tức, không chờ note scheduled
+    // ================================================================
     btnStop.addEventListener('click', () => {
+        if (ws) { ws.close(); ws = null; }
 
-        if (ws) {
-            ws.close();
-            ws = null;
-        }
-
-        masterGain.gain.rampTo(
-            0,
-            0.4
-        );
+        // Fade out nhanh (0.25s) để tắt ngay cả note đã schedule trước
+        masterGain.gain.rampTo(0, 0.1);
 
         setTimeout(() => {
-
             piano.releaseAll();
             pad.releaseAll();
+        }, 200);
 
-        }, 450);
-
-        setStatus(
-            'Đã dừng nhạc.',
-            'info'
-        );
+        setStatus('Đã dừng nhạc.', 'info');
 
         btnGenerate.disabled = false;
         btnStop.disabled = true;
-
         bpmDisplay.style.animation = 'none';
     });
 </script>