window.speechSynthesis语音合成在chrome浏览器中刷新无法自动播报

最新推荐文章于 2025-03-20 11:08:01 发布
最新推荐文章于 2025-03-20 11:08:01 发布
阅读量3.1k 收藏 1
点赞数
文章标签： chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/notChange/article/details/134455530
版权
由于Chrome从18年4月开始禁止音视频自动播放，导致语音合成在页面加载后无法自动播报。为解决此问题，可以尝试两种方案：一是将网址添加到浏览器的安全设置中允许声音；二是监听用户点击事件，确保用户有交互后再进行语音播报。若在iframe环境下，还需处理点击事件的传递和计数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原因

chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。

严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。

在页面加载完毕的情况下，用户需要有主动交互行为，才能正常播放。

解决方案一：在浏览器安全设置中添加网址

在浏览器安全设置中将需要播放语音的网址加进去

chrome://settings/content/sound

添加网址，刷新或重新加载就会自动播报

解决方案二：监听用户点击事件

本来的想法是，页面加载好，弹出窗口，让用户点击后开启，但是领导觉得每次进来让用户点，体验不好，说用户进来肯定会点击界面，只要他点了，就给他开启，那就听领导的吧

页面中使用了iframe嵌套，会出现iframe点击 和 index页面点击，所以我定义了一个变量，接收窗口点击的次数

最低0.47元/天 解锁文章
notChange
关注
新版Chrome访问http页面无法在用户未交互的情况下自动播放声音（Google浏览器不支持audio自动播放问题）
m0_45158829的博客
08-18 3369
前提： 现系统项目需要用户在websocket接收实时通知时自动触发报警声音 解决方式： 用了h5中的audio标签，将其中属性设置为autoplay后不能自动播放，查询了网上其他人的写法，增加了muted 也没反应，控制台上有如下报错 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. chrome是这么说的：https://develope
【高频考点精讲】前端语音识别实践：Web Speech API的基本用法
最新发布
全栈老李的博客
04-27 678
Web Speech API用起来其实不难，但要做好用户体验还是有很多细节要注意的。比如权限管理（第一次使用需要用户授权麦克风）、错误处理、降级方案等等。另外，虽然浏览器原生API很方便，但在复杂场景下可能还是需要结合第三方语音识别服务（比如百度语音、阿里云语音识别等），这些服务通常准确率更高，功能也更丰富，当然就需要后端配合了。好了，今天的内容就到这里。如果你觉得有用，别忘了关注"全栈老李"，我会持续分享更多前端干货。有什么问题或者想法，欢迎在评论区留言讨论～
speechSynthesis.speak()在chrome不执行问题
热门推荐
pridas的博客
07-26 1万+
现象： 其他支持此功能的浏览器正常，但chrome无声音，也没有执行speechSynthesisUtterance.onstart()方法。 大概推测的原因： 1. 打印window.speechSynthesis.getVoices()返回信息，可发现chrome比其他浏览器多了Google XX等一系列voice： 2. 在未对speechSynthesisUtterance设置voice时，会默认根据speechSynthesisUtterance.lang判断使用哪个；而spee.
SpeechSynthesisUtterance文字语音播报, 循环播报, 方法封装多组件使用, 自定义播报音色音量音调
$
03-20 1386
count++play()}, 1000)play()playVoice('好好好', 3)
浏览器自带api语音播报speechSynthesis.speak()无法自动播报问题分析及非完美解决方案
this_zq的博客
07-04 6840
这里主要说说语音播报的部分。本来觉得用浏览器自带的API来实现直接写一句话就ok了，但是没想到居然有一个bug。那就是这条语音有时候能播报，有时候就没有声音了？最近遇到一个需求，就是前端页面要实时监听后端传过来的数据，同时当后端传过来这条数据时前端界面要语音播报这条数据。* @param msg 播报的信息。* @param msg 播报的信息。//#region 语音播报封装。// 初次播报使用模拟按钮触发。'哈哈哈哈哈，这是声音~'// 添加点击事件处理程序。// 模拟用户点击事件。
语音播报刷新页面不能播报问题的原因
sunzhen15896的博客
04-15 2927
使用SpeechSynthesisUtterance进行语音播报文字的时候，发现刷新浏览器不能播放声音的问题 原因：浏览器对于语音，视频等会有限制，不能允许直接播放，必须进行至少一次点击事件 解决方案：随意点击页面上的内容，即可重新触发 ...
window.speechSynthesis.speak 不能自动执行问题
qq_47247479的博客
09-19 2195
window.speechSynthesis.speak 不能自动执行问题
使用谷歌浏览器的语音播报功能时发现不能播放
qq_36001082的博客
09-19 4580
使用谷歌浏览器的语音播报功能时发现不能播放 <script> if(!('speechSynthesis' in window)) { throw alert("对不起，您的浏览器不支持") } setTimeout(()=> { play() },2000) function play(){ var mess = '搜狗[1] 是搜狐公司的旗下子公司，于2004年8月3日推出，目的是增强搜狐网的搜索技能，主要经营搜狐公司的搜索业务。在搜索业务
Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
coldriversnow的专栏
07-25 748
不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，7、运行在360极速浏览器中刷新之后即使没有任何事件，也能支持自动播放，不会弹出提示。在上面可以实现在360极速浏览器中自动播放音频正常，但是在Chrome浏览器中，如果。chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。6、运行在谷歌浏览器中，如果刷新后没有任何交互事件则会提示，如果有则不提示。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。
HTML5声音合成，文字转换声音，无声音解决办法
12-22
### HTML5声音合成技术概述 ...通过理解`speechSynthesis`对象和`SpeechSynthesisUtterance`对象的使用方法，以及掌握常见的调试技巧，开发者可以轻松地将文字转语音的功能集成到自己的项目中，从而提升用户体验。
ucantseemejs声控Chrome浏览器特效
08-12
在JavaScript开发中，声控功能的实现主要依赖于Web Speech API，这是一个由浏览器提供的原生API，包括了语音识别（Speech Recognition）和语音合成（Speech Synthesis）两部分。ucantseeme.js 使用的是语音识别功能...
从头学习爬虫（四十二）高阶篇----模拟真正浏览器的selenium
qq_36783371的博客
02-20 3636
本文主要讲述 1、selenium与真正浏览器的区别 2、模拟方法 一 介绍 selenium打开chrome或者firefox或者其他浏览器，与其真正浏览器不同的是加载参数（站在需要模拟浏览器进行自动化的方面）。 所以经常看到的是加载参数有headless、disable-infobars、ignore-certificate-errors..... 二 问题 selenium其实...
语音读文字 window.speechSynthesis.speak (谷歌浏览器无声音解决)
2301_77474196的博客
07-27 2189
此处添加你要自动播放声音的网址即可。
HTML5语音合成功能
小小陈的博客
04-22 1587
这篇文章主要介绍了HTML5语音合成功能的实现代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧 可将该代码复制到chrome控制台中体验 let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客"); window.speechSynthesis.speak(msg); SpeechSyntehesisUtteranc 这个语音合成功能是HTML5的特性，其中也有一些属性是可配置的 let msg = new .
vue使用window.speechSynthesis实现文字转语音
god_sword_的博客
07-23 806
关于window.speechSynthesis的其他用法，可以自行查阅相关资料。
浏览器语音合成对象speechSynthesis和SpeechSynthesisUtterance实现语音播放
Ljwen_的博客
09-02 5985
浏览器语音合成对象实现语音播放，speechSynthesis，speechSynthesis
语音合成 语音播报 window.speechSynthesis new SpeechSynthesisUtterance()
qq_41985405的博客
09-27 381
/ 设置语速（默认1）// 设置音调（默认1）// 创建要朗读的语音。'语音合成，语音播报'
语音 Speech Synthesis API非常容易实现。事实上，只需两行代码即可让您的网络应用与用户交流。
web修理工
06-05 1688
Speech Synthesis API非常容易实现。事实上，只需两行代码即可让您的网络应用与用户交流。 var utterance = new SpeechSynthesisUtterance('Hello Treehouse'); window.speechSynthesis.speak(utterance); speechSynthesis 接口 speak(SpeechSynthesisUtterance)- 这个方法应该传递一个实例SpeechSynthesisUtterance。然后它
js纯前端实现语音播报，朗读功能（2024-04-15）
hap1994的博客
04-15 4881
分别是【window.speechSynthesis】【SpeechSynthesisUtterance】将函数拷贝到项目中，执行函数即可实现。实现语音播报要有两个原生API。
vue window.speechSynthesis
03-20
### Vue.js 中 `window.speechSynthesis` 的使用方法 在 Vue.js 庢项目中，可以利用浏览器内置的 Web Speech API 来实现语音合成功能。具体来说，可以通过调用全局对象 `window.speechSynthesis` 实现这一目标。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值