speechSynthesis.speak not working in chrome

C

7

22

I'm using chrome Version 55.0.2883.87 m (64-bit) on Windows 10.

The following simple html file reproduces the problem and is extracted from my more complex app. It is supposed to speak the 3 words on page load. It works on MS Edge and Firefox but does not work on chrome. This code was working for me on Chrome no problem a couple weeks back.

<html>
<head>
    <script lang="javascript">
        window.speechSynthesis.speak(new SpeechSynthesisUtterance("cat"));
        window.speechSynthesis.speak(new SpeechSynthesisUtterance("dog"));
        window.speechSynthesis.speak(new SpeechSynthesisUtterance("bark"));
    </script>
</head>
<body></body>
</html>

Circumstantial answered 9/1, 2017 at 1:13 Comment(0)

T

37

I may never know for sure, because this problem was intermittent, but it seemed to go away after I started to cancel right before speak.

utter = new window.SpeechSynthesisUtterance("cat");

window.speechSynthesis.cancel();
window.speechSynthesis.speak(utter);

I don't think the cancel necessarily has to come between the utterance object creation and use. Just that it come before every speak. I may have had a different problem as I was only creating one utterance object, not a bunch. I did only see it on Chrome 78. Using Windows 7, 64-bit. Never saw the problem on Firefox or Edge.

EDIT 2 weeks later. No recurrences after several dozen tries. It seems .cancel() solved my problem. My symptoms were: calling speechSynthesis.speak() in Chrome would sometimes not start the speech. There were no immediate indications of a problem in the code, speechSynthesis.speaking would be true and .pending would be false. There would be no events from the utterance object. Normally, when speech would work, I'd get a 'start' event about 0.1 seconds after calling .speak().

Tellurize answered 9/11, 2019 at 2:23 Comment(0)

D

10

speechSynthesis.speak() is no longer allowed without user activation in Google's Chrome web browser since 2018. It violates autoplay policy of Google Chrome. Thus Google Chrome has managed to revoke it's autoplay functionality but you can make use of it by adding a button to make a custom call.

You can visit here to check the status provided by chrome itself also below is the image attached which clearly shows that speechSynthesis.speak() call is prohibited without user's permission.

Link to image

Link to article by Google Chrome

Druid answered 13/9, 2020 at 6:20 Comment(0)

P

4

To add to this, the issue for me was the playback rate on the instance of SpeechSynthesisUtterance was above 2. I discovered it must be set to 2 or less in chrome (although it works with higher rates in other browsers like safari).

In chrome, if the utterance rate is above 2, it causes the window.speechSynthesis to be stuck, and needs window.speechSynthesis.cancel() before it will play audio again (at a valid rate below 2) via .speak().

Postwar answered 16/7, 2021 at 5:35 Comment(0)

W

2

Did your text to voice tryout work only once? Here is why.

In chrome you have to cancel the speechSynthesis, otherwise its not compliant to googles autoplay policy. So you should start your script with:

window.speechSynthesis.cancel()

To cancel any speech synthesis that happened before.

Womack answered 16/9, 2021 at 12:14 Comment(1)

yes. I had to add a button then press it for the thing starting to speech. Chrome doesn't like autoplay – Servitor 25/3, 2022 at 22:22

M

0

resultsDisplay = document.getElementById("rd");
startButton = document.getElementById("startbtn");
stopButton = document.getElementById("stopbtn");

recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 5;

recognition.onresult = function(event) {
  resultsDisplay.innerHTML = "You Said:" + event.results[0][0].transcript;
};

function start() {
  recognition.start();
  startButton.style.display = "none";
  stopButton.style.display = "block";
}

function stop() {
  recognition.stop();
  startButton.style.display = "block";
  stopButton.style.display = "none";
}

.resultsDisplay {width: 100%; height: 90%;}
#stopbtn {display: none;}

<div class="resultsDisplay" id="rd"></div>
<br/>

<center>
  <button onclick="start()" id="startbtn">Start</button>
  <button onclick="stop()" id="stopbtn">Stop</button>
</center>

Try

utterance = new SpeechSynthesisUtterance("cat, dog, bark");
speechSynthesis.speak(utterance);

I made a Weave at LiveWeave.

Marden answered 21/11, 2017 at 0:28 Comment(0)

A

0

Instead of specifying the text while calling new, you could try specifying an object with rate, volume, and text separately, and then converting it to voice.

Auld answered 2/7, 2021 at 20:32 Comment(0)

A

0

You cannot auto play in chrome. You have to add it to an event example

<button onclick="onRead()">Talk To Me</button>

const onRead = () => {
        const utter = new window.SpeechSynthesisUtterance("red");
        window.speechSynthesis.speak(utter);
};

Actinochemistry answered 11/10, 2023 at 13:8 Comment(0)

Recommended topics

Hot tags