x-webkit-speech 语音输入功能

封面图 • 2025-11-07 • Html/Css

`x-webkit-speech` 是一个非标准的 HTML 属性，主要用于在 Web 浏览器中启用语音输入功能。它最初是为基于 WebKit 的浏览器（如 Chrome 和 Safari）设计的，用于在 `<input>` 或 `<textarea>` 元素中添加语音识别功能。

### 一、基本用法

```html
<input type="text" x-webkit-speech />
```

或者对于多行文本：

```html
<textarea x-webkit-speech></textarea>
```

### 二、工作原理

当用户点击该输入框时，浏览器会弹出一个语音识别界面，允许用户通过麦克风说话，系统会将语音内容转换为文字并自动填写到输入框中。

> ⚠️ 注意：`x-webkit-speech` 是 **非标准属性**，仅在部分浏览器中有效，尤其是旧版的 Chrome 和 Safari。

---

### 三、兼容性

| 浏览器 | 支持情况 |
|--------|----------|
| Chrome | ✅ 支持（旧版本） |
| Firefox | ❌ 不支持 |
| Safari | ✅ 支持（旧版本） |
| Edge | ❌ 不支持 |
| Opera | ❌ 不支持 |

> 现代浏览器已经逐渐弃用了 `x-webkit-speech`，推荐使用更标准的 [Web Speech API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API) 来实现语音识别功能。

---

### 四、替代方案：Web Speech API

如果你希望在现代浏览器中实现语音输入功能，可以使用 Web Speech API：

#### 示例代码：

```html
<!DOCTYPE html>
<html>
<head>
  <title>Speech Recognition</title>
</head>
<body>

const input = document.getElementById('speechInput');

recognition.onresult = function(event) {
      input.value = event.results[0][0].transcript;
    };

recognition.onerror = function(event) {
      console.error('Speech recognition error: ' + event.error);
    };

// 触发语音识别
    input.addEventListener('click', () => {
      recognition.start();
    });
  } else {
    alert('您的浏览器不支持语音识别功能。');
  }
</script>

</body>
</html>
```

---

### 五、总结

- `x-webkit-speech` 是一个过时的属性，仅适用于旧版浏览器。
- 推荐使用 **Web Speech API** 实现跨浏览器的语音识别功能。
- 如果你需要支持移动端语音输入，建议使用 Web Speech API 或第三方语音识别库（如 Google Cloud Speech-to-Text、Azure Speech Services 等）。

如需我帮你实现一个完整的语音输入页面或集成其他语音服务，请告诉我你的具体需求！