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

最新推荐文章于 2026-03-24 08:28:30 发布

原创最新推荐文章于 2026-03-24 08:28:30 发布 · 4.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#chrome #前端

由于Chrome从18年4月开始禁止音视频自动播放，导致语音合成在页面加载后无法自动播报。为解决此问题，可以尝试两种方案：一是将网址添加到浏览器的安全设置中允许声音；二是监听用户点击事件，确保用户有交互后再进行语音播报。若在iframe环境下，还需处理点击事件的传递和计数。

原因

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

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

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

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

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

chrome://settings/content/sound

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

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

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

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

let windowClickCount = 0;

在iframe中，监听点击，发送消息

$("body").one("click", function () {
    window.parent.postMessage("点击了",'*');
});

index页面中监听

window.addEventListener('message',function(e){
    if (windowClickCount === 0) {
        initVoice(); // 调用语音播报
    }
    windowClickCount++;
},false);

// 监听body的点击事件
$("body").one("click", function (e) {
    if (windowClickCount === 0) {
        initVoice();
    }
    windowClickCount++;
});

如有更好的解决方案，欢迎指导