HTML怎么做语音输入功能_html语音识别转文字输入功能【基础】-html教程-PHP中文网

浏览器原生不支持HTML元素直接通过speech属性启用语音识别，必须使用JavaScript的SpeechRecognition API手动实现；input和textarea需绑定onresult事件并将transcript写入value，且受限于HTTPS、权限、浏览器兼容性等硬性条件。

html怎么做语音输入功能_html语音识别转文字输入功能【基础】

浏览器原生支持语音输入，但不是所有 HTML 元素都能直接开启语音识别 —— input 和 textarea 必须配合 JavaScript 的 SpeechRecognition（或 webkitSpeechRecognition）才能实现转文字，HTML 本身没有 speech="true" 这类属性。

为什么 `input` 加 `speech` 属性没反应

早期 Chromium 曾实验性支持 input type="text" x-webkit-speech，但该属性早在 2017 年就被移除，现在所有主流浏览器（Chrome、Edge、Firefox、Safari）都不识别它。试图写 <input speech> 或 <input x-webkit-speech> 不会报错，但也不会触发任何语音功能 —— 它只是个被忽略的无效属性。

真正起作用的是 JavaScript 接口：SpeechRecognition，它和表单控件是解耦的：你得手动把识别出的文本塞进 input 或 textarea 的 value 里。

怎么用 `webkitSpeechRecognition` 绑定到 `textarea`

核心是监听 onresult 事件，并把结果写入目标元素。注意必须在用户交互（如点击按钮）后首次调用 start()，否则会被浏览器静默拒绝（尤其在非 HTTPS 环境或 iOS Safari 中）。

先检测接口是否存在：'webkitSpeechRecognition' in window || 'SpeechRecognition' in window
创建实例时要兼容前缀：const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
interimresults: true 才能拿到实时流式文本（比如边说“今天天气”边显示），否则只在说完停顿后返回最终结果
处理 event.results 要小心：它是个类似数组的对象，每个 event.results[i] 是一个 SpeechRecognitionResult，而 result[0].transcript 才是识别出的字符串

简短示例：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

const textarea = document.getElementById('my-textarea');
const btn = document.getElementById('voice-btn');
<p>const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new Recognition();</p><p>recognition.lang = 'zh-cn';
recognition.interimresults = true;
recognition.continuous = false; // 单次识别，说完自动停</p><p>recognition.onresult = (event) => {
const result = event.results[event.results.length - 1][0].transcript;
if (event.results[event.results.length - 1].isFinal) {
textarea.value += result + ' ';
} else {
textarea.value = textarea.value.replace(/[^]*$/, result); // 只更新最后一段临时文本
}
};</p><p>btn.addEventListener('click', () => recognition.start());</p>

常见错误和兼容性坑点

这些不是“配置不对”，而是直接导致功能完全失效的硬性限制：

SpeechRecognition 在 HTTP 环境下彻底不可用（Chrome 120+ 强制要求 HTTPS 或 localhost）
iOS Safari 完全不支持该 API（截至 2026 年 5 月仍无计划支持）
Firefox 支持 SpeechRecognition，但默认禁用；需手动在 about:config 中启用 media.webspeech.recognition.enable
用户第一次使用时，浏览器会弹麦克风权限提示；如果用户点“禁止”，后续调用 start() 会触发 onerror 且 event.error === 'not-allowed'，不会重试
continuous: true 时，若用户长时间沉默，Chrome 会在约 15 秒后自动 onend，需手动再调 start() 才能继续