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

原因

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++;
});

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