惊了！浏览器居然自带语音API和流处理API！

在前端开发领域，开发者常依赖第三方库实现语音交互（如语音识别、合成）或流数据处理（如视频流、音频流传输）。然而，现代浏览器早已内置了强大的原生API——Web Speech API和Stream API，它们不仅性能优异，且无需额外依赖，彻底改变了前端开发的边界。本文将深入解析这两个API的核心功能、应用场景及最佳实践，助你快速掌握浏览器原生能力。

一、Web Speech API：语音交互的“原生武器”

Web Speech API由两部分组成：语音识别（SpeechRecognition）和语音合成（SpeechSynthesis），支持浏览器直接处理语音输入输出，无需调用后端服务。

1. 语音识别（SpeechRecognition）

核心功能：将用户语音实时转换为文本，支持多语言识别。
典型场景：语音搜索、语音输入、智能客服。
代码示例：

// 创建识别实例（Chrome/Edge使用webkit前缀）
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
// 配置参数
recognition.continuous = true; // 持续监听
recognition.interimResults = true; // 返回临时结果
recognition.lang = 'zh-CN'; // 中文识别
// 监听结果
recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0].transcript)
    .join('');
  console.log('识别结果:', transcript);
};
// 开始监听
recognition.start();

关键点：

• 兼容性：Chrome、Edge、Safari支持（需前缀），Firefox部分支持。
• 权限：首次调用需用户授权麦克风访问。
• 性能优化：通过maxAlternatives参数控制返回的候选结果数量，减少计算开销。

2. 语音合成（SpeechSynthesis）

核心功能：将文本转换为语音，支持自定义语速、音调、音色。
典型场景：无障碍阅读、语音播报、语音导航。
代码示例：

// 获取语音合成实例
const synthesis = window.speechSynthesis;
// 配置语音参数
const utterance = new SpeechSynthesisUtterance('你好，世界！');
utterance.lang = 'zh-CN';
utterance.rate = 1.0; // 语速（0.1~10）
utterance.pitch = 1.0; // 音调（0~2）
// 选择语音（浏览器内置语音列表）
const voices = synthesis.getVoices();
utterance.voice = voices.find(v => v.lang === 'zh-CN');
// 播放语音
synthesis.speak(utterance);

关键点：

• 语音库：通过getVoices()获取浏览器支持的语音列表，不同浏览器差异较大。
• 中断控制：调用synthesis.cancel()可立即停止播放。
• 事件监听：通过onstart、onend等事件实现播放状态管理。

二、Stream API：流式数据的“原生管道”

Stream API允许开发者直接处理浏览器中的流数据（如视频、音频、文件），支持分块传输和实时处理，极大提升了性能。

1. MediaStream API：媒体流的原生处理

核心功能：捕获摄像头、麦克风等媒体设备流，支持实时传输和自定义处理。
典型场景：视频通话、屏幕共享、实时滤镜。
代码示例：

// 获取摄像头流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.querySelector('video');
    video.srcObject = stream; // 直接绑定到video元素
    // 处理流数据（如应用滤镜）
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    video.addEventListener('play', () => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      setInterval(() => {
        ctx.drawImage(video, 0, 0);
        // 在此处添加滤镜逻辑（如灰度化）
      }, 1000 / 30); // 30FPS
    });
  })
  .catch(err => console.error('媒体设备访问失败:', err));

关键点：

• 权限控制：需用户授权摄像头/麦克风访问。
• 流复用：可通过MediaStreamTrack单独处理视频或音频轨道。
• WebRTC集成：结合RTCPeerConnection可实现点对点实时通信。

2. ReadableStream/WritableStream：通用流处理

核心功能：支持自定义读写流，适用于大文件分块上传、实时日志等场景。
典型场景：分块文件上传、实时数据推送。
代码示例：

// 创建可读流（模拟数据）
function createReadableStream() {
  const reader = new ReadableStream({
    start(controller) {
      let count = 0;
      const interval = setInterval(() => {
        controller.enqueue(`数据块 ${count++}\n`);
        if (count > 10) {
          clearInterval(interval);
          controller.close();
        }
      }, 100);
    }
  });
  return reader;
}
// 消费流数据
const stream = createReadableStream();
const reader = stream.getReader();
function consume() {
  reader.read().then(({ done, value }) => {
    if (done) return;
    console.log('接收到:', value);
    consume(); // 递归读取
  });
}
consume();

关键点：

• 背压控制：通过highWaterMark参数控制缓冲区大小，避免内存溢出。
• 管道操作：结合TransformStream可实现流数据转换（如压缩、加密）。
• Fetch集成：可通过fetch的body属性直接上传流数据。

三、实际应用：构建一个语音+流的实时应用

结合Web Speech API和Stream API，可快速实现一个实时语音转文字并上传的应用：

// 1. 初始化语音识别
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.continuous = true;
recognition.lang = 'zh-CN';
// 2. 创建可写流（模拟上传）
const writableStream = new WritableStream({
  write(chunk) {
    return new Promise(resolve => {
      // 实际场景中可替换为fetch上传
      console.log('上传数据:', new TextDecoder().decode(chunk));
      resolve();
    });
  }
});
// 3. 监听语音结果并分块上传
recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0].transcript)
    .join('');
  const encoder = new TextEncoder();
  const chunk = encoder.encode(transcript + '\n');
  const writer = writableStream.getWriter();
  writer.write(chunk).then(() => writer.close());
};
// 4. 启动识别
recognition.start();

优化建议：

• 错误处理：添加onerror事件监听，处理网络中断或识别失败。
• 性能监控：通过Performance API分析流传输延迟。
• 兼容性回退：检测API支持情况，提供备用方案（如WebSocket）。

四、总结与展望

浏览器原生的Web Speech API和Stream API为开发者提供了前所未有的能力：

• 语音交互：无需后端服务即可实现实时语音识别与合成。
• 流处理：直接操作媒体流和通用流，提升大数据处理效率。
• 跨平台：一套代码兼容多浏览器，降低开发成本。

未来，随着浏览器对AI和实时通信的支持进一步增强，这些API将成为构建智能应用（如语音助手、实时协作工具）的核心基础设施。建议开发者深入学习其高级特性（如语义分析、流压缩），以充分发挥潜力。