html5怎么插入语音_HTML5语音识别API与音频录制实现-html教程-PHP中文网

html5怎么插入语音_HTML5语音识别API与音频录制实现

雪夜

发布： 2025-10-22 08:04:01

原创

406人浏览过

使用<audio>标签可插入语音播放，支持多格式兼容；2. Web Speech API实现语音识别，需HTTPS环境且推荐Chrome；3. MediaRecorder API用于音频录制，通过麦克风捕获并保存为Blob；4. 可整合二者功能，同步录音与转文本，注意权限与兼容性处理。

html5怎么插入语音_html5语音识别api与音频录制实现

要在HTML5中插入语音播放和实现语音识别与音频录制，需要分别使用<audio>标签、Web Speech API 和 MediaRecorder API。下面分步说明如何实现这些功能。

1. 插入语音播放（使用 <audio> 标签）

HTML5 提供了 <audio> 标签，用于在网页中嵌入音频文件，支持多种格式如 MP3、WAV、OGG。

示例代码：

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.wav" type="audio/wav">
  您的浏览器不支持 audio 标签。
</audio>

登录后复制

说明：

controls 属性显示播放、暂停、音量等控件。
提供多个 <source> 可提高浏览器兼容性。

2. 实现语音识别（Web Speech API）

HTML5 的 Web Speech API 支持语音识别，可将用户的语音转换为文本。目前主要在 Chrome 浏览器中支持较好。

立即学习“前端免费学习笔记（深入）”；

示例代码：

<button id="startBtn">开始录音</button>
<p id="result">识别结果将显示在这里</p>

<script>
const startBtn = document.getElementById('startBtn');
const result = document.getElementById('result');

// 检查浏览器是否支持 SpeechRecognition
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
  result.textContent = '您的浏览器不支持语音识别，请使用 Chrome 浏览器。';
} else {
  const recognition = new SpeechRecognition();
  recognition.lang = 'zh-CN'; // 设置中文识别
  recognition.interimResults = false;

  startBtn.addEventListener('click', () => {
    result.textContent = '正在聆听…';
    recognition.start();
  });

  recognition.addEventListener('result', (e) => {
    const transcript = e.results[0][0].transcript;
    result.textContent = '识别结果：' + transcript;
  });

  recognition.addEventListener('error', () => {
    result.textContent = '识别失败，请重试。';
  });
}
</script>

登录后复制

注意： 网站必须通过 HTTPS 协议运行，否则语音识别可能无法工作。

灵机语音

查看详情

3. 实现音频录制（MediaRecorder API）

使用 MediaRecorder API 可以录制用户麦克风输入的音频，并保存为 Blob 文件（如 WAV 或 MP3）。

示例代码：

<button id="recordBtn">开始录制</button>
<button id="stopBtn" disabled>停止录制</button>
<audio id="playback" controls style="display:none;"></audio>

<script>
let mediaRecorder;
let audioChunks = [];
const recordBtn = document.getElementById('recordBtn');
const stopBtn = document.getElementById('stopBtn');
const playback = document.getElementById('playback');

recordBtn.addEventListener('click', async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.start();
  recordBtn.disabled = true;
  stopBtn.disabled = false;

  mediaRecorder.addEventListener('dataavailable', event => {
    audioChunks.push(event.data);
  });

  mediaRecorder.addEventListener('stop', () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
    const audioUrl = URL.createObjectURL(audioBlob);
    playback.src = audioUrl;
    playback.style.display = 'block';
    audioChunks = []; // 清空缓存

    // 可选：上传到服务器
    // const formData = new FormData();
    // formData.append('audio', audioBlob, 'recording.wav');
  });
});

stopBtn.addEventListener('click', () => {
  mediaRecorder.stop();
  recordBtn.disabled = false;
  stopBtn.disabled = true;

  // 停止所有音轨以关闭麦克风
  mediaRecorder.stream.getTracks().forEach(track => track.stop());
});
</script>

登录后复制

说明：

navigator.mediaDevices.getUserMedia() 请求麦克风权限。
MediaRecorder 将音频流分段保存为 Blob。
最终生成可播放的音频 URL。

4. 完整功能整合建议

你可以将语音识别与音频录制结合使用：

用 MediaRecorder 录制原始音频用于保存或上传。
同时使用 SpeechRecognition 实时转文字，提升交互体验。
注意处理用户权限请求（麦克风访问）和浏览器兼容性问题。

基本上就这些。实现语音功能时，关键是确保协议安全（HTTPS）、处理好用户交互和错误反馈。不复杂但容易忽略细节。

以上就是html5怎么插入语音_HTML5语音识别API与音频录制实现的详细内容，更多请关注php中文网其它相关文章！