feat: redesign UI and overhaul audio processing for Discord Gateway v4

2026-05-13 02:30:09 +07:00
parent 44ac346c21
commit ad7dcde47c
7 changed files with 396 additions and 297 deletions
@@ -19,7 +19,6 @@
    "fluent-ffmpeg": "^2.1.3",
    "libsodium-wrappers": "^0.8.2",
    "node-crc": "^4.0.0",
-    "opusscript": "^0.1.1",
    "prism-media": "2.0.0-alpha.0",
    "sodium-native": "^4.3.2",
    "ws": "^8.20.1"
@@ -3,180 +3,160 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Discord Audio Transmitter</title>
+    <title>Discord Audio Gateway v4</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #5865F2;
+            --success: #43b581;
+            --danger: #f04747;
            --bg: #36393f;
-            --card-bg: #2f3136;
+            --card: #2f3136;
            --text: #ffffff;
            --text-muted: #b9bbbe;
        }

+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Outfit', sans-serif;
+        }
+
        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            justify-content: center;
            align-items: center;
-            height: 100vh;
-            margin: 0;
-            overflow: hidden;
+            min-height: 100vh;
+            padding: 20px;
        }

-        .card {
-            background-color: var(--card-bg);
+        .container {
+            background-color: var(--card);
            padding: 2rem;
-            border-radius: 12px;
-            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
-            text-align: center;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            width: 100%;
-            max-width: 400px;
-            transition: transform 0.3s ease;
+            max-width: 500px;
+            text-align: center;
+            border: 1px solid rgba(255,255,255,0.05);
        }

-        .card:hover {
-            transform: translateY(-5px);
-        }
-
-        h1 {
-            font-size: 1.5rem;
-            margin-bottom: 0.5rem;
-        }
-
-        p {
-            color: var(--text-muted);
-            margin-bottom: 2rem;
-        }
-
-        .status {
+        .status-card {
+            background: rgba(0,0,0,0.2);
+            padding: 1.5rem;
+            border-radius: 15px;
+            margin-bottom: 1.5rem;
            display: flex;
+            flex-direction: column;
            align-items: center;
-            justify-content: center;
-            margin-bottom: 2rem;
-            font-size: 0.9rem;
+            gap: 10px;
        }

-        .indicator {
+        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
-            background-color: #ff4747;
-            margin-right: 8px;
-            box-shadow: 0 0 8px #ff4747;
-        }
-
-        .indicator.active {
-            background-color: #43b581;
-            box-shadow: 0 0 8px #43b581;
-        }
-
-        button {
-            background-color: var(--primary);
-            color: white;
-            border: none;
-            padding: 12px 24px;
-            font-size: 1rem;
-            font-weight: 600;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.2s, transform 0.1s;
-            width: 100%;
-        }
-
-        button:hover {
-            background-color: #4752c4;
-        }
-
-        button:active {
-            transform: scale(0.98);
-        }
-
-        button:disabled {
            background-color: #4f545c;
-            cursor: not-allowed;
        }

+        .status-indicator.active {
+            background-color: var(--success);
+            box-shadow: 0 0 15px var(--success);
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border-radius: 10px;
+            border: none;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            width: 100%;
+            font-size: 1rem;
+        }
+
+        .btn-primary { background-color: var(--primary); color: white; }
+        .btn-success { background-color: var(--success); color: white; }
+        .btn-danger { background-color: var(--danger); color: white; }
+
        .visualizer {
-            width: 100%;
-            height: 60px;
-            background: rgba(0,0,0,0.1);
-            margin-top: 2rem;
-            border-radius: 4px;
            display: flex;
            align-items: flex-end;
-            gap: 2px;
-            padding: 4px;
-            box-sizing: border-box;
+            justify-content: center;
+            gap: 3px;
+            height: 50px;
+            margin-top: 10px;
+            width: 100%;
        }

        .bar {
-            flex: 1;
-            background: var(--primary);
+            width: 6px;
+            background: linear-gradient(to top, var(--primary), #8088f5);
+            border-radius: 3px;
            height: 2px;
-            transition: height 0.1s ease;
+        }
+
+        #userList {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            margin-top: 1rem;
+            text-align: left;
+        }
+
+        .user-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 8px;
+            border-radius: 10px;
+            background: rgba(255,255,255,0.03);
+            border-left: 4px solid transparent;
+        }
+
+        .user-item.speaking {
+            border-left-color: var(--success);
+            background: rgba(67, 181, 129, 0.1);
        }
    </style>
 </head>
 <body>
-    <div class="card">
-        <h1>Audio Transmitter</h1>
-        <p>Transmit your microphone to Discord Voice</p>
-        
-        <div class="status">
-            <div id="indicator" class="indicator"></div>
-            <span id="statusText">Disconnected</span>
+    <div class="container">
+        <h1 style="margin-bottom: 0.5rem;">Discord Gateway v4</h1>
+        <p style="color: var(--text-muted); font-size: 0.8rem; margin-bottom: 2rem;">Optimized 24kHz Mono Bridge</p>
+
+        <div class="status-card">
+            <div style="display: flex; align-items: center; gap: 10px;">
+                <div id="statusIndicator" class="status-indicator"></div>
+                <span id="statusText">Connecting...</span>
+            </div>
+            <button id="toggleBtn" class="btn btn-primary">Start Transmitting</button>
+            <div class="visualizer" id="visualizer"></div>
        </div>

-        <button id="toggleBtn">Start Transmitting</button>
-
-        <div style="margin-top: 2rem; border-top: 1px solid #4f545c; padding-top: 1.5rem;">
-            <h3>Listen to Discord</h3>
-            <button id="listenBtn" style="margin-bottom: 0.5rem; background-color: #43b581;">Join Listen Channel</button>
-            <audio id="discordAudio" controls style="width: 100%; display: none;"></audio>
-            <p id="listenStatus" style="font-size: 0.8rem; margin-top: 0.5rem;">Click button to listen</p>
+        <div class="status-card">
+            <span id="listenStatus" style="color: var(--text-muted);">Speaker Off</span>
+            <button id="listenBtn" class="btn btn-success">Join Listen Channel</button>
        </div>

-        <div class="visualizer" id="visualizer">
-            <!-- Bars will be generated by JS -->
+        <div style="margin-top: 1.5rem;">
+            <h3 style="font-size: 0.9rem; color: var(--text-muted); text-align: left; margin-bottom: 10px;">Participants</h3>
+            <div id="userList"></div>
        </div>
    </div>

    <script>
        const toggleBtn = document.getElementById('toggleBtn');
-        const indicator = document.getElementById('indicator');
-        const statusText = document.getElementById('statusText');
-        const visualizer = document.getElementById('visualizer');
-        const discordAudio = document.getElementById('discordAudio');
-        const listenStatus = document.getElementById('listenStatus');
        const listenBtn = document.getElementById('listenBtn');
+        const statusIndicator = document.getElementById('statusIndicator');
+        const statusText = document.getElementById('statusText');
+        const listenStatus = document.getElementById('listenStatus');
+        const userList = document.getElementById('userList');
+        const visualizer = document.getElementById('visualizer');

-        let isListening = false;
-        listenBtn.onclick = () => {
-            if (isListening) {
-                discordAudio.pause();
-                discordAudio.src = '';
-                discordAudio.style.display = 'none';
-                listenBtn.innerText = 'Join Listen Channel';
-                listenBtn.style.backgroundColor = '#43b581';
-                listenStatus.innerText = 'Disconnected';
-                isListening = false;
-            } else {
-                discordAudio.src = '/listen?t=' + Date.now();
-                discordAudio.style.display = 'block';
-                discordAudio.play().catch(err => {
-                    console.error('Playback error:', err);
-                    listenStatus.innerText = 'Playback failed: ' + err.message;
-                });
-                listenBtn.innerText = 'Stop Listening';
-                listenBtn.style.backgroundColor = '#f04747';
-                listenStatus.innerText = 'Listening live...';
-                isListening = true;
-            }
-        };
-
-        // Create visualizer bars
        for (let i = 0; i < 32; i++) {
            const bar = document.createElement('div');
            bar.className = 'bar';
@@ -184,12 +164,90 @@
        }
        const bars = document.querySelectorAll('.bar');

-        let isStreaming = false;
        let socket = null;
-        let mediaRecorder = null;
-        let audioContext = null;
-        let analyser = null;
-        let dataArray = null;
+        let isStreaming = false;
+        let isListening = false;
+        let audioContextTransmit = null;
+        let audioContextListen = null;
+        let processor = null;
+        let nextStartTime = 0;
+
+        // Optimized settings (1/4 bandwidth compared to 48k Stereo)
+        const SAMPLE_RATE = 24000;
+        const CHANNELS = 1;
+
+        function initWebSocket() {
+            if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) return;
+            socket = new WebSocket(`ws://${window.location.hostname}:3001`);
+            socket.binaryType = 'arraybuffer';
+
+            socket.onopen = () => {
+                statusText.innerText = 'Server Connected';
+                statusIndicator.classList.add('active');
+            };
+
+            socket.onmessage = (event) => {
+                if (event.data instanceof ArrayBuffer) {
+                    handleIncomingPCM(event.data);
+                } else {
+                    try {
+                        const data = JSON.parse(event.data);
+                        if (data.type === 'user_state') updateUserList(data.users);
+                    } catch (e) {}
+                }
+            };
+
+            socket.onclose = () => {
+                statusText.innerText = 'Server Offline';
+                statusIndicator.classList.remove('active');
+                setTimeout(initWebSocket, 2000);
+            };
+        }
+
+        function updateUserList(users) {
+            userList.innerHTML = users.map(user => `
+                <div class="user-item ${user.speaking ? 'speaking' : ''}">
+                    <img src="${user.avatar}" style="width: 32px; height: 32px; border-radius: 50%;">
+                    <div style="flex: 1;">
+                        <div style="font-size: 0.85rem; font-weight: 600;">${user.username}</div>
+                        <div style="font-size: 0.7rem; color: ${user.speaking ? '#43b581' : '#b9bbbe'};">
+                            ${user.speaking ? 'Speaking' : 'Idle'}
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        const userTimelines = new Map();
+
+        function handleIncomingPCM(data) {
+            if (!isListening || !audioContextListen) return;
+            
+            // Parse 4-byte hash header
+            const headerView = new DataView(data, 0, 4);
+            const userIdHash = headerView.getInt32(0, true);
+            const audioData = data.slice(4);
+
+            const int16Array = new Int16Array(audioData);
+            const float32Array = new Float32Array(int16Array.length);
+            for (let i = 0; i < int16Array.length; i++) float32Array[i] = int16Array[i] / 32768;
+
+            const audioBuffer = audioContextListen.createBuffer(CHANNELS, float32Array.length / CHANNELS, SAMPLE_RATE);
+            const nowBuffering = audioBuffer.getChannelData(0);
+            for (let i = 0; i < audioBuffer.length; i++) nowBuffering[i] = float32Array[i];
+
+            const source = audioContextListen.createBufferSource();
+            source.buffer = audioBuffer;
+            source.connect(audioContextListen.destination);
+
+            const currentTime = audioContextListen.currentTime;
+            let userNextStartTime = userTimelines.get(userIdHash) || 0;
+            
+            if (userNextStartTime < currentTime) userNextStartTime = currentTime + 0.05;
+            source.start(userNextStartTime);
+            userNextStartTime += audioBuffer.duration;
+            userTimelines.set(userIdHash, userNextStartTime);
+        }

        toggleBtn.onclick = async () => {
            if (isStreaming) {
@@ -202,75 +260,68 @@
        async function startStreaming() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                isStreaming = true;
+                toggleBtn.innerText = 'Stop Transmitting';
+                toggleBtn.className = 'btn btn-danger';
+
+                audioContextTransmit = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
+                const source = audioContextTransmit.createMediaStreamSource(stream);
                
-                // WebSocket Setup
-                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-                socket = new WebSocket(`${protocol}//${window.location.host}`);
-                socket.binaryType = 'arraybuffer';
-
-                socket.onopen = () => {
-                    indicator.classList.add('active');
-                    statusText.innerText = 'Transmitting...';
-                    toggleBtn.innerText = 'Stop Transmitting';
-                    isStreaming = true;
-
-                    // MediaRecorder Setup
-                    mediaRecorder = new MediaRecorder(stream, { 
-                        mimeType: 'audio/webm;codecs=opus' 
-                    });
-
-                    mediaRecorder.ondataavailable = async (event) => {
-                        if (event.data.size > 0 && socket.readyState === WebSocket.OPEN) {
-                            socket.send(await event.data.arrayBuffer());
-                        }
-                    };
-
-                    mediaRecorder.start(100); // 100ms chunks
-                };
-
-                socket.onclose = () => {
-                    stopStreaming();
-                };
-
-                // Visualizer Setup
-                audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                const source = audioContext.createMediaStreamSource(stream);
-                analyser = audioContext.createAnalyser();
+                const analyser = audioContextTransmit.createAnalyser();
                analyser.fftSize = 64;
                source.connect(analyser);
-                dataArray = new Uint8Array(analyser.frequencyBinCount);
-                draw();
+                const dataArray = new Uint8Array(analyser.frequencyBinCount);

+                processor = audioContextTransmit.createScriptProcessor(4096, 1, 1);
+                source.connect(processor);
+                processor.connect(audioContextTransmit.destination);
+
+                processor.onaudioprocess = (e) => {
+                    if (!isStreaming || socket.readyState !== WebSocket.OPEN) return;
+                    
+                    const inputData = e.inputBuffer.getChannelData(0);
+                    const pcmData = new Int16Array(inputData.length);
+                    for (let i = 0; i < inputData.length; i++) {
+                        pcmData[i] = Math.max(-1, Math.min(1, inputData[i])) * 32767;
+                    }
+                    socket.send(pcmData.buffer);
+
+                    analyser.getByteFrequencyData(dataArray);
+                    bars.forEach((bar, index) => {
+                        const percent = (dataArray[index] / 255) * 100;
+                        bar.style.height = `${Math.max(2, percent)}%`;
+                    });
+                };
            } catch (err) {
-                console.error('Error accessing microphone:', err);
-                alert('Could not access microphone. Make sure you are on HTTPS or localhost.');
+                alert('Microphone access denied: ' + err.message);
            }
        }

        function stopStreaming() {
-            if (mediaRecorder) mediaRecorder.stop();
-            if (socket) socket.close();
-            if (audioContext) audioContext.close();
-            
-            indicator.classList.remove('active');
-            statusText.innerText = 'Disconnected';
-            toggleBtn.innerText = 'Start Transmitting';
            isStreaming = false;
-            
+            if (processor) processor.disconnect();
+            if (audioContextTransmit) audioContextTransmit.close();
+            toggleBtn.innerText = 'Start Transmitting';
+            toggleBtn.className = 'btn btn-primary';
            bars.forEach(bar => bar.style.height = '2px');
        }

-        function draw() {
-            if (!isStreaming) return;
-            requestAnimationFrame(draw);
-            analyser.getByteFrequencyData(dataArray);
-            
-            bars.forEach((bar, index) => {
-                const value = dataArray[index] || 0;
-                const percent = (value / 255) * 100;
-                bar.style.height = `${Math.max(2, percent)}%`;
-            });
-        }
+        listenBtn.onclick = () => {
+            if (!audioContextListen) audioContextListen = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
+            if (isListening) {
+                audioContextListen.suspend();
+                listenBtn.innerText = 'Join Listen Channel';
+                listenStatus.innerText = 'Speaker Off';
+                isListening = false;
+            } else {
+                audioContextListen.resume();
+                listenBtn.innerText = 'Stop Listening';
+                listenStatus.innerText = 'Listening Live...';
+                isListening = true;
+            }
+        };
+
+        initWebSocket();
    </script>
 </body>
 </html>
@@ -1,4 +1,6 @@
 import "./mock-crc";
+import "libsodium-wrappers";
+import "@snazzah/davey";
 import { Client } from "discord.js-selfbot-v13";
 import { startRecording } from "./recorder";
 import { config } from "./config";
@@ -33,13 +33,9 @@ export class DiscordPlayer {

    public playStream(stream: Readable) {
        console.log("[player] Starting new audio stream...");
-        // Use WebmDemuxer to extract Opus packets from browser stream
-        const demuxer = new prism.opus.WebmDemuxer();
        
-        demuxer.on('error', err => console.error("[player] Demuxer error:", err));
-        
-        const resource = createAudioResource(stream.pipe(demuxer), {
-            inputType: StreamType.Opus,
+        const resource = createAudioResource(stream, {
+            inputType: StreamType.OggOpus,
        });
        
        this.player.play(resource);
@@ -63,20 +63,22 @@ export async function startRecording(client: Client, channel: VoiceChannel): Pro

    // Dengarkan siapapun yang mulai bicara
    receiver.speaking.on("start", async (userId) => {
-        if (config.verbose) {
-            // console.log(`[recorder-debug] Speaking 'start' event triggered for userId: ${userId}. Subscriptions has? ${receiver.subscriptions.has(userId)}`);
+        // Coba ambil data user dari cache atau fetch dari API
+        const user = client.users.cache.get(userId) || await client.users.fetch(userId).catch(() => null);
+        const username = user?.username ?? "Unknown User";
+        const avatar = user?.displayAvatarURL({ format: 'png', size: 64 }) ?? "https://cdn.discordapp.com/embed/avatars/0.png";
+
+        // Tampilkan format "nama user [voice activity]"
+        console.log(`${username} [voice activity]`);
+        
+        // Notify webserver
+        if ((global as any).updateActiveUser) {
+            (global as any).updateActiveUser(userId, { username, avatar, speaking: true });
        }

        // Jangan record kalau sudah ada stream aktif untuk user ini
        if (receiver.subscriptions.has(userId)) return;

-        // Coba ambil data user dari cache atau fetch dari API
-        const user = client.users.cache.get(userId) || await client.users.fetch(userId).catch(() => null);
-        const username = user?.username ?? "Unknown User";
-
-        // Tampilkan format "nama user [voice activity]"
-        console.log(`${username} [voice activity]`);
-
        const timestamp = Date.now();
        const userDir = path.join(recordingsDir, userId);
        if (!fs.existsSync(userDir)) {
@@ -88,38 +90,60 @@ export async function startRecording(client: Client, channel: VoiceChannel): Pro
        const audioStream = receiver.subscribe(userId, {
            end: {
                behavior: EndBehaviorType.AfterSilence,
-                duration: 1000, // Stop 1 detik setelah user diam
+                duration: 3000, // 3 seconds — avoids FFmpeg restart overhead between utterances
            },
        });

        try {
-            const packetFilter = new PacketFilter(10);
-
+            // --- OGG file recording (unchanged) ---
+            const packetFilterForOgg = new PacketFilter(8);
            const oggStream = new prism.opus.OggLogicalBitstream({
-                opusHead: new prism.opus.OpusHead({
-                    channelCount: 2,
-                    sampleRate: 48000,
-                }),
-                pageSizeControl: {
-                    maxPackets: 10,
-                },
-                crc: true, // Use our mock node-crc
+                opusHead: new prism.opus.OpusHead({ channelCount: 2, sampleRate: 48000 }),
+                pageSizeControl: { maxPackets: 10 },
+                crc: true,
            });
            const out = fs.createWriteStream(filename);
+            audioStream.pipe(packetFilterForOgg).pipe(oggStream).pipe(out);

-            // Pipe: audioStream -> packetFilter -> oggStream -> out
-            audioStream.pipe(packetFilter).pipe(oggStream).pipe(out);
+            // --- Web broadcast: pure JS Opus → PCM, no FFmpeg ---
+            // Create a fresh decoder for each user session
+            const opusDecoder = new prism.opus.Decoder({ frameSize: 960, channels: 2, rate: 48000 });

-            // Forward raw Opus packets to the web shared Ogg stream
-            packetFilter.on('data', (chunk) => {
-                if ((global as any).broadcastOpusToWeb) {
-                    (global as any).broadcastOpusToWeb(chunk);
+            // CRITICAL: Swallow decode errors (DAVE/bad packets) without crashing
+            opusDecoder.on('error', () => {});
+
+            // Downsample 48kHz stereo → 24kHz mono (take left channel, every 2nd sample)
+            opusDecoder.on('data', (pcm: Buffer) => {
+                if (!(global as any).broadcastPcmToWeb) return;
+                // Input:  48kHz stereo s16le → 4 bytes per sample-pair
+                // Output: 24kHz mono  s16le → 2 bytes per sample
+                const outBuf = Buffer.alloc(pcm.length / 4);
+                for (let i = 0; i < outBuf.length / 2; i++) {
+                    outBuf.writeInt16LE(pcm.readInt16LE(i * 8), i * 2);
+                }
+                (global as any).broadcastPcmToWeb(outBuf, userId);
+            });
+
+            // Feed Opus packets one-by-one; catch per-packet decode errors
+            let packetCount = 0;
+            audioStream.on('data', (chunk: Buffer) => {
+                packetCount++;
+                if (packetCount <= 5) {
+                    console.log(`[recorder] Pkt #${packetCount} from ${userId}: ${chunk.length}b | 0x${chunk.slice(0,4).toString('hex')}`);
+                }
+                if (chunk.length < 8) return; // skip tiny control packets
+                try {
+                    opusDecoder.write(chunk);
+                } catch (_) {} // per-packet isolation — don't let one bad packet stop the stream
+            });
+
+            audioStream.on('end', () => {
+                opusDecoder.end();
+                if ((global as any).updateActiveUser) {
+                    (global as any).updateActiveUser(userId, { username, avatar, speaking: false });
                }
            });

-            if (config.verbose) {
-                console.log(`[recorder] Recording user ${userId} → ${filename}`);
-            }

            out.on('finish', async () => {
                if (config.verbose) {
@@ -145,17 +169,9 @@ export async function startRecording(client: Client, channel: VoiceChannel): Pro
            audioStream.on('error', (err) => {
                console.error(`[recorder] Audio Stream error ${userId}:`, err.message);
            });
-
-            audioStream.on('data', (chunk) => {
-                if (config.verbose) {
-                    console.log(`[recorder-debug] Received audio packet from ${userId}, size: ${chunk.length} bytes`);
-                }
+            packetFilterForOgg.on('error', (err) => {
+                console.error(`[recorder] PacketFilter(ogg) error ${userId}:`, err.message);
            });
-
-            packetFilter.on('error', (err) => {
-                console.error(`[recorder] Packet Filter error ${userId}:`, err.message);
-            });
-
            out.on('error', (err) => {
                console.error(`[recorder] File write error ${userId}:`, err.message);
            });
@@ -1,92 +1,127 @@
 import express from "express";
-import { WebSocketServer } from "ws";
 import http from "http";
+import { WebSocketServer } from "ws";
 import path from "path";
-import { PassThrough } from "stream";
-import { discordPlayer } from "./player";
 import prism from "prism-media";
+import { discordPlayer } from "./player";
+
+const activeUsers = new Map<string, { username: string, avatar: string, speaking: boolean }>();
+let wsClients = new Set<any>();
+
+// --- Upsampling: 24kHz mono s16le → 48kHz stereo s16le (pure JS, no FFmpeg) ---
+// Each input sample is duplicated into 2 stereo pairs to double the sample rate.
+function upsample24kMonoTo48kStereo(mono24k: Buffer): Buffer {
+    const out = Buffer.alloc(mono24k.length * 4); // 2x rate * 2ch = 4x bytes
+    for (let i = 0; i < mono24k.length / 2; i++) {
+        const s = mono24k.readInt16LE(i * 2);
+        out.writeInt16LE(s, i * 8);      // t=0 L
+        out.writeInt16LE(s, i * 8 + 2);  // t=0 R
+        out.writeInt16LE(s, i * 8 + 4);  // t=1 L  (duplicate for 2x rate)
+        out.writeInt16LE(s, i * 8 + 6);  // t=1 R
+    }
+    return out;
+}

 export function startWebserver(port: number = 3000) {
    const app = express();
    const server = http.createServer(app);
-    const wss = new WebSocketServer({ server });

-    const listeners = new Set<express.Response>();
-    let headerChunks: Buffer[] = [];
-    
-    // Create a single, continuous Ogg stream for all web listeners
-    const oggStream = new prism.opus.OggLogicalBitstream({
-        opusHead: new prism.opus.OpusHead({
-            channelCount: 2,
-            sampleRate: 48000,
-        }),
-        pageSizeControl: {
-            maxPackets: 10,
-        },
-    });
-
-    // Forward Ogg pages to all connected web listeners
-    oggStream.on("data", (chunk) => {
-        // Cache the first 2 chunks (headers)
-        if (headerChunks.length < 2) {
-            headerChunks.push(chunk);
-        }
-        listeners.forEach(res => res.write(chunk));
-    });
-
-    // Prime the stream with a silent packet to generate headers immediately
-    // Silent Opus packet (1 frame, 20ms)
-    const silentPacket = Buffer.from([0xf8, 0xff, 0xfe]);
-    oggStream.write(silentPacket);
+    const wsPort = port + 1;
+    const wss = new WebSocketServer({ port: wsPort, host: "0.0.0.0" });
+    console.log(`[webserver] WebSocket server listening on ws://0.0.0.0:${wsPort}`);

    app.use(express.static(path.join(__dirname, "../public")));

-    // Endpoint for receiving (listening) audio from Discord
-    app.get("/listen", (req, res) => {
-        res.setHeader("Content-Type", "audio/ogg");
-        res.setHeader("Transfer-Encoding", "chunked");
-        res.setHeader("Connection", "keep-alive");
-        
-        // Send cached headers immediately so the browser recognizes the stream
-        headerChunks.forEach(chunk => res.write(chunk));
-        
-        listeners.add(res);
-        console.log(`[webserver] New listener connected. Total: ${listeners.size}`);
-
-        req.on("close", () => {
-            listeners.delete(res);
-            console.log(`[webserver] Listener disconnected. Total: ${listeners.size}`);
+    // --- Inbound: Discord PCM → tagged chunks → browser (set in recorder.ts) ---
+    (global as any).broadcastPcmToWeb = (chunk: Buffer, userId: string) => {
+        let hash = 0;
+        for (let i = 0; i < userId.length; i++) {
+            hash = ((hash << 5) - hash) + userId.charCodeAt(i);
+            hash |= 0;
+        }
+        const header = Buffer.alloc(4);
+        header.writeInt32LE(hash, 0);
+        const packet = Buffer.concat([header, chunk]);
+        wsClients.forEach(client => {
+            if (client.readyState === 1) client.send(packet);
        });
-    });
-
-    // Function to broadcast raw Opus packets from Discord to the shared Ogg stream
-    (global as any).broadcastOpusToWeb = (chunk: Buffer) => {
-        oggStream.write(chunk);
    };

+    (global as any).updateActiveUser = (userId: string, data: { username: string, avatar: string, speaking: boolean }) => {
+        activeUsers.set(userId, data);
+        broadcastUserState();
+    };
+
+    function broadcastUserState() {
+        const payload = JSON.stringify({
+            type: "user_state",
+            users: Array.from(activeUsers.entries()).map(([id, data]) => ({ id, ...data }))
+        });
+        wsClients.forEach(client => {
+            if (client.readyState === 1) client.send(payload);
+        });
+    }
+
+    // --- Outbound: browser PCM (24kHz mono) → Opus → Discord, NO FFmpeg ---
+    const RATE = 48000;
+    const CHANNELS = 2;
+    const FRAME_SIZE = 960;                        // 20ms @ 48kHz
+    const BYTES_PER_FRAME = FRAME_SIZE * CHANNELS * 2; // 3840 bytes
+
+    const opusEncoder = new prism.opus.Encoder({ rate: RATE, channels: CHANNELS, frameSize: FRAME_SIZE });
+    const oggBitstream = new prism.opus.OggLogicalBitstream({
+        opusHead: new prism.opus.OpusHead({ channelCount: CHANNELS, sampleRate: RATE }),
+        pageSizeControl: { maxPackets: 10 },
+        crc: true,
+    });
+    opusEncoder.on('error', () => {});
+
+    opusEncoder.pipe(oggBitstream);
+    // Prime the encoder immediately so OGG headers are emitted before player reads
+    opusEncoder.write(Buffer.alloc(BYTES_PER_FRAME, 0));
+    discordPlayer.playStream(oggBitstream);
+
+    let pcmBuffer = Buffer.alloc(0);
+    let lastBrowserAudioTime = 0;
+    const SILENCE_FRAME = Buffer.alloc(BYTES_PER_FRAME, 0);
+
+    // Keep encoder alive with silence when browser isn't sending
+    setInterval(() => {
+        if (Date.now() - lastBrowserAudioTime > 40) {
+            opusEncoder.write(SILENCE_FRAME);
+        }
+    }, 20);
+
    wss.on("connection", (ws) => {
-        console.log("[webserver] New WebSocket connection");
+        console.log("[webserver] New WebSocket connection on port " + wsPort);
+        wsClients.add(ws);

-        const audioStream = new PassThrough();
-        discordPlayer.playStream(audioStream);
+        ws.send(JSON.stringify({
+            type: "user_state",
+            users: Array.from(activeUsers.entries()).map(([id, data]) => ({ id, ...data }))
+        }));

-        ws.on("message", (data: Buffer) => {
-            // console.log(`[webserver] Received chunk: ${data.length} bytes`);
-            audioStream.write(data);
+        ws.on("message", (data: any) => {
+            if (!Buffer.isBuffer(data)) return;
+            lastBrowserAudioTime = Date.now();
+
+            // Upsample browser 24kHz mono → 48kHz stereo
+            const upsampled = upsample24kMonoTo48kStereo(data);
+            pcmBuffer = Buffer.concat([pcmBuffer, upsampled]);
+
+            // Encode complete Opus frames
+            while (pcmBuffer.length >= BYTES_PER_FRAME) {
+                const frame = pcmBuffer.slice(0, BYTES_PER_FRAME);
+                pcmBuffer = pcmBuffer.slice(BYTES_PER_FRAME);
+                opusEncoder.write(frame);
+            }
        });

-        ws.on("close", () => {
-            console.log("[webserver] WebSocket connection closed");
-            audioStream.end();
-        });
-
-        ws.on("error", (err) => {
-            console.error("[webserver] WebSocket error:", err);
-            audioStream.end();
-        });
+        ws.on("close", () => { wsClients.delete(ws); });
+        ws.on("error", () => { wsClients.delete(ws); });
    });

-    server.listen(port, () => {
-        console.log(`[webserver] Server listening on http://localhost:${port}`);
+    server.listen(port, "0.0.0.0", () => {
+        console.log(`[webserver] Web interface listening on http://0.0.0.0:${port}`);
    });
 }