fix: replace MediaRecorder with AudioWorklet (Blob URL) for voice capture

This commit is contained in:
Mk 2026-05-26 12:13:43 +00:00
parent d3e2ebca78
commit cc46b93e96
2 changed files with 50 additions and 54 deletions

82
game.js
View File

@ -1245,10 +1245,32 @@
let voiceSocket = null;
let voiceStream = null;
let audioCtx = null;
let voiceRecorder = null;
let voiceWorklet = null;
let voiceActive = false;
const VOICE_SERVER = 'https://voicegrech.mkn8n.ru';
// AudioWorklet processor as Blob URL — no separate file needed
const workletCode = `
class VoiceProcessor extends AudioWorkletProcessor {
process(inputs) {
const ch = inputs[0];
if (ch && ch[0]) {
const pcm = ch[0];
const int16 = new Int16Array(pcm.length);
for (let i = 0; i < pcm.length; i++) {
const s = Math.max(-1, Math.min(1, pcm[i]));
int16[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
}
this.port.postMessage(int16.buffer, [int16.buffer]);
}
return true;
}
}
registerProcessor('voice-pcm', VoiceProcessor);
`;
const workletBlob = new Blob([workletCode], { type: 'application/javascript' });
const workletUrl = URL.createObjectURL(workletBlob);
// Кнопка микрофона
const voiceBtn = document.createElement('div');
voiceBtn.innerHTML = '🎤<span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:36px;color:#e74c3c;font-weight:bold;">/</span>';
@ -1269,7 +1291,7 @@
voiceActive = false;
voiceBtn.innerHTML = '🎤<span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:36px;color:#e74c3c;font-weight:bold;">/</span>';
voiceBtn.style.background = '#555';
if (voiceRecorder) { voiceRecorder.stop(); voiceRecorder = null; }
if (voiceWorklet) { voiceWorklet.disconnect(); voiceWorklet = null; }
if (voiceStream) {
voiceStream.getTracks().forEach(t => t.stop());
voiceStream = null;
@ -1283,6 +1305,16 @@
try {
voiceStream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } });
audioCtx = new AudioContext({ sampleRate: 24000 });
if (audioCtx.state === 'suspended') await audioCtx.resume();
await audioCtx.audioWorklet.addModule(workletUrl);
const source = audioCtx.createMediaStreamSource(voiceStream);
voiceWorklet = new AudioWorkletNode(audioCtx, 'voice-pcm');
voiceWorklet.port.onmessage = (e) => {
if (!voiceActive || !voiceSocket || !voiceSocket.connected) return;
voiceSocket.emit('voice_data', e.data);
};
source.connect(voiceWorklet);
// Подключаемся к голосовому серверу
voiceSocket = io(VOICE_SERVER, { transports: ['websocket'] });
@ -1290,43 +1322,24 @@
voiceSocket.emit('voice_join', { world_id: worldId, x: player.x, y: player.y, name: playerName || 'Игрок' });
});
voiceSocket.on('voice_in', async (payload) => {
// Воспроизводим входящий голос (WebM/Opus or raw PCM)
voiceSocket.on('voice_in', (payload) => {
// Воспроизводим входящий голос — raw PCM int16
const { data, meta, volume } = payload;
if (!audioCtx || audioCtx.state === 'closed') {
audioCtx = new AudioContext({ sampleRate: 24000 });
}
if (audioCtx.state === 'suspended') await audioCtx.resume();
if (!audioCtx || audioCtx.state === 'closed') return;
try {
// Try WebM/Opus decode first (if server relayed MediaRecorder output)
const blob = new Blob([data], { type: 'audio/webm; codecs=opus' });
const arrayBuf = await blob.arrayBuffer();
const decoded = await audioCtx.decodeAudioData(arrayBuf);
const src = audioCtx.createBufferSource();
src.buffer = decoded;
const gain = audioCtx.createGain();
gain.gain.value = volume || 1;
src.connect(gain).connect(audioCtx.destination);
src.start();
} catch(_) {
// Fallback: raw PCM int16 → float32
try {
const int16 = new Int16Array(data);
const float32 = new Float32Array(int16.length);
for (let i = 0; i < int16.length; i++) {
float32[i] = int16[i] / (int16[i] < 0 ? 0x8000 : 0x7FFF);
float32[i] = int16[i] / (int16[i] < 0 ? 0x8000 : 0x7FFF) * (volume || 1);
}
const buf = audioCtx.createBuffer(1, float32.length, 24000);
buf.getChannelData(0).set(float32);
const src = audioCtx.createBufferSource();
src.buffer = buf;
const gain = audioCtx.createGain();
gain.gain.value = volume || 1;
gain.gain.value = 1;
src.connect(gain).connect(audioCtx.destination);
src.start();
} catch(e2) { /* ignore decode errors */ }
}
// Индикатор
speakingIndicator.style.display = 'block';
@ -1335,23 +1348,6 @@
speakingTimeout = setTimeout(() => { speakingIndicator.style.display = 'none'; }, 500);
});
// MediaRecorder — moderne API, works in all browsers without ScriptProcessor
const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
? 'audio/webm;codecs=opus' : 'audio/webm';
voiceRecorder = new MediaRecorder(voiceStream, {
mimeType,
audioBitsPerSecond: 16000
});
voiceRecorder.ondataavailable = (e) => {
if (!voiceActive || !voiceSocket || !voiceSocket.connected) return;
if (e.data.size > 0) {
e.data.arrayBuffer().then(buf => {
voiceSocket.emit('voice_data', buf);
});
}
};
voiceRecorder.start(100); // 100ms chunks for low latency
voiceActive = true;
voiceBtn.textContent = '🎤';
voiceBtn.style.background = '#2ecc71';

View File

@ -92,6 +92,6 @@
</div>
</div>
<script src="game.js?v=9"></script>
<script src="game.js?v=10"></script>
</body>
</html>