JS SpeechSynthesis Problems with the cancel() Method

Question

i want to use the cancel Method of window.SpeechSynthesis in Chrome, to cut off an Utterance and start a new one (so you dont have to hear all utterances which are still in queue)

var test = new SpeechSynthesisUtterance("Test");
window.speechSynthesis.speak(test);  
window.speechSynthesis.cancel();
var test2 = new SpeechSynthesisUtterance("Test2");
window.speechSynthesis.speak(test2);

Expected: Start speech with var test , but cancel it instantly due to cancel(). Then start speech again with var test2 , which should work fine.

Well of course that did not happen. But what happened was nothing. :D It seemed like calling speak() after cancel() somehow does nothing.

The API Description is the following:

This method removes all utterances from the queue. If an utterance is being spoken, speaking ceases immediately. This method does not change the paused state of the global SpeechSynthesis instance.

Thx for answers :)

score 2 · Answer 1 · answered May 18 '17 at 08:29

I just faced the same problem, issuing a speak after a cancel will result in no utterance being spoken.

I added a small timeout (250ms) after the clear() call and it seems to work:

var sayTimeout = null;

function say(text) {
    if (speechSynthesis.speaking) {
        // SpeechSyn is currently speaking, cancel the current utterance(s)
        speechSynthesis.cancel();

        // Make sure we don't create more than one timeout...
        if (sayTimeout !== null)
            clearTimeout(sayTimeout);

        sayTimeout = setTimeout(function () { say(text); }, 250);
    }
    else {
        // Good to go
        var message = new SpeechSynthesisUtterance(text);
        message.lang = "en-US";
        speechSynthesis.speak(message);
    }
}

score 1 · Answer 2 · answered Jun 28 '19 at 07:36

It seems to work now, using the code you provided.

$(document).on("click", "#speak", function() {

  var test = new SpeechSynthesisUtterance("Test");
  window.speechSynthesis.speak(test);
  window.speechSynthesis.cancel();
  var test2 = new SpeechSynthesisUtterance("Test2");
  window.speechSynthesis.speak(test2);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="speak">CLICK ME TO HEAR TEXT</div>

Confirmed. I hear "Test2" in Chrome 76 / Windows 7. – Bob Stein Sep 27 '19 at 12:31 — Bob Stein, Sep 27 '19 at 12:31

score 0 · Answer 3 · edited Dec 09 '18 at 22:59

function texto_a_voz(reproducir, idioma) {

   var synth = window.speechSynthesis;
   var voices = [];
   voices = synth.getVoices();

   var utterThis = new SpeechSynthesisUtterance(reproducir);
   utterThis.voice = voices[idioma];
   utterThis.pitch = pitch.value;
   utterThis.rate = rate.value;

   if (synth.speaking) {
       // SpeechSyn is currently speaking, cancel the current utterance(s)
       synth.cancel();
       setTimeout(function () { synth.speak(utterThis); }, 250);
   }
   else {
       // Good to go
       synth.speak(utterThis);
   }
}

score -1 · Answer 4 · answered Apr 12 '19 at 09:49

Taken this code directly out of the examples of the p5speech lib. Maybe this helps as a work around?

    function parseResult()
    {
        // recognition system will often append words into phrases.
        // so hack here is to only use the last word:
        var mostrecentword = myRec.resultString.split(' ').pop();
        if(mostrecentword.indexOf("left")!==-1) { dx=-1;dy=0; }
        else if(mostrecentword.indexOf("right")!==-1) { dx=1;dy=0; }
        else if(mostrecentword.indexOf("up")!==-1) { dx=0;dy=-1; }
        else if(mostrecentword.indexOf("down")!==-1) { dx=0;dy=1; }
        else if(mostrecentword.indexOf("clear")!==-1) { background(255); }
        console.log(mostrecentword);
    }

JS SpeechSynthesis Problems with the cancel() Method

4 Answers4