HTML5为输入框添加语音输入功能

封面图 • 2025-09-19 • HTML5

在 HTML5 中，可以通过 `<input>` 或 `<textarea>` 元素的 `webkitSpeechRecognition` API 来实现语音输入功能。这个功能是基于 Web Speech API 的一部分，目前主要支持 Chrome 浏览器（包括 Edge 和其他基于 Chromium 的浏览器）。

下面是一个简单的示例，展示如何为输入框添加语音输入功能：

---

### ✅ 示例代码

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>语音输入示例</title>
</head>
<body>

<h2>语音输入示例</h2>

recognition.onresult = function (event) {
          const transcript = event.results[0][0].transcript;
          document.getElementById('speechInput').value = transcript;
        };

recognition.onerror = function (event) {
          alert('语音识别出错: ' + event.error);
        };

recognition.onend = function () {
          console.log('语音识别结束');
        };

recognition.start();
      } else {
        alert('您的浏览器不支持语音识别功能！');
      }
    }
  </script>

</body>
</html>
```

---

### 📝 功能说明

- `webkitSpeechRecognition` 是 Web Speech API 的一部分，用于语音识别。
- `recognition.lang = 'zh-CN'` 设置为中文（简体）。
- `onresult` 事件会在用户说完话后触发，并将语音内容转换为文本。
- `start()` 启动语音识别。
- 注意：部分浏览器可能需要用户主动点击按钮来启动语音识别（如 Chrome 需要用户交互）。

---

### ⚠️ 注意事项

- **浏览器兼容性**：目前仅支持 Chrome、Edge 等基于 Chromium 的浏览器，Safari 支持有限。
- **权限问题**：使用麦克风前，浏览器会提示用户授权。
- **语言支持**：不同语言需要设置不同的 `lang` 值，例如：
  - `en-US`（英语）
  - `ja-JP`（日语）
  - `es-ES`（西班牙语）

---

如果你希望更高级的功能（如实时语音转文字、语音控制等），可以考虑使用第三方语音识别服务（如 Google Cloud Speech-to-Text、Azure Speech Services 等）。

是否需要我帮你扩展成一个带有麦克风图标和更友好界面的版本？