如何使用jQuery结合Web Speech API实现语音识别搜索输入框？

语音识别搜索框不一定需要依赖云服务。浏览器提供的 Web Speech API 可以在本地完成语音转文字，只要页面运行在安全上下文里，用户点击麦克风授权后，JavaScript 就能持续收到识别结果。本文使用 jQuery 处理 DOM 和事件，所有代码都可以直接嵌入现有页面，适合已有 jQuery 的旧项目快速改造。

SpeechRecognition 对象与浏览器要求

Web Speech API 的语音识别接口主要由 SpeechRecognition 构造函数提供，Chrome 和 Edge 使用标准名称，部分旧版 Chrome 需要带 webkit 前缀，所以在脚本里通常用 window.SpeechRecognition || window.webkitSpeechRecognition 做兼容。识别对象创建后需要设置语言，中文使用 zh-CN；如果希望同时识别中文和英文，可以设置 recognition.lang = 'zh-CN'; 并打开连续识别，但连续识别会不断触发 onresult，反而可能覆盖用户手动输入，所以搜索框场景更适合单次识别。

浏览器安全策略要求页面必须通过 HTTPS 或 localhost 访问，否则 navigator.mediaDevices 未定义或语音识别无法启动。这是很多开发者第一次测试失败的主要原因。file 协议打开本地 HTML 基本不可用，需要起一个本地静态服务器，例如使用 npx http-server 或 VS Code 的 Live Server。用户首次点击麦克风时浏览器会弹出权限请求，如果拒绝，后续都无法再启动，直到用户在站点设置中手动允许。

页面结构与 jQuery 事件绑定

页面结构很简单，一个 <input> 搜索框和一个 <button> 麦克风按钮。按钮不需要放在表单外，但为了避免点击按钮时直接提交表单，需要设置 type="button"。jQuery 的 $(function(){}) 在 DOM 加载后执行，先获取输入框和按钮引用。这里用 const 保存 jQuery 对象，比反复调用 $ 更高效。

事件绑定使用 voiceBtn.on('click', function(){...})。在点击回调中用 isListening 变量记录当前状态：如果正在收音，再次点击就调用 recognition.stop() 主动结束；如果未启动，则调用 recognition.start()。需要注意 start 方法在已经启动时会抛异常，所以用 try...catch 包裹。启动后把按钮文字改成收听中，并添加 listening 类，让用户明确知道麦克风在工作。这样即使用户不熟悉语音输入，也能根据按钮状态判断是否正在收音。

识别结果处理与自动搜索

SpeechRecognition 的 onresult 事件在识别到新内容时触发，event.results 是一个类似数组的对象，每个结果包含多个候选。最常用的写法是从 event.resultIndex 开始遍历，累加每个结果的第 0 个候选文本。当 interimResults 设为 true 时，中间结果和最终结果都会进入 onresult，中间结果的 isFinal 为 false，文本会不断更新。直接把这些文本写入搜索框，可以实现边说边显示的体验，但它会覆盖用户之前手动输入的内容。解决方式是先检查当前输入框是否处于语音输入状态，或者只在 isListening 为 true 时才写入，用户在收音过程中一般不会手动编辑。

识别结束后会触发 onend 事件，在这里重置按钮状态，并判断输入框是否有内容。如果用户已经说出了搜索词，就自动触发表单提交。这样可以实现从语音到搜索的完整闭环。需要注意，onend 在 recognition.stop() 和识别自动结束后都会触发，如果直接在 onend 中调用 start 会形成循环，所以在不需要连续收音时不要自动重启。如果希望在提交前给用户短暂确认时间，可以把自动提交改成聚焦输入框并选中文本，但搜索场景通常直接提交体验更顺畅。

兼容性与体验优化

目前 Web Speech API 在 Chrome、Edge 和 Safari 上的支持情况并不一致。Chrome 桌面版和 Android 版支持较好，Edge 使用 Chromium 内核也基本一致；Safari 对 SpeechRecognition 的支持从较新版本才开始，而且移动端 Safari 仍可能存在不兼容，需要在代码里做特性检测。检测不到 SpeechRecognition 时，应该禁用按钮并显示不支持语音的文案，同时保留传统输入搜索，不能影响原有功能。

体验优化还体现在权限错误处理上。onerror 事件的 event.error 可能返回 not-allowed、no-speech、audio-capture 等值。not-allowed 表示用户拒绝了麦克风权限，此时直接提示用户去浏览器设置里修改；no-speech 表示没有检测到语音，可以提示用户再试一次或检查麦克风是否被其他程序占用。另一个细节是中文识别在噪音环境下准确率会下降，可以设置 recognition.continuous = false 让每次点击只识别一段话，识别更稳定。对于移动端，按钮的点击区域要足够大，至少 44x44 像素，并添加 touch 事件避免 300ms 延迟，这些用 jQuery 都很容易实现。

完整代码示例

以下是一个可以直接运行的页面结构，包含搜索框、按钮和一个表单容器。

<div class="voice-search">
  <input type="text" id="searchInput" placeholder="输入关键词或点击麦克风">
  <button type="button" id="voiceBtn">语音</button>
</div>

按钮状态可以用简单 CSS 区分默认和收音中两种样式。

.voice-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#voiceBtn {
  min-width: 56px;
  min-height: 44px;
  cursor: pointer;
}
#voiceBtn.listening {
  background-color: #f0ad4e;
  color: #fff;
}

下面是完整的 jQuery 交互逻辑，从创建识别对象到处理结果、重置状态都包含在内。

$(function () {
  const searchInput = $('#searchInput');
  const voiceBtn = $('#voiceBtn');
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

  if (!SpeechRecognition) {
    voiceBtn.prop('disabled', true).text('不支持语音');
    return;
  }

  const recognition = new SpeechRecognition();
  recognition.lang = 'zh-CN';
  recognition.interimResults = true;
  recognition.maxAlternatives = 1;

  let isListening = false;

  voiceBtn.on('click', function () {
    if (isListening) {
      recognition.stop();
      return;
    }

    try {
      recognition.start();
      isListening = true;
      voiceBtn.addClass('listening').text('收听中...');
    } catch (error) {
      alert('启动语音识别失败：' + error.message);
    }
  });

  recognition.onstart = function () {
    searchInput.attr('placeholder', '请说话，正在识别...');
  };

  recognition.onresult = function (event) {
    let transcript = '';
    for (let i = event.resultIndex; i < event.results.length; i++) {
      transcript += event.results[i][0].transcript;
    }
    searchInput.val(transcript);
  };

  recognition.onerror = function (event) {
    console.error('语音识别错误：', event.error);
    if (event.error === 'not-allowed') {
      alert('麦克风权限被拒绝，请在浏览器设置中允许访问。');
    }
    resetState();
  };

  recognition.onend = function () {
    resetState();
    if (searchInput.val()) {
      searchInput.closest('form').trigger('submit');
    }
  };

  function resetState() {
    isListening = false;
    voiceBtn.removeClass('listening').text('语音');
    searchInput.attr('placeholder', '输入关键词或点击麦克风');
  }
});

把以上代码放入已有 jQuery 页面，并确保通过 localhost 或 HTTPS 访问，就可以得到一个可用的语音搜索输入框。识别过程中按钮会变为收听中，用户说完后内容会自动回填并提交搜索表单。如果项目需要兼容更多浏览器，可以在此基础上增加降级提示，让不支持语音识别的用户继续使用传统键盘输入。

Web Speech APIjQuery语音识别搜索修改时间：2026-09-21 20:48:31