x-webkit-speech 语音输入功能
封面图
•
2025-11-07
•
Html/Css
195
0
0
0
`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> <input type="text" id="speechInput" /> <script> if ('speechRecognition' in window || 'webkitSpeechRecognition' in window) { const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.continuous = false; recognition.interimResults = false; 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 等)。 如需我帮你实现一个完整的语音输入页面或集成其他语音服务,请告诉我你的具体需求!
上一篇:
textarea的scrollHeight 自适应高度
下一篇:
WebApp之 apple-touch-icon
标题录入,一次不能超过6条
留言
评论