speechSynthesis.speak not working in chrome

Question

speechSynthesis.speak not working in chrome

13.5k views Asked by Zach Fewtrell At 26 December 2024 at 07:48

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>

Original Q&A

There are 7 answers

**Aditya Pramanik** · Answer 1 · 2020-09-13 06:20:36

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

**Daniel Apps** · Answer 2 · 2021-09-16 12:14:09

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.

**just_another_beginner** · Answer 3 · 2021-07-02 20:32:15

just_another_beginner On 02 July 2021 at 20:32

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.

**miir** · Answer 4 · 2021-07-16 05:35:37

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().

**Bob Stein** · Answer 5 · 2019-11-09 02:23:29

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().

**Edwin Rodriguez** · Answer 6 · 2023-10-11 13:08:32

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

**AudioBubble** · Answer 7 · 2017-11-21 00:28:53

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.

TechQA.

speechSynthesis.speak not working in chrome

There are 7 answers

Related Questions in GOOGLE-CHROME

Related Questions in WEBSPEECH-API

Popular Questions

Popular Tags

Trending Questions