Web 前端多方言语音识别接入实战：从采集、增强到流式 ASR

// 1) 获取麦克风
const stream = await navigator.mediaDevices.getUserMedia({ audio: {
  channelCount: 1,
  sampleRate: 16000,
  noiseSuppression: false, // 若要完全自己控制预处理
  echoCancellation: false,
  autoGainControl: false
}});

// 2) AudioWorklet 初始化（需提前注册处理器）
const audioContext = new AudioContext({ sampleRate: 16000 });
const source = audioContext.createMediaStreamSource(stream);
await audioContext.audioWorklet.addModule('processor.js');
const node = new AudioWorkletNode(audioContext, 'frame-processor', { processorOptions: { frameSize: 320 } });
source.connect(node).connect(audioContext.destination);

// 3) 从 MessagePort 接收 20ms 帧（16kHz * 0.02 = 320 samples）
node.port.onmessage = (event) => {
  const float32Frame = event.data; // Float32Array
  // 进入预处理→编码→上传
};

function enhanceAudioQuality(float32) {
  const n = float32.length;
  const out = new Float32Array(n);

  // 1) 简单噪声门限（RMS）
  let sum2 = 0;
  for (let i = 0; i < n; i++) sum2 += float32[i] * float32[i];
  const rms = Math.sqrt(sum2 / n);
  const tooQuiet = rms < 0.01;

  // 2) 一阶高通，削弱低频轰鸣
  let prev = 0;
  const ALPHA = 0.85;
  for (let i = 0; i < n; i++) {
    const hp = ALPHA * ((out[i - 1] || 0) + float32[i] - prev);
    out[i] = tooQuiet ? float32[i] * 0.1 : hp;
    prev = float32[i];
  }

  // 3) 标准化到目标 RMS，并软限幅
  let sum2b = 0;
  for (let i = 0; i < n; i++) sum2b += out[i] * out[i];
  const newRms = Math.sqrt(sum2b / n) || 1;
  const target = 0.2;
  const gain = target / newRms;
  for (let i = 0; i < n; i++) {
    let v = out[i] * gain;
    if (v > 0.95) v = 0.95; if (v < -0.95) v = -0.95;
    out[i] = v;
  }
  return out;
}

function convertFloat32ToPCM16(float32) {
  const i16 = new Int16Array(float32.length);
  for (let i = 0; i < float32.length; i++) {
    const s = Math.max(-1, Math.min(1, float32[i]));
    i16[i] = s * 0x7FFF;
  }
  return i16.buffer;
}

function arrayBufferToBase64(buffer) {
  let binary = '';
  const bytes = new Uint8Array(buffer);
  for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);
  return btoa(binary);
}

function processAudioData(float32) {
  const pcm = convertFloat32ToPCM16(float32);
  return arrayBufferToBase64(pcm);
}

function makeAsrFrame(status, audioBase64, seq) {
  return {
    header: { app_id: 'YOUR_APP_ID', status },
    parameter: {
      iat: {
        language: 'zh_cn',
        accent: 'mulacc',      // 多方言识别
        domain: 'slm',
        eos: 1000,             // 静音判定 1s
        dwa: 'wpgs',           // 动态增量
        ptt: 1,                 // 自动标点
        nunum: 1,
        ltc: 1,
        result: { encoding: 'utf8', compress: 'raw', format: 'json' }
      }
    },
    payload: {
      audio: {
        encoding: 'raw', sample_rate: 16000, channels: 1, bit_depth: 16,
        status, seq, audio: audioBase64 || ''
      }
    }
  };
}

let ws, seq = 0, streaming = false;

async function openStream(wsUrl) {
  ws = new WebSocket(wsUrl);
  streaming = true; seq = 0;

  ws.onopen = () => {
    ws.send(JSON.stringify(makeAsrFrame(0, '', seq++)));
  };

  ws.onmessage = (evt) => {
    const msg = JSON.parse(evt.data);
    // TODO: 合并 wpgs 增量，渲染 UI
  };

  ws.onerror = console.error;
  ws.onclose = () => { streaming = false; };
}

function pushFrame(float32) {
  if (!streaming || ws.readyState !== 1) return;
  const enhanced = enhanceAudioQuality(float32);
  const b64 = processAudioData(enhanced);
  ws.send(JSON.stringify(makeAsrFrame(1, b64, seq++)));
}

function closeStream() {
  if (!ws) return;
  ws.readyState === 1 && ws.send(JSON.stringify(makeAsrFrame(2, '', seq++)));
  ws.close();
}

import CryptoJS from 'crypto-js';

function generateSignedWsUrl({ apiUrl, apiKey, apiSecret }) {
  const host = new URL(apiUrl).host;
  const date = new Date().toUTCString();
  const algorithm = 'hmac-sha256';
  const headers = 'host date request-line';
  const requestLine = 'GET /v1 HTTP/1.1';

  const signatureOrigin = `host: ${host}\ndate: ${date}\n${requestLine}`;
  const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);
  const signature = CryptoJS.enc.Base64.stringify(signatureSha);

  const authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
  const authorization = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(authorizationOrigin));

  return `${apiUrl}?authorization=${authorization}&date=${encodeURIComponent(date)}&host=${host}`;
}

function speakText(text, onEnd) {
  const synth = window.speechSynthesis; synth.cancel();
  const utt = new SpeechSynthesisUtterance(text);
  utt.lang = 'zh-CN';
  utt.rate = 1.0;
  const zh = synth.getVoices().find(v => v.lang.includes('zh'));
  if (zh) utt.voice = zh;
  if (typeof onEnd === 'function') utt.onend = onEnd;
  synth.speak(utt);
  return { stop: () => synth.cancel(), pause: () => synth.pause(), resume: () => synth.resume() };
}