当前位置：首页 > 行业动态 > 正文

html语音识别文字源码

admin
行业动态
2025-04-24
4638

HTML语音识别可通过Web Speech API实现，核心代码如下：创建SpeechRecognition实例，绑定result事件获取文本，用展示结果，需注意浏览器兼容性（Chrome/Firefox），移动端适配更佳，完整方案需配合权限申请及错误处理机制

通过HTML结合JavaScript实现浏览器端的语音识别功能，将用户语音转换为文字并显示在页面中，主要利用浏览器提供的SpeechRecognition接口（部分浏览器称为webkitSpeechRecognition）。

html语音识别文字源码第1张

实现原理

权限请求：需用户授权允许访问麦克风。
语音采集：通过SpeechRecognition接口捕获音频流。
语音转文字：将音频数据发送至浏览器内置服务进行识别。
结果展示：将识别后的文字动态显示在页面中。

代码结构

文件类型	内容说明
`index.html`	基础HTML结构，包含按钮和结果显示区域
`script.js`	JavaScript逻辑，处理语音识别核心功能

关键代码解析

HTML部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">语音识别示例</title>
</head>
<body>
  <button id="startBtn">开始语音识别</button>
  <div id="result" style="margin-top:20px;padding:10px;border:1px solid #ccc;">识别结果将显示在这里</div>
  <script src="script.js"></script>
</body>
</html>

JavaScript部分（`script.js`）

// 检查浏览器是否支持SpeechRecognition接口
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
  alert('您的浏览器不支持语音识别功能');
} else {
  const recognition = new SpeechRecognition(); // 创建识别实例
  recognition.lang = 'zh-CN'; // 设置语言为中文
  recognition.interimResults = true; // 开启实时反馈
  const startBtn = document.getElementById('startBtn');
  const resultDiv = document.getElementById('result');
  startBtn.addEventListener('click', () => {
    recognition.start(); // 开始识别
  });
  // 监听识别结果事件
  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript; // 获取最终识别结果
    resultDiv.textContent = `识别结果：${transcript}`;
  };
  // 监听错误事件
  recognition.onerror = (event) => {
    resultDiv.textContent = `错误：${event.error}`;
  };
  // 监听结束事件（用户停止或超时）
  recognition.onend = () => {
    resultDiv.textContent += '
（识别结束）';
  };
}

浏览器兼容性

浏览器	支持情况	备注
Chrome	支持	需HTTPS环境或localhost
Firefox	支持	需HTTPS环境或localhost
Safari	仅macOS支持	需启用实验功能
Edge	支持	需HTTPS环境或localhost
IE/旧版浏览器	不支持	无替代方案