feat: WebSocket команды — раздельная громкость mic/snd + запись аудио + обновлённый web-client
- satellite.py: разделён _runtime_volume на _runtime_mic_volume и _runtime_snd_volume - satellite.py: добавлены команды start_recording/stop_recording (WAV через base64) - satellite.py: метод _create_wav_from_buffer() для создания WAV из буфера - web-client: добавлен слайдер громкости микрофона (MIC+/MIC-) - web-client: добавлены кнопки записи и воспроизведения аудио - web-client: улучшенный лог событий и отладочные console.log - docs: websocket-server-plan.md сокращён с 1205 до ~80 строк Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
Qwen-Coder
@@ -0,0 +1,255 @@
|
||||
// ------------------ WebSocket & State ------------------
|
||||
let ws = null;
|
||||
let isConnected = false;
|
||||
let currentVolume = 0.8;
|
||||
let mutedState = false;
|
||||
let haConnected = false;
|
||||
let rmsTimeout = null;
|
||||
let currentRms = 0;
|
||||
|
||||
const canvas = document.getElementById('audioCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
let canvasWidth = canvas.parentElement.clientWidth - 24;
|
||||
let canvasHeight = 80;
|
||||
canvas.width = canvasWidth;
|
||||
canvas.height = canvasHeight;
|
||||
|
||||
// DOM elements
|
||||
const statusLed = document.getElementById('statusLed');
|
||||
const statusLabel = document.getElementById('statusLabel');
|
||||
const connectBtn = document.getElementById('connectBtn');
|
||||
const orbCore = document.getElementById('orbCore');
|
||||
const stateText = document.getElementById('stateText');
|
||||
const volumeSlider = document.getElementById('volumeSlider');
|
||||
const volumeValueSpan = document.getElementById('volumeValue');
|
||||
const lastSttSpan = document.getElementById('lastStt');
|
||||
const lastTtsSpan = document.getElementById('lastTts');
|
||||
const mutedStatusSpan = document.getElementById('mutedStatus');
|
||||
const haStatusSpan = document.getElementById('haStatus');
|
||||
const liveVolSpan = document.getElementById('liveVol');
|
||||
const eventFeedDiv = document.getElementById('eventFeed');
|
||||
const rmsFill = document.getElementById('rmsFill');
|
||||
const rmsValueSpan = document.getElementById('rmsValue');
|
||||
|
||||
function addEventToLog(message) {
|
||||
const time = new Date().toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
const div = document.createElement('div');
|
||||
div.className = 'event-item';
|
||||
div.innerHTML = `<span style="color:#4effb5;">${time}</span> • ${message}`;
|
||||
eventFeedDiv.prepend(div);
|
||||
if (eventFeedDiv.children.length > 50) eventFeedDiv.removeChild(eventFeedDiv.lastChild);
|
||||
}
|
||||
|
||||
function updateRmsMeter(level) {
|
||||
if (!rmsFill || !rmsValueSpan) return;
|
||||
const percent = Math.min(100, Math.max(0, level * 100));
|
||||
rmsFill.style.width = percent + '%';
|
||||
rmsValueSpan.textContent = level.toFixed(2);
|
||||
clearTimeout(rmsTimeout);
|
||||
rmsTimeout = setTimeout(() => {
|
||||
if (rmsFill) rmsFill.style.width = '0%';
|
||||
if (rmsValueSpan) rmsValueSpan.textContent = '0.00';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function sendCommand(command, payload = {}) {
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
||||
addEventToLog(`❌ Cannot send: ${command} — not connected`);
|
||||
return;
|
||||
}
|
||||
const msg = JSON.stringify({ command, data: payload });
|
||||
ws.send(msg);
|
||||
addEventToLog(`📤 Command: ${command}`);
|
||||
}
|
||||
|
||||
function handleIncomingMessage(ev) {
|
||||
try {
|
||||
const json = JSON.parse(ev.data);
|
||||
const eventType = json.type || json.event;
|
||||
|
||||
if (eventType === 'audio-level' && json.data?.level !== undefined) {
|
||||
currentRms = json.data.level;
|
||||
updateRmsMeter(currentRms);
|
||||
} else if (eventType === 'voice-started') {
|
||||
stateText.innerText = 'Listening...';
|
||||
document.body.classList.add('listening-active');
|
||||
addEventToLog('🎤 Voice detected');
|
||||
} else if (eventType === 'voice-stopped') {
|
||||
stateText.innerText = 'Processing';
|
||||
document.body.classList.remove('listening-active');
|
||||
addEventToLog('💭 Processing speech');
|
||||
} else if (eventType === 'transcript' && json.data?.text) {
|
||||
lastSttSpan.innerText = json.data.text;
|
||||
addEventToLog(`🎤 "${json.data.text}"`);
|
||||
} else if (eventType === 'synthesize' && json.data?.text) {
|
||||
lastTtsSpan.innerText = json.data.text;
|
||||
} else if (eventType === 'audio-start') {
|
||||
stateText.innerText = 'Speaking';
|
||||
addEventToLog('🗣️ Assistant speaking');
|
||||
} else if (eventType === 'audio-stop' || eventType === 'played') {
|
||||
if (stateText.innerText === 'Speaking') stateText.innerText = 'Idle';
|
||||
addEventToLog('🔇 TTS finished');
|
||||
} else if (eventType === 'timer-started') {
|
||||
addEventToLog('⏱️ Timer started');
|
||||
} else if (eventType === 'timer-finished') {
|
||||
addEventToLog('⏰ Timer triggered!');
|
||||
stateText.innerText = 'Timer';
|
||||
} else if (eventType === 'satellite-connected') {
|
||||
haConnected = true;
|
||||
haStatusSpan.innerText = 'connected';
|
||||
addEventToLog('🔌 Satellite connected');
|
||||
} else if (eventType === 'satellite-disconnected') {
|
||||
haConnected = false;
|
||||
haStatusSpan.innerText = 'offline';
|
||||
addEventToLog('🔌 Satellite disconnected');
|
||||
} else if (eventType === 'error') {
|
||||
addEventToLog(`❌ Error: ${json.data?.message || 'unknown'}`);
|
||||
} else {
|
||||
addEventToLog(`📡 Event: ${eventType}`);
|
||||
}
|
||||
|
||||
if (json.data) {
|
||||
if (json.data.volume !== undefined) {
|
||||
currentVolume = json.data.volume;
|
||||
volumeSlider.value = currentVolume;
|
||||
volumeValueSpan.innerText = Math.round(currentVolume * 100) + '%';
|
||||
liveVolSpan.innerText = Math.round(currentVolume * 100) + '%';
|
||||
}
|
||||
if (json.data.muted !== undefined) {
|
||||
mutedState = json.data.muted;
|
||||
mutedStatusSpan.innerText = mutedState ? 'muted' : 'unmuted';
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
addEventToLog(`⚠️ Parse error: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Визуализация аудио (волны)
|
||||
let rmsSmoothed = 0;
|
||||
function drawVisualization() {
|
||||
requestAnimationFrame(drawVisualization);
|
||||
if (!isConnected) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#0a1222';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#0ff3';
|
||||
ctx.font = '10px monospace';
|
||||
ctx.fillText('⚡ idle', canvas.width - 50, 20);
|
||||
return;
|
||||
}
|
||||
let avg = 10 + (currentRms / 0.15) * 90;
|
||||
avg = Math.min(100, Math.max(10, avg));
|
||||
rmsSmoothed = rmsSmoothed * 0.7 + avg * 0.3;
|
||||
avg = rmsSmoothed;
|
||||
if (currentRms < 0.001) avg = 10 + Math.random() * 5;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#07121f';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const barWidth = canvas.width / 42;
|
||||
for (let i = 0; i < 42; i++) {
|
||||
let barHeight = (avg * (Math.sin(i * 0.5) + 1) / 2 + 5) * (0.5 + Math.random() * 0.3);
|
||||
if (stateText.innerText === 'Speaking') barHeight = avg * 1.6 * (Math.sin(i * 0.3) + 1.2);
|
||||
barHeight = Math.min(barHeight, canvas.height - 10);
|
||||
const x = i * (barWidth + 2);
|
||||
const grad = ctx.createLinearGradient(x, canvas.height - barHeight, x, canvas.height);
|
||||
grad.addColorStop(0, '#0ff');
|
||||
grad.addColorStop(1, '#a3f');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
|
||||
}
|
||||
}
|
||||
drawVisualization();
|
||||
|
||||
// WebSocket подключение
|
||||
function toggleConnection() {
|
||||
const url = document.getElementById('wsUrlInput').value.trim();
|
||||
if (!url) {
|
||||
addEventToLog('❌ Enter WebSocket URL');
|
||||
return;
|
||||
}
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.close();
|
||||
return;
|
||||
}
|
||||
ws = new WebSocket(url);
|
||||
ws.onopen = () => {
|
||||
isConnected = true;
|
||||
statusLed.classList.add('connected');
|
||||
statusLabel.innerText = 'connected';
|
||||
addEventToLog(`✅ Connected to ${url}`);
|
||||
stateText.innerText = 'Online';
|
||||
document.getElementById('connectBtn').innerHTML = '🔌 Disconnect';
|
||||
document.getElementById('connectBtnCard').innerHTML = 'Disconnect';
|
||||
};
|
||||
ws.onmessage = handleIncomingMessage;
|
||||
ws.onerror = () => addEventToLog(`⚠️ WebSocket error`);
|
||||
ws.onclose = () => {
|
||||
isConnected = false;
|
||||
statusLed.classList.remove('connected');
|
||||
statusLabel.innerText = 'disconnected';
|
||||
addEventToLog(`🔌 Disconnected`);
|
||||
stateText.innerText = 'Offline';
|
||||
document.body.classList.remove('listening-active');
|
||||
document.getElementById('connectBtn').innerHTML = '⟳ Connect';
|
||||
document.getElementById('connectBtnCard').innerHTML = 'Connect';
|
||||
};
|
||||
}
|
||||
|
||||
// Обработчики кнопок
|
||||
document.getElementById('connectBtn').addEventListener('click', toggleConnection);
|
||||
document.getElementById('connectBtnCard').addEventListener('click', toggleConnection);
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
addEventToLog('🤖 Nova Assistant ready');
|
||||
if (document.getElementById('autoConnect').checked) {
|
||||
setTimeout(() => toggleConnection(), 500);
|
||||
}
|
||||
// Адаптация canvas при изменении размера
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = canvas.parentElement.clientWidth - 24;
|
||||
canvas.height = 80;
|
||||
});
|
||||
});
|
||||
|
||||
// Команды
|
||||
document.getElementById('startListeningBtn').addEventListener('click', () => sendCommand('set_volume', { level: 1.0 }));
|
||||
document.getElementById('stopPipelineBtn').addEventListener('click', () => sendCommand('mute', {}));
|
||||
document.getElementById('stopTimerBtn').addEventListener('click', () => sendCommand('unmute', {}));
|
||||
document.getElementById('muteBtn').addEventListener('click', () => sendCommand('mute', {}));
|
||||
document.getElementById('unmuteBtn').addEventListener('click', () => sendCommand('unmute', {}));
|
||||
document.getElementById('volUpBtn').addEventListener('click', () => {
|
||||
let newVol = Math.min(1.0, currentVolume + 0.1);
|
||||
currentVolume = newVol;
|
||||
sendCommand('set_volume', { level: newVol });
|
||||
volumeSlider.value = newVol;
|
||||
volumeValueSpan.innerText = Math.round(newVol * 100) + '%';
|
||||
});
|
||||
document.getElementById('volDownBtn').addEventListener('click', () => {
|
||||
let newVol = Math.max(0.0, currentVolume - 0.1);
|
||||
currentVolume = newVol;
|
||||
sendCommand('set_volume', { level: newVol });
|
||||
volumeSlider.value = newVol;
|
||||
volumeValueSpan.innerText = Math.round(newVol * 100) + '%';
|
||||
});
|
||||
document.getElementById('requestRmsBtn').addEventListener('click', () => {
|
||||
sendCommand('trigger_event', { event_type: 'request_audio_level', data: {} });
|
||||
addEventToLog('📊 Requested RMS update');
|
||||
});
|
||||
document.getElementById('singlePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'single_press', data: {} }));
|
||||
document.getElementById('doublePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'double_press', data: {} }));
|
||||
document.getElementById('triplePressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'triple_press', data: {} }));
|
||||
document.getElementById('longPressBtn').addEventListener('click', () => sendCommand('trigger_event', { event_type: 'long_press', data: {} }));
|
||||
document.getElementById('clearEvents').addEventListener('click', () => {
|
||||
while (eventFeedDiv.children.length > 1) eventFeedDiv.removeChild(eventFeedDiv.lastChild);
|
||||
addEventToLog('🧹 Log cleared');
|
||||
});
|
||||
volumeSlider.addEventListener('input', (e) => {
|
||||
let val = parseFloat(e.target.value);
|
||||
currentVolume = val;
|
||||
volumeValueSpan.innerText = Math.round(val * 100) + '%';
|
||||
sendCommand('set_volume', { level: val });
|
||||
});
|
||||
Reference in New Issue
Block a user