Paul Weber
Paul Weber

Reputation: 6708

Detecting pause in speechSynthesis API in Chrome / Safari

We are using the speechSynthesis API to read text to our users. We want to give the users the option to pause the output, and there is the speechSynthesis.pause() and speechSynthesis.resume() method.

According to the documentation, there should also be a flag on the speechSynthesis object, speechSynthesis.paused that indicates the paused state. This indication does not seem to work, we can pause the speechSynthesis, but it seems like there is no possible way to track the pause status, and the paused flag on the speech synthesis object stays false. Even the speechSynthesis.speaking flag stays true while paused!

We could track the status manually, but if the user refreshes the tab while paused, it might be that we loose our custom tracking.

Are we using the API wrong, or is it just buggy?

http://blog.teamtreehouse.com/getting-started-speech-synthesis-api

Upvotes: 2

Views: 1182

Answers (1)

Kevin Hakanson
Kevin Hakanson

Reputation: 42240

I modified the CodePen from the referenced article to add a Pause/Resume button : http://codepen.io/anon/pen/MKEdZp

On my Mac, Safari 9.0.2 and Firefox 45.0a2 seem to behave as expected (but Chrome 47.0.2526.111 is being finicky).

The code below indicates speechSynthesis.speaking = true even when window.speechSynthesis.paused = true

// Set up an event listener for when the 'pause' button is clicked.
button2.addEventListener('click', function(e) {
  console.log("window.speechSynthesis.speaking = " + window.speechSynthesis.speaking);
  console.log("window.speechSynthesis.paused = " + window.speechSynthesis.paused);

  if (window.speechSynthesis.speaking) {
    if (window.speechSynthesis.paused) {
      window.speechSynthesis.resume();
      button2.innerText = "Pause";
    } else {
      window.speechSynthesis.pause();
      button2.innerText = "Resume";
    }
  }
});

Probably a buggy API that has been fixed since the original post.

Upvotes: 1

Related Questions