Refactor audio chain and drum engine for improved performance and responsiveness

index.html

@@ -871,180 +871,283 @@
     btnDisconnect.addEventListener('click', doDisconnect);
     btnReconnect.addEventListener('click', doReconnect);
 
-    // ===============================
-    // GENERATE MUSIC
-
-    const limiter = new Tone.Limiter(-1);
-
-    // 2. Compressor (giữ âm ổn định)
+    // ================================================================
+    // 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: 3,
-        attack: 0.01,
-        release: 0.2
-    });
-
-    // 3. EQ (làm ấm piano)
-    const eq = new Tone.EQ3({
-        low: 3,     // tăng bass nhẹ
-        mid: -1,    // giảm mid đục
-        high: 2     // tăng sáng nhẹ
-    });
-
-    // 4. Stereo widen (cho không gian rộng)
-    const stereo = new Tone.StereoWidener(0.6);
-
-    // 5. Reverb (không gian)
-    const reverb = new Tone.Reverb({
-        decay: 4,
-        wet: 0.3
-    });
-
-    // 6. Delay (lofi feel)
-    const delay = new Tone.FeedbackDelay({
-        delayTime: "8n",
-        feedback: 0.25,
-        wet: 0.15
-    });
-
-    // Connect chain
-    delay.connect(reverb);
-    reverb.connect(stereo);
-    stereo.connect(eq);
-    eq.connect(compressor);
-    compressor.connect(limiter);
-    limiter.toDestination();
-
+        threshold: -14, ratio: 3, attack: 0.008, release: 0.18
+    }).connect(limiter);
+    const eq = new Tone.EQ3({ low: 5, mid: -1, high: 3 }).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,   // +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/", 
+        baseUrl: "https://raw.githubusercontent.com/Tonejs/audio/master/salamander/",
         release: 1
     }).connect(delay);
 
-    // 🌊 PAD (chord)
+    // 🌊 PAD — volume tăng, attack thay đổi theo BPM
     const pad = new Tone.PolySynth(Tone.Synth, {
-        volume: -12,
+        volume: -6,   // -6dB (trước là -12dB)
         oscillator: { type: "sine" },
-        envelope: {
-            attack: 1,
-            decay: 0.5,
-            sustain: 0.8,
-            release: 3
-        }
+        envelope: { attack: 1.2, decay: 0.5, sustain: 0.8, release: 3 }
     }).connect(reverb);
 
-    // 🥁 KICK
+    // 🥁 KICK — volume tăng đáng kể
     const kick = new Tone.MembraneSynth({
-        volume: -7,
-        pitchDecay: 0.05,
-        octaves: 6,
-        envelope: {
-            attack: 0.001,
-            decay: 0.3,
-            sustain: 0
-        }
+        volume: -2,   // -2dB (trước là -8dB)
+        pitchDecay: 0.06, octaves: 7,
+        envelope: { attack: 0.001, decay: 0.35, sustain: 0 }
     }).connect(compressor);
 
     // 🥁 SNARE
     const snare = new Tone.NoiseSynth({
-        volume: -11,
+        volume: -4,   // -4dB (trước là -9dB)
         noise: { type: "white" },
-        envelope: {
-            attack: 0.001,
-            decay: 0.15,
-            sustain: 0
-        }
+        envelope: { attack: 0.001, decay: 0.13, sustain: 0 }
     }).connect(compressor);
 
     // 🥁 HIHAT
     const hihat = new Tone.MetalSynth({
-        volume: -20,
+        volume: -16,   // -16dB (trước là -22dB)
         frequency: 400,
-        envelope: { attack: 0.001, decay: 0.06, release: 0.01 },
-        harmonicity: 5.1,
-        modulationIndex: 32,
-        resonance: 4000,
-        octaves: 1.5
+        envelope: { attack: 0.001, decay: 0.055, release: 0.01 },
+        harmonicity: 5.1, modulationIndex: 32, resonance: 4000, octaves: 1.5
     }).connect(compressor);
 
-    // Gọi Tone.start() sẵn khi load trang nếu được
-    log("🎹 Đã khởi tạo Lo-fi Synthesizer (Có Limiter chống rè).");
+    log("🎹 Đã khởi tạo audio chain. Volume boosted.");
     setStatus("Sẵn sàng sinh nhạc AI", "ok");
 
-    // ===============================
-    // GENERATE MUSIC (CẬP NHẬT WEBSOCKET)
-    // ===============================
+    // ================================================================
+    // DRUM ENGINE — client-side, Tone.Transport grid, không bao giờ lệch
+    // ================================================================
+
+    // 16-step patterns (mỗi step = 1 sixteenth note)
+    // vel: 0 = tắt, 1–127 = velocity
+    const DRUM_PATTERNS = {
+        // BPM thấp (< 75): half-time lofi, thưa, mơ màng
+        calm: {
+            kick:  [90, 0, 0, 0,   0, 0, 0, 0,   72, 0, 0, 0,   0, 0, 0, 0],
+            snare: [ 0, 0, 0, 0,  76, 0, 0, 0,    0, 0, 0, 0,  70, 0, 0, 0],
+            hihat: [55, 0,45, 0,  52, 0,42, 0,   55, 0,45, 0,  52, 0,42, 0],
+        },
+        // Variation của calm (bar 5–6 trong chu kỳ 8 bar)
+        calm_var: {
+            kick:  [88, 0, 0, 0,   0, 0,62, 0,   75, 0, 0, 0,   0, 0, 0, 0],
+            snare: [ 0, 0, 0, 0,  74, 0, 0, 0,    0, 0,30, 0,  70, 0, 0, 0],
+            hihat: [55, 0,45, 0,  50, 0,42, 0,   55,35,45, 0,  50, 0,40,30],
+        },
+
+        // BPM vừa (75–105): groove lofi 4/4 với syncopation nhẹ
+        groove: {
+            kick:  [88, 0, 0, 0,   0, 0,68, 0,   85, 0, 0,58,   0, 0, 0, 0],
+            snare: [ 0, 0, 0, 0,  80, 0, 0, 0,    0, 0, 0, 0,  75, 0, 0, 0],
+            hihat: [62, 0,50,42,  58, 0,52, 0,   60,38,52, 0,  58, 0,48,38],
+        },
+        groove_var: {
+            kick:  [88, 0, 0, 0,  65, 0,68, 0,   85, 0, 0, 0,  58, 0,72, 0],
+            snare: [ 0, 0, 0,28,  80, 0, 0, 0,    0, 0,32, 0,  75, 0, 0,40],
+            hihat: [62,42,50, 0,  58,40,52,35,   60, 0,52,42,  58,40,48, 0],
+        },
+
+        // BPM cao (> 105): active, nhiều hihat 16th, kick syncopated
+        active: {
+            kick:  [90, 0,68, 0,   0, 0,75, 0,   88, 0, 0, 0,  78, 0,65, 0],
+            snare: [ 0, 0, 0, 0,  82, 0, 0,55,    0, 0, 0, 0,  78, 0, 0,48],
+            hihat: [65,48,55,40,  60,45,55,35,   62,42,52,38,  60, 0,52,48],
+        },
+        active_var: {
+            kick:  [90, 0,68, 0,  62, 0,75, 0,   88, 0,55, 0,  78, 0,65,45],
+            snare: [ 0, 0, 0,35,  82, 0, 0,55,    0,28, 0, 0,  78, 0,38, 0],
+            hihat: [65,48,55, 0,  60,45, 0,35,   62,42,52,38,   0,40,52,48],
+        },
+
+        // Breakdown: mỗi 8 bar, bar thứ 7 — tối giản, tạo cảm giác "breath"
+        breakdown: {
+            kick:  [80, 0, 0, 0,   0, 0, 0, 0,   0, 0, 0, 0,   0, 0, 0, 0],
+            snare: [ 0, 0, 0, 0,   0, 0, 0, 0,  68, 0, 0, 0,   0, 0, 0, 0],
+            hihat: [45, 0, 0, 0,  42, 0, 0, 0,  45, 0, 0, 0,  42, 0, 0, 0],
+        },
+    };
+
+    function choosePattern(bpm, barIdx) {
+        const cycle = barIdx % 8;
+        if (cycle === 6) return 'breakdown';            // bar 7 → breakdown
+        const isVar = cycle >= 4;                       // bar 5–6 → variation
+        if (bpm < 75)  return isVar ? 'calm_var'   : 'calm';
+        if (bpm < 105) return isVar ? 'groove_var' : 'groove';
+        return                isVar ? 'active_var' : 'active';
+    }
+
+    let drumRepeatId = null;
+    let drumBarCount = 0;
+
+    function startDrumEngine(bpm) {
+        stopDrumEngine();
+        Tone.getTransport().bpm.value = bpm;
+
+        const step16 = 60 / bpm / 4; // duration của 1 sixteenth note (giây)
+
+        drumRepeatId = Tone.getTransport().scheduleRepeat((barTime) => {
+            const patName = choosePattern(currentBpm, drumBarCount);
+            const pat     = DRUM_PATTERNS[patName];
+            const s16     = 60 / currentBpm / 4; // re-read mỗi bar để phản ánh BPM mới
+
+            for (let i = 0; i < 16; i++) {
+                const t  = barTime + i * s16;
+                const hu = () => (Math.random() - 0.5) * 0.012; // humanize ±6ms
+
+                if (pat.kick[i])  kick .triggerAttackRelease('C1',  '16n', t + hu(), pat.kick[i]  / 127);
+                if (pat.snare[i]) snare.triggerAttackRelease('16n',        t + hu(), pat.snare[i] / 127);
+                if (pat.hihat[i]) hihat.triggerAttackRelease('32n',        t + Math.abs(hu()), pat.hihat[i] / 127);
+            }
+            drumBarCount++;
+        }, '1m'); // repeat mỗi 1 measure
+
+        Tone.getTransport().start();
+        log(`🥁 Drum engine started — pattern: ${choosePattern(bpm, 0)}`);
+    }
+
+    function stopDrumEngine() {
+        if (drumRepeatId !== null) {
+            Tone.getTransport().clear(drumRepeatId);
+            drumRepeatId = null;
+        }
+        Tone.getTransport().stop();
+        Tone.getTransport().cancel();
+        drumBarCount = 0;
+    }
+
+    // ================================================================
+    // BPM-REACTIVE: thay đổi texture theo nhịp tim
+    // ================================================================
+    function applyBpmTexture(bpm) {
+        // Reverb: BPM thấp = nhiều không gian (dreamy), cao = khô hơn (energetic)
+        const reverbWet = bpm < 70  ? 0.50 :
+                          bpm < 90  ? 0.40 :
+                          bpm < 110 ? 0.30 : 0.20;
+        reverb.wet.rampTo(reverbWet, 2);
+
+        // Delay feedback: BPM thấp = echo dài hơn
+        const delayFb = bpm < 80 ? 0.32 : bpm < 110 ? 0.22 : 0.14;
+        delay.feedback.rampTo(delayFb, 2);
+
+        // Pad volume: BPM thấp = pad nổi hơn (ambient), cao = nhường chỗ cho melody
+        const padVol = bpm < 75 ? -4 : bpm < 100 ? -8 : -13;
+        pad.volume.rampTo(padVol, 2);
+
+        // Pad attack: BPM thấp = chậm mơ màng, cao = nhanh rõ ràng
+        // (không thể rampTo envelope, cập nhật ngay)
+        const padAttack = bpm < 75 ? 1.8 : bpm < 100 ? 1.0 : 0.5;
+        pad.set({ envelope: { attack: padAttack } });
+
+        // BPM display color: mát → ấm theo nhịp tim
+        const color = bpm < 70  ? '#4ecca3' :   // xanh lá — nghỉ ngơi
+                      bpm < 90  ? '#a0d8ef' :   // xanh dương — nhẹ nhàng
+                      bpm < 110 ? '#f9c74f' :   // vàng — vận động
+                                  '#e94560';    // đỏ — cường độ cao
+        bpmDisplay.style.color     = color;
+        bpmDisplay.style.textShadow = `0 0 20px ${color}`;
+
+        // Cập nhật Tone.Transport BPM (drum engine tự pick up)
+        Tone.getTransport().bpm.rampTo(bpm, 1);
+
+        log(`🎚 Texture → reverb:${reverbWet} delayFb:${delayFb} padVol:${padVol} bpm:${bpm}`);
+    }
+
+    // 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! Kết nối đồng hồ hoặc nhập thủ công.');
             return;
         }
 
-        // Bắt buộc trình duyệt cho phép phát âm thanh
         await Tone.start();
         await Tone.loaded();
-        console.log("✅ Piano samples loaded");
+        log("✅ Piano samples loaded");
 
-        if (ws) ws.close(); // Đóng kết nối cũ nếu có
+        if (ws) ws.close();
 
-        setStatus(`Đang kết nối não AI với ${currentBpm} BPM…`, 'info');
+        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;
+        btnGenerate.disabled    = true;
+        btnStop.disabled        = false;
         bpmDisplay.style.animation = 'pulse 1s infinite';
 
-        // Mở kết nối WebSocket tới Server
-        // ĐOẠN CODE MỚI ĐÃ FIX LỖI:
+        // Khởi động texture + drum engine ngay
+        applyBpmTexture(currentBpm);
+        startDrumEngine(currentBpm);
+
         const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${protocol}//${window.location.host}/ws/vibe`;
-        ws = new WebSocket(wsUrl);
+        ws = new WebSocket(`${protocol}//${window.location.host}/ws/vibe`);
 
         ws.onopen = () => {
-            setStatus('🎵 Đang phát nhạc Real-time vô tận…', 'ok');
-            // Gửi BPM lên server để AI lấy tempo
+            setStatus('🎵 Đang phát nhạc Real-time…', 'ok');
             ws.send(JSON.stringify({ bpm: currentBpm }));
         };
 
-        let startTime = Tone.now() + 0.1; // Thời gian bắt đầu chơi nhạc, cách hiện tại 100ms để đảm bảo đồng bộ    
+        let startTime = Tone.now() + 0.15;
 
         ws.onmessage = (event) => {
             const data = JSON.parse(event.data);
 
+            // 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 note = Tone.Frequency(n.note, "midi").toNote();
-                const t = startTime + n.time;   // 🔥 timeline chuẩn
+                const noteStr = Tone.Frequency(n.note, "midi").toNote();
+                const t = startTime + n.time;
 
                 if (n.type === "melody") {
-                    piano.triggerAttackRelease(note, n.duration, t);
+                    // 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);
                 }
-
                 else if (n.type === "chord") {
-                    pad.triggerAttackRelease(note, n.duration, t);
-                }
-
-                else if (n.type === "drum") {
-                    if (n.note === 36) kick.triggerAttackRelease("C1", "8n", t);
-                    if (n.note === 38) snare.triggerAttackRelease("16n", t);
-                    if (n.note === 42) hihat.triggerAttackRelease("32n", t); // hihat
+                    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; // FIX: dùng batch_duration thực tế từ server
+            startTime += data.batch_duration;
+        };
+
+        // 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);
         };
 
         ws.onerror = (err) => {
@@ -1053,22 +1156,22 @@
         };
 
         ws.onclose = () => {
-            btnGenerate.textContent = '2. Sinh nhạc AI';
-            btnGenerate.disabled = false;
-            btnStop.disabled = true;
+            btnGenerate.textContent    = '2. Sinh nhạc AI';
+            btnGenerate.disabled       = false;
+            btnStop.disabled           = true;
             bpmDisplay.style.animation = 'none';
+            stopDrumEngine();
         };
     });
 
-    // ===============================
-    // STOP MUSIC (CẬP NHẬT WEBSOCKET)
-    // ===============================
+    // ================================================================
+    // STOP
+    // ================================================================
     btnStop.addEventListener('click', () => {
-        if (ws) {
-            ws.close(); // Cắt kết nối, Server sẽ tự động dừng suy luận
-            ws = null;
-        }
-        piano.releaseAll(); // Ngắt ngay lập tức các âm vang còn sót lại
+        if (ws) { ws.close(); ws = null; }
+        stopDrumEngine();
+        piano.releaseAll();
+        pad.releaseAll();
         setStatus('Đã dừng nhạc.', 'info');
     });
 </script>

main.py

@@ -80,53 +80,6 @@ def get_temperature(bpm: int) -> float:
     t = (bpm - 40) / (180 - 40)
     return round(0.65 + t * 0.40, 3)
 
-def generate_drum_pattern(beat: float, bars: int = 2) -> list:
-    """
-    Lofi drum pattern:
-    - Kick: beats 1 và 3
-    - Snare: beats 2 và 4 (có humanize nhỏ)
-    - Hihat: 8th notes, bỏ ngẫu nhiên 15% để tạo groove
-    """
-    drums = []
-    bar_dur = beat * 4
-
-    for bar in range(bars):
-        base = bar * bar_dur
-
-        # Kick (note 36)
-        drums.append({
-            "note": 36, "velocity": 82, "duration": 0.05,
-            "type": "drum", "time": round(base, 4)
-        })
-        # Kick beat 3 (nhẹ hơn một chút)
-        drums.append({
-            "note": 36, "velocity": 70, "duration": 0.05,
-            "type": "drum", "time": round(base + beat * 2, 4)
-        })
-
-        # Snare (note 38) — humanize ±15ms
-        drums.append({
-            "note": 38, "velocity": 78, "duration": 0.05,
-            "type": "drum",
-            "time": round(base + beat + random.uniform(-0.015, 0.015), 4)
-        })
-        drums.append({
-            "note": 38, "velocity": 72, "duration": 0.05,
-            "type": "drum",
-            "time": round(base + beat * 3 + random.uniform(-0.015, 0.015), 4)
-        })
-
-        # Hihat (note 42) — 8th notes, bỏ ngẫu nhiên
-        for i in range(8):
-            if random.random() > 0.15:  # 85% chance mỗi hit
-                vel = random.randint(38, 58)
-                drums.append({
-                    "note": 42, "velocity": vel, "duration": 0.03,
-                    "type": "drum",
-                    "time": round(base + i * (beat * 0.5), 4)
-                })
-
-    return drums
 
 # ==========================================
 # WEBSOCKET ENDPOINT
@@ -267,14 +220,9 @@ async def websocket_vibe(websocket: WebSocket):
                         "time": round(t, 4)
                     })
 
-            # ============================================
-            # DRUM PATTERN
-            # ============================================
-            drums = generate_drum_pattern(beat, bars=BARS_PER_BATCH)
-
             # Gửi toàn bộ batch về client
             await websocket.send_json({
-                "notes": melody_notes + chord_notes + drums,
+                "notes": melody_notes + chord_notes,  # drums handled client-side
                 # FIX: gửi batch_duration thực tế thay vì step cứng
                 "batch_duration": round(batch_dur, 4)
             })