JavaScript speechSynthesis.speak() 自 M71 以来不再允许未经用户激活

Question

我这样使用 speechSynthesis API：

speechSynthesis.speak(new SpeechSynthesisUtterance("hello world"));

但是现在更新后出现错误 Google Chrome:

[Deprecation] speechSynthesis.speak() without user activation is no longer allowed since M71, around December 2018. See https://www.chromestatus.com/feature/5687444770914304 for more details speechSynthesisMessage @ application-2c16c437c2795ae01c0a8852e5f8da58dad99d6e17814a31f1eea19922c5ebd2.js:147

如何解决这个问题并请求许可？

Answer 1

这是 Chrome 关于从网页制作声音的新政策的一部分。
您只需要您的用户在父文档的生命周期内提供一个用户手势（您可以找到一个列表 here）（即只要用户曾经与页）。

请注意，这些事件甚至可以遍历框架，例如，在 Whosebug 中，您必须单击 "Run" 按钮这一简单事实将使内部框架允许执行此代码：

const ut = new SpeechSynthesisUtterance('No warning should arise');
speechSynthesis.speak(ut);

并且在您的代码中，您只需提供某种 UI 即可确保您的用户在您调用此方法之前已与该页面进行交互（例如，按钮/切换就可以完美完成）。

Answer 2

我使用了swal("Click OK to speak").then(() => speakButton.click());（https://sweetalert.js.org) -- https://patarapolw.github.io/tts-api/?q=你好&lang=zh-CN&rate=0.8

请注意，if (confirm("Click OK to speak")) speakButton.click() 不起作用。

Answer 3

如果您在 chrome://settings/content/sound 中将您的站点地址设置为 "trusted"，似乎即使没有用户交互也能启用声音和语音合成。

我在电视中使用 Chrome 作为系统监视器，使用 kiosk 模式并且没有任何用户交互。它甚至没有键盘和鼠标。尽管如此，我还是能够在 Chrome/Chromium 的某些版本中启用，但在其他版本中无法启用。

Answer 4

此错误意味着整个文档（网站）没有用户交互并且GoogleChrome更新了关于在没有用户交互的情况下从网站发出声音的政策.

用户互动意味着：click, dblclick, mouseup, pointerup, reset, submit etc.

解法：

因此，如果您想运行 speechSynthesis.speak(); 没有真正的用户交互，那么您只需使用 .click() 等方法创建临时用户交互

Answer 5

一个简单的 hack，不需要真正的用户 activity，就是像这样在隐藏按钮上执行点击事件。

document.querySelector('button').click();
var msg = new SpeechSynthesisUtterance('Test');

Answer 6

虽然我还没有找到任何请求权限的方法，但是 user 可以在 Google Chrome:

中启用权限

单击URL栏左侧的图标，然后打开站点设置
将声音设置从“自动（默认）”更改为“允许”

这样做之后，网站将能够在没有任何用户交互的情况下发出声音，包括语音。

不幸的是，我还没有在代码中找到一种方法来知道这是否有效。（也许我们可以尝试其他音频 API 之一，看看它是否会以错误消息响应。）

Answer 7

我遇到了同样的问题，可以像这样使用 window.onload 对其进行排序：

window.onload = function(){ 
var u = new SpeechSynthesisUtterance('All is Ok');
 u.text = 'Hello World';    
 u.lang = 'en-US';
 u.rate = 1;
 u.pitch = .4;     
 speechSynthesis.speak(u);
}

当然这只会在页面加载后触发一次，但这对我来说是一个很好的解决方案。

JavaScript speechSynthesis.speak() 自 M71 以来不再允许未经用户激活

JavaScript speechSynthesis.speak() without user activation is no longer allowed since M71

javascript

google-chrome

speech-synthesis