diff --git a/web-client/client.html b/web-client/client.html index a8d94fb..25dfad8 100644 --- a/web-client/client.html +++ b/web-client/client.html @@ -583,12 +583,11 @@ } } - // Визуализация на canvas — рисуем RMS от satellite с красивой анимацией - let satelliteRmsHistory = new Array(42).fill(0); // История RMS значений - let rmsSmoothed = 0; // Сглаженное значение + // Визуализация на canvas — RMS от satellite с оригинальной анимацией + let satelliteRmsHistory = new Array(42).fill(0); + let rmsSmoothed = 0; function drawSatelliteVisualization() { - if(!ctx) return; requestAnimationFrame(drawSatelliteVisualization); if(!isConnected) { @@ -601,25 +600,34 @@ return; } - // Добавляем текущее RMS в историю (сглаживание) - rmsSmoothed = rmsSmoothed * 0.7 + currentRms * 0.3; - satelliteRmsHistory.shift(); - satelliteRmsHistory.push(rmsSmoothed); + // Берём RMS от satellite вместо локального микрофона + let avg = currentRms * 100; // Конвертируем 0.0-1.0 в 0-100 - // Рисуем + // Сглаживание как в оригинале + rmsSmoothed = rmsSmoothed * 0.7 + avg * 0.3; + avg = rmsSmoothed; + + // Если satellite RMS недоступен – делаем «живую» симуляцию + if(avg < 1) { + avg = 12 + Math.random() * 25; + if(stateText.innerText.includes('LISTEN') || stateText.innerText.includes('SPEAK')) + avg = 45 + Math.random() * 55; + } + + // Отрисовка 42 неоновых столбцов (баров) ctx.clearRect(0,0,canvas.width, canvas.height); ctx.fillStyle = '#03151f'; ctx.fillRect(0,0,canvas.width, canvas.height); - const barWidth = (canvas.width / 42); + const barWidth = canvas.width / 42; + const numBars = 42; - for(let i=0; i<42; i++) { - const rms = satelliteRmsHistory[i]; - // Красивая анимация с синусом как в оригинале - let barHeight = (rms * canvas.height * 1.5 * (Math.sin(i * 0.5) + 1)/2 + 5) * (0.5 + (Math.random()*0.3)); + for(let i=0; i 0.3) barHeight = rms * canvas.height * 1.8 * (Math.sin(i*0.3)+1.2); + // Увеличиваем высоту если громко (как в оригинале) + if(stateText.innerText.includes('SPEAK')) + barHeight = avg * 1.6 * (Math.sin(i*0.3)+1.2); barHeight = Math.min(barHeight, canvas.height-10); const x = i * (barWidth+2);