讲师中心 微信公众号
AI工具推荐 视频效率加速

Javascript如何实现语音合成_如何让浏览器说话?

陌枫君_7147

陌枫君_7147

发布时间:2025-12-18 23:11:02

|

351人浏览过

|

来源于php中文网

原创

JavaScript语音合成基于Web Speech API的SpeechSynthesis接口,支持离线使用;需检测兼容性、监听voiceschanged事件获取音色列表,再创建并配置SpeechSynthesisUtterance实例,通过speak()等方法控制播放,且必须由用户交互触发。

javascript如何实现语音合成_如何让浏览器说话?

JavaScript 实现语音合成,核心是使用浏览器原生的 Web Speech API 中的 SpeechSynthesis 接口。它无需第三方库、不依赖网络(离线可用),只要浏览器支持(Chrome、Edge、Safari 17.4+、Firefox 部分支持),就能让网页“说话”。

检查并获取语音合成实例

SpeechSynthesis 是一个单例对象,通过 window.speechSynthesis 访问。使用前建议先确认兼容性:

  • 检测是否支持:if ('speechSynthesis' in window)
  • 获取实例:const synth = window.speechSynthesis;
  • 可监听准备就绪事件:synth.onvoiceschanged = () => { console.log(synth.getVoices()); };(注意:首次调用 getVoices() 可能为空,需等事件触发后才返回可用音色列表)

选择语音、设置语速/音调/音量

不同系统和浏览器预装的语音不同(如中文常用 “Microsoft Yaoyao”、“Tingting”、“Xiaoyi”)。你需要手动匹配语言和 voiceName:

Android Adb Skill
Android Adb Skill

Android 开发调试技能,通过系统 ADB 工具操作 Android 设备。以下场景必须触发此技能:(1) 直接 ADB 操作——安装 APK、查看设备列表、抓取 logcat 日志、查看已安装应用、清除应用数据、截图、重启设备、拉取/推送文件、查看 CPU/内存/电池信息、adb shell 操作;(2)...

下载
  • 列出所有语音:const voices = synth.getVoices();
  • 筛选中文语音示例:const cnVoice = voices.find(v => v.lang.includes('zh') || v.name.includes('Yaoyao') || v.name.includes('Xiaoyi'));
  • 创建语音内容:const utterance = new SpeechSynthesisUtterance('你好,我在用浏览器说话');
  • 配置参数:utterance.voice = cnVoice; utterance.rate = 1.0; utterance.pitch = 1.2; utterance.volume = 0.9;(rate 范围 0.1–10,pitch 0–2,volume 0–1)

播放、暂停、取消与事件监听

语音不是立即播放,而是加入合成队列。控制逻辑要靠事件和方法配合:

立即学习“Java免费学习笔记(深入)”;

  • 开始朗读:synth.speak(utterance);
  • 暂停当前语音:synth.pause();
  • 恢复播放:synth.resume();
  • 清空队列(含正在说的):synth.cancel();
  • 常用事件:utterance.onstart、onend、onerror、onpause,可用于更新 UI 状态(如按钮文字从“播放”变“暂停”)

注意事项与常见问题

实际开发中容易踩坑:

  • 用户交互触发限制:多数浏览器要求 speak() 必须由用户手势(如 click、touchend)触发,不能在页面加载或定时器里直接调用
  • 移动端兼容性差异大:iOS Safari 支持较晚(17.4+),且部分机型无中文语音;Android Chrome 通常支持良好
  • 语音加载异步:getVoices() 初次可能为空,务必监听 voiceschanged 再取值
  • 避免重复 speak:调用前建议先 synth.cancel(),防止多条语音叠加

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2526

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4539

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3307

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

2802

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2294

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

2712

2025.04.24

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

1978

2023.09.20

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3068

2023.10.19

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

0

2026.09.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn