JavaScript speechSynthesis.speak () без активации пользователя больше не разрешен с M71

Question

Я использовал API-интерфейс speechSynthesis следующим образом:

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

Но сейчас я получаю ошибку после обновления Google Chrome:

[Устаревание] speechSynthesis.speak () без активации пользователя нет больше разрешено с M71, около декабря 2018 года. https://www.chromestatus.com/feature/5687444770914304 для более подробной информации speechSynthesisMessage @ Приложение-2c16c437c2795ae01c0a8852e5f8da58dad99d6e17814a31f1eea19922c5ebd2.js: 147

Как я могу исправить эту проблему и спросить разрешения?

Answer 1

Я прибег к 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 2

Это часть новых политик Chrome относительно создания звука с веб-страниц.
Вам просто нужно, чтобы ваш пользователь предоставил пользовательский жест (для которого вы можете найти список здесь ) во времявремя жизни родительского документа (т.е. событие может долго оставаться мертвым, если пользователь когда-либо взаимодействовал со страницей).

Обратите внимание, что эти события могут даже проходить через фреймы, например, в StackOverflow простой факт, что вам нужно нажать кнопку «Выполнить», сделает внутренний фрейм разрешенным для выполнения этого кода:

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

И в вашем коде вы просто должны предоставить какой-то интерфейс, который обеспечит взаимодействие ваших пользователей со страницей перед вызовом этого метода (например, кнопка /тумблер сделает отлично)