当前位置：首页 > HTML

h5页面实现语音输入

2026-03-06 12:25:53HTML

实现语音输入的基本原理

H5页面通过浏览器提供的Web Speech API实现语音输入功能。该API包含语音识别（SpeechRecognition）和语音合成（SpeechSynthesis）两部分，语音输入主要依赖前者。现代浏览器如Chrome、Edge等已原生支持，无需额外插件。

浏览器兼容性检查

使用前需检测浏览器是否支持：

if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
  // 支持语音识别
} else {
  alert('当前浏览器不支持语音输入');
}

核心代码实现

初始化语音识别对象：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置语言为中文
recognition.interimResults = true; // 返回临时结果
recognition.maxAlternatives = 1; // 最大候选结果数

事件监听配置

绑定关键事件处理器：

recognition.onstart = () => {
  console.log('语音识别启动');
};

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  document.getElementById('input-field').value = transcript;
};

recognition.onerror = (event) => {
  console.error('识别错误:', event.error);
};

交互触发设计

通过按钮控制录音启停：

<button id="mic-button">按住说话</button>
<script>
  document.getElementById('mic-button').addEventListener('mousedown', () => {
    recognition.start();
  });

  document.getElementById('mic-button').addEventListener('mouseup', () => {
    recognition.stop();
  });
</script>

移动端适配要点

针对触摸设备需增加以下处理：

// 防止iOS页面滚动
document.getElementById('mic-button').addEventListener('touchstart', (e) => {
  e.preventDefault();
  recognition.start();
});

性能优化建议

设置连续识别模式：

recognition.continuous = true; // 持续监听
recognition.interimResults = true; // 实时返回中间结果

权限处理策略

首次使用需请求麦克风权限：

navigator.permissions.query({name:'microphone'}).then(result => {
  if (result.state === 'denied') {
    alert('请开启麦克风权限');
  }
});

错误处理方案

常见错误类型处理：

recognition.onerror = (event) => {
  const map = {
    'no-speech': '未检测到语音',
    'audio-capture': '麦克风不可用',
    'not-allowed': '用户拒绝授权'
  };
  alert(map[event.error] || '识别错误');
};

语言参数设置

支持多语言切换示例：

function setLanguage(lang) {
  recognition.lang = lang; // 如'en-US'或'ja-JP'
}

实际应用示例

完整组件化实现参考：

h5页面实现语音输入

<div class="voice-input">
  <input type="text" id="voice-text">
  <button class="mic-icon"></button>
</div>

<style>
  .mic-icon {
    background: url('mic.png') no-repeat;
    width: 24px;
    height: 24px;
  }
</style>