function ManualSpeechRecognition {
  const  = useState;
  const  = useState;
  const recognitionRef = useRef;
  useEffect => {
    // 这里就是那个让人头疼的兼容性检查
    const SR = .SpeechRecognition || 
               .webkitSpeechRecognition;
    if  return;
    const recognition = new SR;
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.lang = "zh-CN";
    recognition.onresult =  => {
      const result = event.results;
      setTranscript;
    };
    recognition.onend =  => setListening;
    recognitionRef.current = recognition;
    return  => recognition.abort;
  }, );
  const start =  => {
    recognitionRef.current?.start;
    setListening;
  };
  const stop =  => {
    recognitionRef.current?.stop;
    setListening;
  };
  return (
    

      
        {listening ? "停止" : "开始"}识别
      
      
{transcript}
    
  );
}

这段代码Neng跑，但就像一辆没有减震器的老爷车，到处dou是硬伤。它没有区分“中间结果”和“Zui终结果”。在语音交互中，isFinal 至关重要——用户说话时文字应该随着语流实时跳动，等用户停顿了才确定Zui终文本。Ru果忽略了这一点，你的界面就会显得迟钝，甚至让用户不知道什么时候该说话。此外错误处理也是一片空白，一旦网络波动或者用户拒绝了权限，整个组件就会陷入死寂，没有任何反馈。

为了解决这些原生API的“棱角”，我们Ke以使用封装好的Hook，比如 useSpeechRecognition。这不仅仅是少写几行代码的问题，而是将关注点彻底分离。你不需要再关心 webkit 前缀，也不需要手动去清理副作用。

import { useSpeechRecognition } from "@reactuses/core";
function VoiceNote {
  const { isSupported, isListening, isFinal, result, error, start, stop } =
    useSpeechRecognition({
      lang: "zh-CN",
      interimResults: true,
      continuous: true,
    });
  if  {
    return 
抱歉，你的浏览器似乎不太想听你说话。
  }
  return (
    

      
        {isListening ? "静音" : "开始口述"}
      
      

        {result || "请开始你的表演..."}
      
      {error && 
出错了：{error.error}
}
    
  );
}

kan到了吗？代码瞬间变得清爽了许多。我们拿到了 isFinal，就Ke以用不同的字体样式来区分正在说的话和Yi经确认的话。这种细节上的打磨，才是提升用户体验的关键。而且，错误处理变得异常简单，一个 error 状态就Neng搞定所有异常情况。

Ru果说语音识别是耳朵，那摄像头就是眼睛。但在Web世界里想要打开这双“眼睛”，你得先过“权限”这一关。浏览器出于安全考虑，对硬件设备的访问有着极其严格的限制。Ru果你贸然去调用摄像头，不仅会失败，还可Neng被用户直接拉黑。

hen多时候，用户的设备上不止一个摄像头或麦克风。我们需要让用户自己选择用哪个。这就用到了 navigator.mediaDevices.enumerateDevices。

这里有个hen有趣的“先有鸡还是先有蛋”的问题：在用户未授权之前，你虽然Neng枚举出设备，但拿不到它们的名称，只Nengkan到一串冷冰冰的ID。要想拿到像“FaceTime HD Camera”这样友好的名字，你必须先“骗”用户触发一次权限请求，比如调用一次 getUserMedia。

function ManualDeviceList {
  const  = useState;
  useEffect => {
    let mounted = true;
    const refresh = async  => {
      try {
        // 先请求一次流，为了拿到标签名
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: true,
        });
        // 立刻关闭流，避免摄像头灯一直亮着吓到用户
        stream.getTracks.forEach => t.stop);
        const list = await navigator.mediaDevices.enumerateDevices;
        if  setDevices;
      } catch  {
        console.error;
      }
    };
    refresh;
    // 监听设备插拔变化
    navigator.mediaDevices.addEventListener;
    return  => {
      mounted = false;
      navigator.mediaDevices.removeEventListener;
    };
  }, );
  return (
    

      {devices.map => (
        

          {d.kind}: {d.label || ""}
        
      ))}
    

  );
}

这种“请求-关闭-再枚举”的流程虽然有效，但写起来真的hen繁琐。而且别忘了处理 devicechange 事件，否则用户插拔了摄像头，你的界面还是老样子。

有时候，我们只是想知道用户有没有给过权限，而不想立刻弹窗去骚扰他。这就需要用到 Permissions API。这个API允许我们静默查询权限状态。

不过这个API也有点“脾气”。它不是所有浏览器dou完美支持，而且它的回调机制是基于事件的，不太符合React的声明式思维。我们需要把它包装成响应式的数据。

import { usePermission } from "@reactuses/core";
function MicStatusBadge {
  const state = usePermission;
  // 根据状态动态改变颜色，给用户直观的反馈
  const color =
    state === "granted"
      ? "#10b981" // 绿色
      : state === "denied"
      ? "#ef4444" // 红色
      : "#f59e0b"; // 黄色
  return (
    
      麦克风状态：{state || "未知"}
    
  );
}

通过这种方式，我们Ke以在界面上放一个小小的状态指示灯。Ru果用户去系统设置里把权限关了我们的组件Neng立刻感知到并变红，而不需要用户刷新页面。这种细腻的交互，往往Neng体现一个应用的成熟度。

有了语音识别Neng力，怎么设计交互也是个大学问。现在Zui流行的是“按住说话”模式，就像对讲机一样。这比点击“开始录音”再点“停止”要自然得多。

在Web端实现这个功Neng，坑也不少。你不Neng只监听 keydown 和 keyup。因为Ru果用户按住空格键不放，操作系统会触发“按键重复”事件，导致你的逻辑乱套。而且，Ru果用户按住键的时候切换了浏览器标签页，松开按键的事件你可Neng就收不到了录音就会一直卡在“正在录制”的状态。

这时候，我们需要利用 useKeyModifier 这样的Hook来追踪修饰键的状态。这比单纯监听按键事件要可靠得多，因为它直接反映了操作系统的底层状态。

import { useKeyModifier } from "@reactuses/core";
function ShiftToRecord({ onTalkStart, onTalkEnd }: {
  onTalkStart:  => void;
  onTalkEnd:  => void;
}) {
  const shift = useKeyModifier;
  useEffect => {
    if  onTalkStart;
    else onTalkEnd;
  }, );
  return (
    

      {shift ? "正在录音" : "按住 Shift 说话"}
    
  );
}

这种实现方式非常健壮。即使用户按住Shift键去切屏，再回来松开，React状态也Neng正确geng新，结束录音。

讲了这么多碎片化的知识点，现在让我们把它们像拼图一样拼起来。我们要构建一个功Neng完备的语音搜索组件。它包含以下特性：

设备选择：用户Ke以选择使用哪个麦克风。

权限感知：Ru果没有权限，引导用户授权；Ru果有权限，显示状态。

按住说话：按住Shift键开始识别，松开自动提交搜索。

实时反馈：说话时实时显示文字，区分临时结果和Zui终结果。

import { useEffect, useState } from "react";
import {
  useSpeechRecognition,
  useMediaDevices,
  usePermission,
  useKeyModifier,
} from "@reactuses/core";
function VoiceSearch {
  const  = useState;
  const  = useState;
  // 查询麦克风权限
  const micPermission = usePermission;
  // 获取并管理媒体设备
  const  = useMediaDevices({
    requestPermissions: false,
    constraints: { audio: true, video: false },
  });
  const microphones = devices.filter => d.kind === "audioinput");
  // 语音识别核心逻辑
  const {
    isSupported,
    isListening,
    isFinal,
    result,
    error,
    start,
    stop,
  } = useSpeechRecognition({
    lang: "zh-CN",
    interimResults: true,
    continuous: false,
  });
  // 监听 Shift 键状态
  const shiftDown = useKeyModifier;
  // 核心交互逻辑：Shift按下开始，松开停止
  useEffect => {
    if  return;
    if  {
      start;
    } else if  {
      stop;
    }
  }, );
  // 识别完成后将结果填入搜索框
  useEffect => {
    if  {
      setQuery;
    }
  }, );
  // 权限状态颜色映射
  const permissionColor =
    micPermission === "granted"
      ? "#10b981"
      : micPermission === "denied"
      ? "#ef4444"
      : "#f59e0b";
  return (
    

      

        智Neng语音搜索
        
          ● 麦克风：{micPermission || "未知"}
        
      {!isSupported && (
        

          哎呀，你的浏览器还不支持语音识别功Neng，换个Chrome试试？
        
      )}
      {isSupported && micPermission !== "granted" && (
        
          点击授权麦克风访问
        
      )}
      {isSupported && micPermission === "granted" && (
        <>
          

             setSelectedMic}
              style={{
                flex: 1,
                padding: "8px",
                borderRadius: "6px",
                border: "1px solid #cbd5e1",
              }}
           >
              默认麦克风
              {microphones.map => (
                
                  {mic.label || `麦克风 ${mic.deviceId.slice}...`}
                
              ))}
            
          
          

            

              {shiftDown ? "正在聆听..." : "按住 Shift 键开始说话"}
            
            {result && (
              

                {result}
              
            )}
          
          {error && (
            

              识别出错了：{error.error}
            
          )}
           setQuery}
            placeholder="搜索内容将显示在这里..."
            style={{
              width: "100%",
              marginTop: "24px",
              padding: "12px",
              borderRadius: "8px",
              border: "1px solid #cbd5e1",
              fontSize: "16px",
              boxSizing: "border-box",
            }}
          />
        
      )}
    
  );
}

kan，通过组合这几个kan似独立的Hook，我们构建了一个相当复杂的交互系统，而核心代码却依然保持了极高的可读性。这就是React Hooks的魅力所在——它让我们Neng够将复杂的底层逻辑封装成简单的乐高积木，然后随心所欲地搭建出我们想要的城堡。

当然实际生产环境中，你还需要考虑geng多细节。比如如何在没有真实硬件的环境下进行测试？这时候，Mock navigator 对象就显得尤为重要。又比如如何处理不同浏览器对Web Speech API的支持差异？也许你需要准备一个基于WebSockets的后端识别方案作为降级策略。

技术总是在不断进步，浏览器的Neng力也在日新月异。从简单的文本输入到多模态的语音、视觉交互，前端开发的边界正在不断被拓宽。希望这篇文章Neng为你打开一扇窗，让你kan到React在构建富交互应用时的无限可Neng。别再让那些繁琐的权限弹窗和原生API阻碍你的创造力了去动手试试吧，让你的应用真正“活”起来！