feat: redesign UI and overhaul audio processing for Discord Gateway v4
This commit is contained in:
baharsah
@@ -19,7 +19,6 @@
|
|||||||
"fluent-ffmpeg": "^2.1.3",
|
"fluent-ffmpeg": "^2.1.3",
|
||||||
"libsodium-wrappers": "^0.8.2",
|
"libsodium-wrappers": "^0.8.2",
|
||||||
"node-crc": "^4.0.0",
|
"node-crc": "^4.0.0",
|
||||||
"opusscript": "^0.1.1",
|
|
||||||
"prism-media": "2.0.0-alpha.0",
|
"prism-media": "2.0.0-alpha.0",
|
||||||
"sodium-native": "^4.3.2",
|
"sodium-native": "^4.3.2",
|
||||||
"ws": "^8.20.1"
|
"ws": "^8.20.1"
|
||||||
|
|||||||
@@ -3,180 +3,160 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--primary: #5865F2;
|
--primary: #5865F2;
|
||||||
|
--success: #43b581;
|
||||||
|
--danger: #f04747;
|
||||||
--bg: #36393f;
|
--bg: #36393f;
|
||||||
--card-bg: #2f3136;
|
--card: #2f3136;
|
||||||
--text: #ffffff;
|
--text: #ffffff;
|
||||||
--text-muted: #b9bbbe;
|
--text-muted: #b9bbbe;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Outfit', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
background-color: var(--bg);
|
background-color: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
margin: 0;
|
padding: 20px;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.container {
|
||||||
background-color: var(--card-bg);
|
background-color: var(--card);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
border-radius: 12px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 500px;
|
||||||
transition: transform 0.3s ease;
|
text-align: center;
|
||||||
|
border: 1px solid rgba(255,255,255,0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
.status-card {
|
||||||
transform: translateY(-5px);
|
background: rgba(0,0,0,0.2);
|
||||||
}
|
padding: 1.5rem;
|
||||||
|
border-radius: 15px;
|
||||||
h1 {
|
margin-bottom: 1.5rem;
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 10px;
|
||||||
margin-bottom: 2rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator {
|
.status-indicator {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
border-radius: 50%;
|
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;
|
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 {
|
.visualizer {
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background: rgba(0,0,0,0.1);
|
|
||||||
margin-top: 2rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
gap: 2px;
|
justify-content: center;
|
||||||
padding: 4px;
|
gap: 3px;
|
||||||
box-sizing: border-box;
|
height: 50px;
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
flex: 1;
|
width: 6px;
|
||||||
background: var(--primary);
|
background: linear-gradient(to top, var(--primary), #8088f5);
|
||||||
|
border-radius: 3px;
|
||||||
height: 2px;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="card">
|
<div class="container">
|
||||||
<h1>Audio Transmitter</h1>
|
<h1 style="margin-bottom: 0.5rem;">Discord Gateway v4</h1>
|
||||||
<p>Transmit your microphone to Discord Voice</p>
|
<p style="color: var(--text-muted); font-size: 0.8rem; margin-bottom: 2rem;">Optimized 24kHz Mono Bridge</p>
|
||||||
|
|
||||||
<div class="status">
|
<div class="status-card">
|
||||||
<div id="indicator" class="indicator"></div>
|
<div style="display: flex; align-items: center; gap: 10px;">
|
||||||
<span id="statusText">Disconnected</span>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button id="toggleBtn">Start Transmitting</button>
|
<div class="status-card">
|
||||||
|
<span id="listenStatus" style="color: var(--text-muted);">Speaker Off</span>
|
||||||
<div style="margin-top: 2rem; border-top: 1px solid #4f545c; padding-top: 1.5rem;">
|
<button id="listenBtn" class="btn btn-success">Join Listen Channel</button>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div class="visualizer" id="visualizer">
|
<div style="margin-top: 1.5rem;">
|
||||||
<!-- Bars will be generated by JS -->
|
<h3 style="font-size: 0.9rem; color: var(--text-muted); text-align: left; margin-bottom: 10px;">Participants</h3>
|
||||||
|
<div id="userList"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const toggleBtn = document.getElementById('toggleBtn');
|
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 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++) {
|
for (let i = 0; i < 32; i++) {
|
||||||
const bar = document.createElement('div');
|
const bar = document.createElement('div');
|
||||||
bar.className = 'bar';
|
bar.className = 'bar';
|
||||||
@@ -184,12 +164,90 @@
|
|||||||
}
|
}
|
||||||
const bars = document.querySelectorAll('.bar');
|
const bars = document.querySelectorAll('.bar');
|
||||||
|
|
||||||
let isStreaming = false;
|
|
||||||
let socket = null;
|
let socket = null;
|
||||||
let mediaRecorder = null;
|
let isStreaming = false;
|
||||||
let audioContext = null;
|
let isListening = false;
|
||||||
let analyser = null;
|
let audioContextTransmit = null;
|
||||||
let dataArray = 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 () => {
|
toggleBtn.onclick = async () => {
|
||||||
if (isStreaming) {
|
if (isStreaming) {
|
||||||
@@ -202,75 +260,68 @@
|
|||||||
async function startStreaming() {
|
async function startStreaming() {
|
||||||
try {
|
try {
|
||||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||||
|
|
||||||
// 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;
|
isStreaming = true;
|
||||||
|
toggleBtn.innerText = 'Stop Transmitting';
|
||||||
|
toggleBtn.className = 'btn btn-danger';
|
||||||
|
|
||||||
// MediaRecorder Setup
|
audioContextTransmit = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
|
||||||
mediaRecorder = new MediaRecorder(stream, {
|
const source = audioContextTransmit.createMediaStreamSource(stream);
|
||||||
mimeType: 'audio/webm;codecs=opus'
|
|
||||||
});
|
|
||||||
|
|
||||||
mediaRecorder.ondataavailable = async (event) => {
|
const analyser = audioContextTransmit.createAnalyser();
|
||||||
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();
|
|
||||||
analyser.fftSize = 64;
|
analyser.fftSize = 64;
|
||||||
source.connect(analyser);
|
source.connect(analyser);
|
||||||
dataArray = new Uint8Array(analyser.frequencyBinCount);
|
const dataArray = new Uint8Array(analyser.frequencyBinCount);
|
||||||
draw();
|
|
||||||
|
|
||||||
|
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) {
|
} catch (err) {
|
||||||
console.error('Error accessing microphone:', err);
|
alert('Microphone access denied: ' + err.message);
|
||||||
alert('Could not access microphone. Make sure you are on HTTPS or localhost.');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function stopStreaming() {
|
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;
|
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');
|
bars.forEach(bar => bar.style.height = '2px');
|
||||||
}
|
}
|
||||||
|
|
||||||
function draw() {
|
listenBtn.onclick = () => {
|
||||||
if (!isStreaming) return;
|
if (!audioContextListen) audioContextListen = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
|
||||||
requestAnimationFrame(draw);
|
if (isListening) {
|
||||||
analyser.getByteFrequencyData(dataArray);
|
audioContextListen.suspend();
|
||||||
|
listenBtn.innerText = 'Join Listen Channel';
|
||||||
bars.forEach((bar, index) => {
|
listenStatus.innerText = 'Speaker Off';
|
||||||
const value = dataArray[index] || 0;
|
isListening = false;
|
||||||
const percent = (value / 255) * 100;
|
} else {
|
||||||
bar.style.height = `${Math.max(2, percent)}%`;
|
audioContextListen.resume();
|
||||||
});
|
listenBtn.innerText = 'Stop Listening';
|
||||||
|
listenStatus.innerText = 'Listening Live...';
|
||||||
|
isListening = true;
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
initWebSocket();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
import "./mock-crc";
|
import "./mock-crc";
|
||||||
|
import "libsodium-wrappers";
|
||||||
|
import "@snazzah/davey";
|
||||||
import { Client } from "discord.js-selfbot-v13";
|
import { Client } from "discord.js-selfbot-v13";
|
||||||
import { startRecording } from "./recorder";
|
import { startRecording } from "./recorder";
|
||||||
import { config } from "./config";
|
import { config } from "./config";
|
||||||
|
|||||||
@@ -33,13 +33,9 @@ export class DiscordPlayer {
|
|||||||
|
|
||||||
public playStream(stream: Readable) {
|
public playStream(stream: Readable) {
|
||||||
console.log("[player] Starting new audio stream...");
|
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, {
|
||||||
|
inputType: StreamType.OggOpus,
|
||||||
const resource = createAudioResource(stream.pipe(demuxer), {
|
|
||||||
inputType: StreamType.Opus,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.player.play(resource);
|
this.player.play(resource);
|
||||||
|
|||||||
@@ -63,20 +63,22 @@ export async function startRecording(client: Client, channel: VoiceChannel): Pro
|
|||||||
|
|
||||||
// Dengarkan siapapun yang mulai bicara
|
// Dengarkan siapapun yang mulai bicara
|
||||||
receiver.speaking.on("start", async (userId) => {
|
receiver.speaking.on("start", async (userId) => {
|
||||||
if (config.verbose) {
|
// Coba ambil data user dari cache atau fetch dari API
|
||||||
// console.log(`[recorder-debug] Speaking 'start' event triggered for userId: ${userId}. Subscriptions has? ${receiver.subscriptions.has(userId)}`);
|
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
|
// Jangan record kalau sudah ada stream aktif untuk user ini
|
||||||
if (receiver.subscriptions.has(userId)) return;
|
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 timestamp = Date.now();
|
||||||
const userDir = path.join(recordingsDir, userId);
|
const userDir = path.join(recordingsDir, userId);
|
||||||
if (!fs.existsSync(userDir)) {
|
if (!fs.existsSync(userDir)) {
|
||||||
@@ -88,38 +90,60 @@ export async function startRecording(client: Client, channel: VoiceChannel): Pro
|
|||||||
const audioStream = receiver.subscribe(userId, {
|
const audioStream = receiver.subscribe(userId, {
|
||||||
end: {
|
end: {
|
||||||
behavior: EndBehaviorType.AfterSilence,
|
behavior: EndBehaviorType.AfterSilence,
|
||||||
duration: 1000, // Stop 1 detik setelah user diam
|
duration: 3000, // 3 seconds — avoids FFmpeg restart overhead between utterances
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const packetFilter = new PacketFilter(10);
|
// --- OGG file recording (unchanged) ---
|
||||||
|
const packetFilterForOgg = new PacketFilter(8);
|
||||||
const oggStream = new prism.opus.OggLogicalBitstream({
|
const oggStream = new prism.opus.OggLogicalBitstream({
|
||||||
opusHead: new prism.opus.OpusHead({
|
opusHead: new prism.opus.OpusHead({ channelCount: 2, sampleRate: 48000 }),
|
||||||
channelCount: 2,
|
pageSizeControl: { maxPackets: 10 },
|
||||||
sampleRate: 48000,
|
crc: true,
|
||||||
}),
|
|
||||||
pageSizeControl: {
|
|
||||||
maxPackets: 10,
|
|
||||||
},
|
|
||||||
crc: true, // Use our mock node-crc
|
|
||||||
});
|
});
|
||||||
const out = fs.createWriteStream(filename);
|
const out = fs.createWriteStream(filename);
|
||||||
|
audioStream.pipe(packetFilterForOgg).pipe(oggStream).pipe(out);
|
||||||
|
|
||||||
// Pipe: audioStream -> packetFilter -> oggStream -> out
|
// --- Web broadcast: pure JS Opus → PCM, no FFmpeg ---
|
||||||
audioStream.pipe(packetFilter).pipe(oggStream).pipe(out);
|
// 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
|
// CRITICAL: Swallow decode errors (DAVE/bad packets) without crashing
|
||||||
packetFilter.on('data', (chunk) => {
|
opusDecoder.on('error', () => {});
|
||||||
if ((global as any).broadcastOpusToWeb) {
|
|
||||||
(global as any).broadcastOpusToWeb(chunk);
|
// 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 () => {
|
out.on('finish', async () => {
|
||||||
if (config.verbose) {
|
if (config.verbose) {
|
||||||
@@ -145,17 +169,9 @@ export async function startRecording(client: Client, channel: VoiceChannel): Pro
|
|||||||
audioStream.on('error', (err) => {
|
audioStream.on('error', (err) => {
|
||||||
console.error(`[recorder] Audio Stream error ${userId}:`, err.message);
|
console.error(`[recorder] Audio Stream error ${userId}:`, err.message);
|
||||||
});
|
});
|
||||||
|
packetFilterForOgg.on('error', (err) => {
|
||||||
audioStream.on('data', (chunk) => {
|
console.error(`[recorder] PacketFilter(ogg) error ${userId}:`, err.message);
|
||||||
if (config.verbose) {
|
|
||||||
console.log(`[recorder-debug] Received audio packet from ${userId}, size: ${chunk.length} bytes`);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
packetFilter.on('error', (err) => {
|
|
||||||
console.error(`[recorder] Packet Filter error ${userId}:`, err.message);
|
|
||||||
});
|
|
||||||
|
|
||||||
out.on('error', (err) => {
|
out.on('error', (err) => {
|
||||||
console.error(`[recorder] File write error ${userId}:`, err.message);
|
console.error(`[recorder] File write error ${userId}:`, err.message);
|
||||||
});
|
});
|
||||||
|
|||||||
181
src/webserver.ts
181
src/webserver.ts
@@ -1,92 +1,127 @@
|
|||||||
import express from "express";
|
import express from "express";
|
||||||
import { WebSocketServer } from "ws";
|
|
||||||
import http from "http";
|
import http from "http";
|
||||||
|
import { WebSocketServer } from "ws";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
import { PassThrough } from "stream";
|
|
||||||
import { discordPlayer } from "./player";
|
|
||||||
import prism from "prism-media";
|
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) {
|
export function startWebserver(port: number = 3000) {
|
||||||
const app = express();
|
const app = express();
|
||||||
const server = http.createServer(app);
|
const server = http.createServer(app);
|
||||||
const wss = new WebSocketServer({ server });
|
|
||||||
|
|
||||||
const listeners = new Set<express.Response>();
|
const wsPort = port + 1;
|
||||||
let headerChunks: Buffer[] = [];
|
const wss = new WebSocketServer({ port: wsPort, host: "0.0.0.0" });
|
||||||
|
console.log(`[webserver] WebSocket server listening on ws://0.0.0.0:${wsPort}`);
|
||||||
// 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);
|
|
||||||
|
|
||||||
app.use(express.static(path.join(__dirname, "../public")));
|
app.use(express.static(path.join(__dirname, "../public")));
|
||||||
|
|
||||||
// Endpoint for receiving (listening) audio from Discord
|
// --- Inbound: Discord PCM → tagged chunks → browser (set in recorder.ts) ---
|
||||||
app.get("/listen", (req, res) => {
|
(global as any).broadcastPcmToWeb = (chunk: Buffer, userId: string) => {
|
||||||
res.setHeader("Content-Type", "audio/ogg");
|
let hash = 0;
|
||||||
res.setHeader("Transfer-Encoding", "chunked");
|
for (let i = 0; i < userId.length; i++) {
|
||||||
res.setHeader("Connection", "keep-alive");
|
hash = ((hash << 5) - hash) + userId.charCodeAt(i);
|
||||||
|
hash |= 0;
|
||||||
// Send cached headers immediately so the browser recognizes the stream
|
}
|
||||||
headerChunks.forEach(chunk => res.write(chunk));
|
const header = Buffer.alloc(4);
|
||||||
|
header.writeInt32LE(hash, 0);
|
||||||
listeners.add(res);
|
const packet = Buffer.concat([header, chunk]);
|
||||||
console.log(`[webserver] New listener connected. Total: ${listeners.size}`);
|
wsClients.forEach(client => {
|
||||||
|
if (client.readyState === 1) client.send(packet);
|
||||||
req.on("close", () => {
|
|
||||||
listeners.delete(res);
|
|
||||||
console.log(`[webserver] Listener disconnected. Total: ${listeners.size}`);
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
// Function to broadcast raw Opus packets from Discord to the shared Ogg stream
|
|
||||||
(global as any).broadcastOpusToWeb = (chunk: Buffer) => {
|
|
||||||
oggStream.write(chunk);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
wss.on("connection", (ws) => {
|
(global as any).updateActiveUser = (userId: string, data: { username: string, avatar: string, speaking: boolean }) => {
|
||||||
console.log("[webserver] New WebSocket connection");
|
activeUsers.set(userId, data);
|
||||||
|
broadcastUserState();
|
||||||
|
};
|
||||||
|
|
||||||
const audioStream = new PassThrough();
|
function broadcastUserState() {
|
||||||
discordPlayer.playStream(audioStream);
|
const payload = JSON.stringify({
|
||||||
|
type: "user_state",
|
||||||
ws.on("message", (data: Buffer) => {
|
users: Array.from(activeUsers.entries()).map(([id, data]) => ({ id, ...data }))
|
||||||
// console.log(`[webserver] Received chunk: ${data.length} bytes`);
|
|
||||||
audioStream.write(data);
|
|
||||||
});
|
});
|
||||||
|
wsClients.forEach(client => {
|
||||||
ws.on("close", () => {
|
if (client.readyState === 1) client.send(payload);
|
||||||
console.log("[webserver] WebSocket connection closed");
|
});
|
||||||
audioStream.end();
|
}
|
||||||
});
|
|
||||||
|
// --- Outbound: browser PCM (24kHz mono) → Opus → Discord, NO FFmpeg ---
|
||||||
ws.on("error", (err) => {
|
const RATE = 48000;
|
||||||
console.error("[webserver] WebSocket error:", err);
|
const CHANNELS = 2;
|
||||||
audioStream.end();
|
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 });
|
||||||
server.listen(port, () => {
|
const oggBitstream = new prism.opus.OggLogicalBitstream({
|
||||||
console.log(`[webserver] Server listening on http://localhost:${port}`);
|
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 on port " + wsPort);
|
||||||
|
wsClients.add(ws);
|
||||||
|
|
||||||
|
ws.send(JSON.stringify({
|
||||||
|
type: "user_state",
|
||||||
|
users: Array.from(activeUsers.entries()).map(([id, data]) => ({ id, ...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", () => { wsClients.delete(ws); });
|
||||||
|
ws.on("error", () => { wsClients.delete(ws); });
|
||||||
|
});
|
||||||
|
|
||||||
|
server.listen(port, "0.0.0.0", () => {
|
||||||
|
console.log(`[webserver] Web interface listening on http://0.0.0.0:${port}`);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user