语音识别合成_javascript语音交互-js教程-PHP中文网

语音识别合成_javascript语音交互

紅蓮之龍

发布： 2025-11-28 06:35:10

原创

258人浏览过

网页端语音识别与合成主要通过Web Speech API实现，包含SpeechRecognition（语音转文字）和SpeechSynthesis（文字转语音）。首先创建SpeechRecognition实例并设置语言、监听onresult事件获取语音识别结果，调用start()开始识别；再通过SpeechSynthesisUtterance设置朗读内容及语速、音调等参数，调用speak()播放语音。两者结合可实现“你说一句，网页回一句”的交互效果，适用于语音助手、无障碍功能等场景。需注意仅支持HTTPS或本地开发环境，且Chrome支持较好，其他浏览器可能存在兼容性问题，建议在用户触发操作后启动以避免权限拦截。

语音识别合成_javascript语音交互

现在网页端实现语音识别和合成功能，主要依靠浏览器提供的 Web Speech API。这套 API 包含两个核心部分：SpeechRecognition（语音识别）用于将用户的语音转为文字；SpeechSynthesis（语音合成）则把文字转成语音朗读出来。下面分别介绍如何在 JavaScript 中使用它们来实现基础的语音交互功能。

语音识别：让网页听懂你说的话

SpeechRecognition 接口可以捕获麦克风输入并实时转换为文本。目前 Chrome 浏览器支持较好，其他浏览器可能需要前缀或暂不支持。

使用步骤如下：

创建一个 SpeechRecognition 实例，通常通过 webkitSpeechRecognition 兼容 Chrome
设置识别语言、是否连续识别等参数
监听 onresult 事件获取识别结果
调用 start() 方法开始识别，stop() 停止

示例代码：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置中文
recognition.continuous = false;

recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript;
  console.log('你说的是：', transcript);
  // 可在这里触发后续逻辑，比如自动回复
};

recognition.onerror = function(event) {
  console.error('识别出错：', event.error);
};

// 开始听写
recognition.start();

登录后复制

语音合成：让网页“开口说话”

SpeechSynthesis 是浏览器内置的文本朗读功能，兼容性良好，无需额外权限。

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

基本用法包括：

EasySub – AI字幕生成翻译工具

EasySub 是一款在线 AI 字幕生成器。它提供AI语音识别、AI字幕生成、AI字幕翻译，本来就很简单的视频剪辑。

查看详情

使用 window.speechSynthesis 获取语音合成实例
创建 SpeechSynthesisUtterance 对象表示要朗读的内容
可设置语速、音调、音量和发音语言
调用 speak() 方法播放语音

示例代码：

const utter = new SpeechSynthesisUtterance();
utter.text = '你好，我听到了你的声音';
utter.lang = 'zh-CN';
utter.rate = 1;   // 语速
utter.pitch = 1;  // 音调

window.speechSynthesis.speak(utter);

登录后复制