Почему традиционный каскадный подход (STT ➔ LLM ➔ TTS) уступает Native Audio-to-Audio моделям?

В каскадном подходе задержки каждого звена суммируются (STT ~300мс + LLM TTFT ~600мс + TTS ~400мс = более 1.3 секунды), что делает естественный разговор невозможным. Кроме того, текст как промежуточный слой теряет акустическую модальность: тон, паузы, акцент, эмоциональную окраску и шепот. Native Audio-to-Audio модели принимают аудиотокены напрямую и отдают аудиосэмплы со сквозной задержкой менее 300 мс.

Что такое алгоритм Voice Activity Detection (VAD) и как он устроен?

VAD — это классификатор, определяющий наличие человеческой речи во входящем аудиофрейме. Простейший VAD основан на энергетическом пороге (RMS / Zero-Crossing Rate), но он чувствителен к шуму клавиатуры и фоновым звукам. Современный VAD (например, Silero VAD) использует сверточную нейросеть (CNN/RNN), скомпилированную в ONNX WebAssembly, которая с высокой точностью отличает речь от шума на 32-миллисекундных окнах аудио.

Как работает паттерн Barge-In в голосовом интерфейсе?

Barge-In — это механизм мгновенного прерывания речи ассистента человеком. Когда локальный VAD фиксирует начало речи пользователя в момент, когда модель воспроизводит ответ, клиент выполняет три действия: 1) мгновенно сбрасывает локальный аудиобуфер воспроизведения; 2) отправляет в сетевой сокет команду отмены генерации (response.cancel); 3) переводит UI в режим прослушивания.

Зачем нужен Jitter Buffer при потоковом воспроизведении PCM-звука?

Сетевые пакеты WebSocket/WebRTC приходят с переменной задержкой (джиттером). Если воспроизводить каждый чанк немедленно по приходу, неизбежно возникнут микропаузы (buffer underrun), проявляющиеся как щелчки звука. Jitter Buffer формирует небольшой временной буфер (40–80 мс), сглаживая колебания и передавая сэмплы в AudioContext строго по непрерывному расписанию (scheduledTime).

Почему для конвертации Float32 в PCM16 необходим AudioWorklet, а не ScriptProcessorNode?

ScriptProcessorNode выполнялся в Main Thread и конкурировал с рендерами React и сборщиком мусора V8. Любая задержка приводила к потере пакетов микрофона. AudioWorklet исполняется в отдельном real-time потоке ядра браузера, гарантируя расчет квантов без пропусков и отправляя готовые Int16Array через Structured Clone без блокировки интерфейса.

В чем разница между передачей сырого аудио через WebSocket и WebRTC Data Channel / Audio Track?

WebSocket работает поверх TCP: при потере пакета TCP принудительно повторяет передачу (retransmission) и блокирует последующие пакеты (Head-of-Line Blocking), что вызывает резкие задержки в нестабильных сетях. WebRTC оперирует поверх UDP: потерянные RTP-пакеты пропускаются или маскируются алгоритмами PLC (Packet Loss Concealment), сохраняя постоянную субсекундную задержку соединения.

Как работает аппаратное эхоподавление (Acoustic Echo Cancellation — AEC) на уровне ОС и браузера?

AEC строит адаптивную цифровую модель акустического пути от динамика к микрофону. Выходной сигнал, отправляемый на воспроизведение (Reference Signal), вычитается из входящего микрофонного сигнала с компенсацией временной задержки помещения. Это позволяет микрофону 'не слышать' голос самой модели, звучащий из динамиков, предотвращая ложные срабатывания VAD.

Голосовые AI-ассистенты в React: потоковый WebSocket/WebRTC звук, Voice Activity Detection (VAD) и Barge-in — React 19 Core & Архитектура

Архитектурная база#

Классическая архитектура голосовых ассистентов строилась по трехзвенной каскадной схеме: STT (Speech-to-Text) -> LLM -> TTS (Text-to-Speech). В таком конвейере суммарная задержка ответа складывается из транскрипции (200–500 мс), времени генерации первого токена языковой моделью (300–800 мс) и синтеза речи аудиогенератором (300–600 мс). Итоговая задержка (Time-to-First-Audio) составляет 1.5–3.0 секунды, что исключает возможность ведения естественного живого диалога.

Современные мультимодальные модели реального времени (OpenAI Realtime API, Gemini Multimodal Live) оперируют парадигмой Native Audio-to-Audio. Звуковой поток передается непрерывно в сыром представлении (PCM 16-бит, 16 кГц или 24 кГц моно). Модель принимает аудиотокены и генерирует ответные аудиосэмплы напрямую, сокращая задержку диалога до субсекундных значений (менее 300 мс), что приближается к физиологической скорости реакции человека.

text

┌─────────────────────────────────────────────────────────────────────────────┐
│                      CLIENT INGEST & VAD PIPELINE                           │
│                                                                             │
│  [ Microphone Stream ]                                                      │
│           │                                                                 │
│           ▼ (Web Audio API: 48kHz Float32)                                  │
│  [ AudioWorklet Processor (Dedicated Thread) ]                              │
│    - Downsampling: 48kHz ──► 24kHz / 16kHz                                  │
│    - Conversion: Float32 [-1.0, 1.0] ──► Int16 Linear PCM (Little Endian)   │
│           │                                                                 │
│           ▼ (PostMessage: 512 samples / 21.3ms chunks)                      │
│  [ Client-Side VAD (ONNX Runtime Web / Silero VAD) ]                        │
│    ├── Speech Detected? ──► Stream binary frames via WebSocket/WebRTC       │
│    └── [ Barge-In Trigger ] ──► Instant local playback flush!               │
└──────────────────────────────────────┬──────────────────────────────────────┘
                                       │ Real-time Bi-directional Stream
                                       ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                   AI BACKEND (OpenAI Realtime / Gemini Live)                │
│                                                                             │
│   Native Audio-to-Audio Neural Pipeline (Latency under 300ms)               │
│   - Receives client audio packets continuously                              │
│   - Emits delta audio frames (PCM 24kHz)                                    │
│   - Handles cancellation signal ("response.cancel")                         │
└──────────────────────────────────────┬──────────────────────────────────────┘
                                       │ Incoming Audio Chunks
                                       ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                      CLIENT PLAYBACK & JITTER BUFFER                        │
│                                                                             │
│  [ Jitter Buffer (Ring Buffer) ] ──► [ AudioWorklet Playback Engine ]       │
│  - Absorbs packet arrival latency variance                                  │
│  - Zero-latency cancellation upon user interruption (Barge-in)              │
│  - Output to Hardware Speakers (AEC Protected)                              │
└─────────────────────────────────────────────────────────────────────────────┘

Для реализации такого интерфейса в React необходимо решить две критические инженерные задачи:

Voice Activity Detection (VAD): Локальный или серверный классификатор, определяющий начало и завершение фразы человека.
Barge-in: Возможность перебить модель в любой момент времени. Без моментального прерывания пользователь вынужден дослушивать длинные ответы модели.

Ментальная модель#

Ментальная модель голосового AI-агента в React 19 базируется на симметричном дуплексном конвейере:

Входной тракт (Ingest Loop):
- Микрофон захватывается с обязательным включением аппаратного эхоподавления (echoCancellation: true). Без этого звук речи модели из динамиков вернется в микрофон и приведет к ложному срабатыванию прерывания (модель перебьет сама себя).
- AudioWorklet принимает 48 кГц аудио, понижает частоту до 24 кГц (или 16 кГц) и конвертирует нормализованные числа с плавающей точкой Float32Array в бинарный формат Int16Array (Linear PCM Little-Endian).
Нейросетевой VAD (Silero VAD в WebAssembly):
- Чанки по 512 сэмплов (32 мс) передаются в легковесную модель нейросети Silero VAD, исполняемую через ONNX Runtime Web.
- Модель возвращает вероятность речи от 0.0 до 1.0. При превышении порога (например, threshold = 0.5) активируется состояние isSpeaking.
Паттерн Barge-in:
- При переходе isSpeaking в true в момент, когда агент воспроизводит речь, клиентское приложение выполняет синхронный сброс:
  1. Локальный кольцевой буфер звука мгновенно очищается (playbackQueue.clear()).
  2. На сервер отправляется управляющее событие response.cancel.
  3. UI переключается в состояние «Пользователь говорит».
Выходной тракт и Jitter Buffer:
- Ответные чанки от сервера приходят неравномерно из-за сетевого джиттера интернет-пакетов. Для предотвращения щелчков используется Jitter Buffer.

Потоковый цикл двустороннего взаимодействия с голосовым AI

Захват микрофона с эхоподавлением (AEC)Шаг 1: Capture

Вызов getUserMedia с флагами echoCancellation: true и noiseSuppression: true для предотвращения акустической обратной связи.

Преобразование PCM в AudioWorkletШаг 2: Downsample

Понижение частоты дискретизации до 24 кГц и упаковка в 16-битный целочисленный формат Int16Array.

Детектирование активности речи (VAD)Шаг 3: VAD

Анализ порций звука по 512 сэмплов через нейросеть Silero VAD в среде ONNX Runtime Web.

Обработка прерывания (Barge-in)Шаг 4: Barge-in

При обнаружении речи во время ответа агента: моментальная очистка буфера вывода и отправка response.cancel.

Потоковое воспроизведение через Jitter BufferШаг 5: Playback

Прием ответных чанков, сглаживание сетевого джиттера и непрерывная подача звука в AudioContext destination.

Тест на понимание архитектуры#

ЧЕКПОИНТ #1

Проверка понимания: Механика предотвращения самопрерывания модели (AEC)

+15 XP

Разработчик создал голосового ассистента с локальным Silero VAD и функцией Barge-in. При тестировании в наушниках система работает идеально. Однако при воспроизведении через встроенные динамики ноутбука ассистент замолкает через 1 секунду после начала собственной речи, а система регистрирует ложное прерывание. В чем причина и как ее устранить?

На практике применяется#

1. Интеллектуальные операторы клиентской поддержки и консьерж-сервисы#

Голосовые консультанты банков и авиакомпаний, способные вести эмоциональный диалог в реальном времени, понимать спонтанные уточнения клиента и мгновенно замолкать при словах «Подождите» или «Нет, стоп».

2. Интерактивные тренажеры переговоров и симуляторы собеседований#

Платформы тренировки продаж и собеседований на английском языке: реалистичный собеседник со свободным темпом речи, перебиваниями и естественными паузами размышления.

3. Голосовое управление сложными интерфейсами без рук (Hands-Free CAD/BIM)#

Управление промышленными системами, медицинскими сканерами и 3D-моделями во время хирургических операций или полевого ремонта оборудования.

4. Синхронные аудиопереводчики речи в реальном времени#

Сквозной перевод речи докладчика на конференции с минимальной задержкой менее 300 мс и адаптацией под интонацию спикера.

Как это работает#

Сравнение каскадной архитектуры и Native Realtime Audio#

Сравнение подходов к голосовым AI-интерфейсам

Критерий	Каскадный стек (STT ➔ LLM ➔ TTS)	Native Audio-to-Audio (Realtime API)
Суммарная задержка (Time to First Audio)	Высокая: 1500–3000 мс (непригодно для естественного темпа)	Субсекундная: 200–350 мс (комфортный диалог реального времени)
Передача эмоций и интонации	Утрачивается: промежуточный текст лишен акустических нюансов	Сохраняется: модель слышит шепот, смех, дыхание и тон речи
Механика прерывания (Barge-In)	Тяжелая: отмена HTTP-запросов и сброс очередей синтеза	Нативная: протокольное событие отмены кадра (response.cancel)
Транспортный уровень	Множественные HTTP/REST и SSE-запросы	Единый постоянный WebSocket или WebRTC Data Channel

AudioWorklet: Захват PCM16 и понижение дискретизации#

Для захвата аудиопотока микрофона с конвертацией в PCM16 и частоту 24 кГц создается специализированный ворклет, работающий в аудиопотоке ядра:

typescript

// src/audio/pcm-recorder-processor.ts
export const pcmRecorderProcessorCode = `
class PcmRecorderProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.targetSampleRate = 24000;
    // Окно накопления сэмплов: 512 сэмплов = 21.3 мс при 24 кГц
    this.bufferSize = 512;
    this.outputBuffer = new Int16Array(this.bufferSize);
    this.outputIndex = 0;
  }

  process(inputs) {
    const input = inputs[0];
    if (!input || !input[0]) return true;

    const inputSamples = input[0];
    // Коэффициент прореживания (децимации) с 48 кГц до 24 кГц
    const decimationRatio = Math.round(sampleRate / this.targetSampleRate);

    for (let i = 0; i < inputSamples.length; i += decimationRatio) {
      const sample = Math.max(-1, Math.min(1, inputSamples[i]));
      // Преобразование Float32 [-1.0, 1.0] в Signed 16-bit Integer [-32768, 32767]
      const int16 = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;

      this.outputBuffer[this.outputIndex++] = int16;

      if (this.outputIndex >= this.bufferSize) {
        // Отправка бинарного фрейма в Main Thread через Structured Clone
        this.port.postMessage(this.outputBuffer.slice());
        this.outputIndex = 0;
      }
    }

    return true;
  }
}

registerProcessor('pcm-recorder-processor', PcmRecorderProcessor);
`;

Промышленный React 19 хук реального времени useVoiceAgent#

Production Artifactsrc/hooks/useVoiceAgent.ts

Комплексный хук управления голосовым ассистентом: захват PCM16 через AudioWorklet, локальный VAD, мгновенное прерывание Barge-in и Jitter Buffer.

typescript

'use client';

import { useState, useRef, useCallback, useEffect } from 'react';
import { pcmRecorderProcessorCode } from '../audio/pcm-recorder-processor';

export type AgentStatus = 'disconnected' | 'connecting' | 'listening' | 'thinking' | 'speaking';

export interface UseVoiceAgentOptions {
  websocketUrl: string;
  onTranscript?: (role: 'user' | 'assistant', text: string) => void;
}

export function useVoiceAgent({ websocketUrl, onTranscript }: UseVoiceAgentOptions) {
  const [status, setStatus] = useState<AgentStatus>('disconnected');
  const [isMuted, setIsMuted] = useState(false);

  // Ссылки на Web Audio API и сетевой сокет
  const audioContextRef = useRef<AudioContext | null>(null);
  const mediaStreamRef = useRef<MediaStream | null>(null);
  const workletNodeRef = useRef<AudioWorkletNode | null>(null);
  const wsRef = useRef<WebSocket | null>(null);

  // Очередь воспроизведения аудио (Jitter / Playback Buffer)
  const audioQueueRef = useRef<Float32Array[]>([]);
  const isPlayingRef = useRef<boolean>(false);
  const scheduledTimeRef = useRef<number>(0);

  // 1. Механизм мгновенного прерывания (Barge-In)
  const interruptAgent = useCallback(() => {
    // 1. Немедленная очистка локальной очереди сэмплов
    audioQueueRef.current = [];
    isPlayingRef.current = false;

    // 2. Отправка сигнала отмены генерации на сервер
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
      wsRef.current.send(JSON.stringify({ type: 'response.cancel' }));
    }

    setStatus('listening');
  }, []);

  // 2. Локальный легковесный алгоритм VAD по энергии сигнала (RMS)
  const processVadChunk = useCallback((pcmChunk: Int16Array) => {
    let sumSquares = 0;
    for (let i = 0; i < pcmChunk.length; i++) {
      const normalized = pcmChunk[i] / 32768.0;
      sumSquares += normalized * normalized;
    }
    const rms = Math.sqrt(sumSquares / pcmChunk.length);

    // Порог детекции речи (при необходимости заменяется на инференс Silero VAD)
    const SPEECH_THRESHOLD = 0.045;

    if (rms > SPEECH_THRESHOLD) {
      // Если агент в этот момент говорит -> срабатывает прерывание Barge-in!
      if (status === 'speaking' || isPlayingRef.current) {
        console.info('[VAD] Barge-in triggered by user speech!');
        interruptAgent();
      }
    }
  }, [status, interruptAgent]);

  // 3. Воспроизведение входящих аудиочанков от модели (24 кГц PCM)
  const enqueueAudioChunk = useCallback((float32Samples: Float32Array) => {
    const ctx = audioContextRef.current;
    if (!ctx) return;

    // Создаем аудио-буфер для порции
    const buffer = ctx.createBuffer(1, float32Samples.length, 24000);
    buffer.getChannelData(0).set(float32Samples);

    const source = ctx.createBufferSource();
    source.buffer = buffer;
    source.connect(ctx.destination);

    // Планирование точного времени воспроизведения (сглаживание джиттера)
    const currentTime = ctx.currentTime;
    if (scheduledTimeRef.current < currentTime) {
      // Буфер опустел: добавляем минимальный запас 40 мс для защиты от джиттера
      scheduledTimeRef.current = currentTime + 0.04;
    }

    source.start(scheduledTimeRef.current);
    scheduledTimeRef.current += buffer.duration;

    isPlayingRef.current = true;
    setStatus('speaking');

    source.onended = () => {
      if (ctx.currentTime >= scheduledTimeRef.current - 0.01) {
        isPlayingRef.current = false;
        setStatus('listening');
      }
    };
  }, []);

  // 4. Подключение и запуск сессии
  const connect = useCallback(async () => {
    try {
      setStatus('connecting');

      // Инициализация AudioContext
      const ctx = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)({
        sampleRate: 48000,
        latencyHint: 'interactive',
      });
      await ctx.resume();
      audioContextRef.current = ctx;

      // Регистрация ворклета захвата
      const blob = new Blob([pcmRecorderProcessorCode], { type: 'application/javascript' });
      const workletUrl = URL.createObjectURL(blob);
      await ctx.audioWorklet.addModule(workletUrl);
      URL.revokeObjectURL(workletUrl);

      // Захват микрофона со строгим аппаратным эхоподавлением (AEC)
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: {
          echoCancellation: true, // КРИТИЧНО для работы Barge-In!
          noiseSuppression: true,
          autoGainControl: true,
          channelCount: 1,
        },
      });
      mediaStreamRef.current = stream;

      const sourceNode = ctx.createMediaStreamSource(stream);
      const workletNode = new AudioWorkletNode(ctx, 'pcm-recorder-processor');
      workletNodeRef.current = workletNode;

      sourceNode.connect(workletNode);

      // Подключение по WebSocket
      const ws = new WebSocket(websocketUrl);
      wsRef.current = ws;
      ws.binaryType = 'arraybuffer';

      ws.onopen = () => {
        setStatus('listening');
        // Отправка стартовой конфигурации сессии (OpenAI/Gemini format)
        ws.send(JSON.stringify({
          type: 'session.update',
          session: {
            modalities: ['audio', 'text'],
            voice: 'alloy',
            input_audio_format: 'pcm16',
            output_audio_format: 'pcm16',
          },
        }));
      };

      ws.onmessage = (event) => {
        if (typeof event.data === 'string') {
          const message = JSON.parse(event.data);
          if (message.type === 'response.audio.delta' && message.delta) {
            // Декодирование Base64 PCM чанка в сэмплы Float32
            const binaryString = atob(message.delta);
            const len = binaryString.length;
            const bytes = new Uint8Array(len);
            for (let i = 0; i < len; i++) {
              bytes[i] = binaryString.charCodeAt(i);
            }
            const int16 = new Int16Array(bytes.buffer);
            const float32 = new Float32Array(int16.length);
            for (let i = 0; i < int16.length; i++) {
              float32[i] = int16[i] / 32768.0;
            }
            enqueueAudioChunk(float32);
          } else if (message.type === 'response.audio_transcript.delta') {
            onTranscript?.('assistant', message.delta);
          }
        }
      };

      ws.onerror = (e) => console.error('[VoiceAgent] WebSocket error:', e);
      ws.onclose = () => setStatus('disconnected');

      // Обработка чанков микрофона от ворклета
      workletNode.port.onmessage = (event) => {
        const pcmChunk: Int16Array = event.data;

        // Локальная проверка VAD на прерывание
        processVadChunk(pcmChunk);

        // Отправка в сеть
        if (ws.readyState === WebSocket.OPEN && !isMuted) {
          ws.send(pcmChunk.buffer);
        }
      };
    } catch (err) {
      console.error('[VoiceAgent] Connection failed:', err);
      setStatus('disconnected');
    }
  }, [websocketUrl, isMuted, onTranscript, processVadChunk, enqueueAudioChunk]);

  const disconnect = useCallback(() => {
    if (wsRef.current) {
      wsRef.current.close();
      wsRef.current = null;
    }
    if (mediaStreamRef.current) {
      mediaStreamRef.current.getTracks().forEach((t) => t.stop());
      mediaStreamRef.current = null;
    }
    if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
      audioContextRef.current.close();
      audioContextRef.current = null;
    }
    setStatus('disconnected');
  }, []);

  const toggleMute = useCallback(() => {
    setIsMuted((prev) => !prev);
  }, []);

  useEffect(() => {
    return () => {
      disconnect();
    };
  }, [disconnect]);

  return {
    status,
    isMuted,
    connect,
    disconnect,
    toggleMute,
    interruptAgent,
  };
}

Визуальный интерфейс голосового диалога в React 19#

Production Artifactsrc/components/VoiceAssistantDialog.tsx

Интерактивный интерфейс голосового агента со статусной анимацией активности и кнопкой мгновенного прерывания Barge-in.

tsx

'use client';

import * as React from 'react';
import { useVoiceAgent, AgentStatus } from '../hooks/useVoiceAgent';

export function VoiceAssistantDialog() {
  const [transcripts, setTranscripts] = React.useState<Array<{ role: string; text: string }>>([]);

  const handleTranscript = React.useCallback((role: 'user' | 'assistant', text: string) => {
    setTranscripts((prev) => {
      const last = prev[prev.length - 1];
      if (last && last.role === role) {
        return [...prev.slice(0, -1), { role, text: last.text + text }];
      }
      return [...prev, { role, text }];
    });
  }, []);

  const { status, isMuted, connect, disconnect, toggleMute, interruptAgent } = useVoiceAgent({
    websocketUrl: 'wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview',
    onTranscript: handleTranscript,
  });

  const getStatusColor = (s: AgentStatus) => {
    switch (s) {
      case 'listening': return 'border-accent-cyan bg-accent-cyan/10 text-accent-cyan';
      case 'speaking': return 'border-accent-violet bg-accent-violet/20 text-accent-violet animate-pulse';
      case 'thinking': return 'border-warning bg-warning/10 text-warning';
      case 'connecting': return 'border-border bg-bg-elevated text-text-muted';
      default: return 'border-border text-text-subtle';
    }
  };

  return (
    <div className="flex h-[520px] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-border bg-[#0a0a12] p-6 shadow-2xl">
      {/* Шапка со статусом агента */}
      <div className="flex items-center justify-between border-b border-border/50 pb-4">
        <div className="flex items-center gap-3">
          <span className={`rounded-full border px-3 py-0.5 text-xs font-mono font-bold uppercase tracking-wider ${getStatusColor(status)}`}>
            {status}
          </span>
          <span className="text-xs text-text-muted">PCM 24kHz • Silero VAD</span>
        </div>

        {status === 'speaking' && (
          <button
            onClick={interruptAgent}
            className="rounded-lg bg-danger/20 border border-danger/40 px-2.5 py-1 text-xs font-bold text-danger hover:bg-danger/30 transition-colors"
          >
            Прервать (Barge-in)
          </button>
        )}
      </div>

      {/* Центральная визуальная сфера активности */}
      <div className="flex flex-1 flex-col items-center justify-center py-6">
        <div
          className={`relative flex h-32 w-32 items-center justify-center rounded-full transition-all duration-300 ${
            status === 'speaking'
              ? 'scale-110 shadow-[0_0_50px_rgba(139,92,246,0.6)] bg-gradient-to-tr from-accent-violet to-purple-600'
              : status === 'listening'
              ? 'scale-100 shadow-[0_0_30px_rgba(0,240,255,0.4)] bg-gradient-to-tr from-accent-cyan to-blue-600'
              : 'scale-90 bg-white/5 border border-white/10'
          }`}
        >
          <div className="h-16 w-16 rounded-full bg-black/40 backdrop-blur-xs flex items-center justify-center">
            <span className="text-2xl">
              {status === 'speaking' ? '🗣️' : status === 'listening' ? '🎙️' : '💤'}
            </span>
          </div>
        </div>
        <p className="mt-4 text-xs font-mono text-text-muted">
          {status === 'listening' ? 'Слушаю... Вы можете перебить ассистента в любой момент' : ''}
          {status === 'speaking' ? 'Ассистент говорит...' : ''}
        </p>
      </div>

      {/* Нижняя панель действий */}
      <div className="flex items-center justify-center gap-4 pt-4 border-t border-border/50">
        {status === 'disconnected' ? (
          <button
            onClick={connect}
            className="rounded-xl bg-accent-cyan px-6 py-2.5 font-bold text-black text-sm hover:opacity-90 transition-opacity"
          >
            Начать разговор
          </button>
        ) : (
          <>
            <button
              onClick={toggleMute}
              className={`rounded-xl px-4 py-2 text-xs font-bold transition-colors ${
                isMuted ? 'bg-danger text-white' : 'bg-white/10 hover:bg-white/20 text-white'
              }`}
            >
              {isMuted ? 'Микрофон ВЫКЛ' : 'Заглушить'}
            </button>

            <button
              onClick={disconnect}
              className="rounded-xl bg-white/10 hover:bg-danger/20 border border-white/10 hover:border-danger/40 px-4 py-2 text-xs font-bold text-text-muted hover:text-danger transition-colors"
            >
              Завершить
            </button>
          </>
        )}
      </div>
    </div>
  );
}

Тест на краевые случаи и сетевой джиттер#

ЧЕКПОИНТ #2

Проверка понимания: Расчет времени воспроизведения (Scheduled Playback) и Jitter Buffer

+15 XP

При воспроизведении потокового PCM-звука от AI-модели звук воспроизводится с частыми щелчками (clicks / stuttering), хотя пропускной способности сети достаточно. Код воспроизведения вызывает ctx.createBufferSource().start() сразу в момент получения WebSocket-сообщения. В чем причина щелчков и каково решение?

Распространённые ошибки (Pitfalls)#

Ошибка: Ложные срабатывания Barge-In из-за отключенного эхоподавления (AEC)

Если микрофонный поток создан без { audio: { echoCancellation: true } }, звук ответа модели из колонок попадает обратно в микрофон, классификатор VAD ошибочно определяет человеческую речь, и ассистент мгновенно обрывает собственную фразу. Решение: Всегда явно задавайте echoCancellation: true в ограничениях getUserMedia.

Ошибка: Несоответствие порядка байтов (Endianness Mismatch) при формировании PCM16

Серверы OpenAI и Gemini ожидают поток Linear PCM 16-bit Little-Endian. Передача данных без учета порядка байтов в архитектурах или ручная манипуляция строками превращает звук в белый шум (статический треск). Решение: Используйте Int16Array поверх прямого ArrayBuffer, где Little-Endian является стандартом для браузеров на архитектурах x86 и ARM.

Ошибка: Выполнение нейросетевого инференса VAD в Main Thread

Запуск расчета весов ONNX Runtime в главном потоке интерфейса на каждые 32 мс звука блокирует React Fiber, вызывая просадку FPS страницы до 10 кадров и задержку кликов. Решение: Запускайте ONNX Runtime Web строго внутри Web Worker или WebAssembly потока.

Ошибка: Забытая отправка response.cancel на сервер при прерывании

Если при обнаружении речи пользователя клиент глушит звук локально, но не отправляет команду отмены на сервер, модель продолжает генерировать ответ впустую, расходуя дорогостоящие токены API и забивая сетевой сокет. Решение: При прерывании синхронно посылайте ws.send(JSON.stringify({ type: 'response.cancel' })).

На собеседовании спросят#

На собеседовании спросят7 вопросов

Резюме#

Native Audio-to-Audio модели (OpenAI Realtime, Gemini Live) сокращают задержку диалога до субсекундных значений (менее 300 мс), заменяя медленный каскад STT ➔ LLM ➔ TTS.
Захват микрофонного потока, понижение частоты до 24 кГц и конвертация в бинарный Int16 PCM изолируются в высокоприоритетном AudioWorklet.
Алгоритм Voice Activity Detection (VAD) детектирует речевую активность пользователя на окнах по 512 сэмплов (32 мс).
Паттерн Barge-in моментально глушит воспроизведение, очищает локальную очередь сэмплов и отправляет событие response.cancel на сервер при перебивании ассистента человеком.
Аппаратное эхоподавление echoCancellation: true критически необходимо для предотвращения самопрерывания модели собственным звуком из колонок.

Связанные темы

Web Audio API в React: создание графов AudioContext и кастомные ворклеты— Основы AudioContext, узлов и спектральных визуализаторов WebRTC в React: пиринговые соединения и интеграция с SFU— Передача потоков реального времени по протоколам UDP и SRTP Запись и обработка медиа в браузере: MediaRecorder и WebCodecs— Захват и аппаратное кодирование медиапотоков