Github Twitter 2 Delicious Linkedin Stackoverflow Google plus new 32px Rss

HTML5 Speech Synthesis Tips and Tricks

The HTML5 Speech Synthesis API isn't widely supported, but it is something cool to play with and can be useful. It is supported only in Chrome and Safari. For a recent prototype feature I used it. It is definitely still pretty beta. The goal of this post is to give some pointers when using it, if you choose to.

Detecting Support

If you are going to do anything with Speech Synthesis you are probably going to want to enable it only if your user's browser supports it.

    supportsSpeechSynthesis = function (){
      return 'speechSynthesis' in window
    }
    supportsSpeechSynthesis() // true or false
  

Basic Usage

Using the API is actually really simple. Open your javascript console and try it out.

    phrase = "The quick brown fox jumps over the lazy dog."
    audio = new SpeechSynthesisUtterance(phrase)
    window.speechSynthesis.speak(audio)
  

Chrome Bugs

There is a known bug in Chrome that causes the speech synthesis to stop working if you use text greater than ~ 300 characters. The only way to get to start working again is to restart Chrome. The simple solution is to split up your text into sentences. This actually works out for the better, since there will be a larger gap between the sentences and it sounds more natural.

    phrase = "\
    Oak is strong and also gives shade.\
    Cats and dogs each hate the other.\
    The pipe began to rust while new.\
    Open the crate but don't break the glass.\
    Add the sum to the product of these three.\
    Thieves who rob friends deserve jail.\
    The ripe taste of cheese improves with age.\
    Act on these orders with great speed.\
    The hog crawled under the high fence.\
    Move the vat over the hot fire.\
    "

    sentences = phrase.split(".")
    for (i = 0; i < sentences.length; i++) {
      sentence = sentences[i]
      audio = new SpeechSynthesisUtterance(sentence)
      window.speechSynthesis.speak(audio)
    }
  

This works well, however as a safeguard you might want to make sure none of your sentences go over the limit. If any do break them up!

Pausing and Resuming

The API supports stopping, pausing, and resuming. Safari will resume at the beginning of the current SpeechSynthesisUtterance object whereas chrome will resume where it left off.

    window.speechSynthesis.pause()
    window.speechSynthesis.resume()
    window.speechSynthesis.stop()
  

I've found that to get everything to work consistently sometimes you have to pause and resume it once or twice at the beginning of playback.

Related Links

Comments

Douglas
Douglas says:
04/21/2016 07:45am

Hey man, you said that you can't feed it text longer than 300 characters. But how do I separate it into sentences? Is using a full stop enough or do I need a new line?

Nick DeSteffen
04/23/2016 01:56pm

The code example shows how two split the phrase into sentences.

Yusuf
Yusuf says:
05/23/2016 05:18pm

Chrome Bugs... you saved me hours. thanks

Gilberto
Gilberto says:
07/22/2016 01:01pm

The world evolving. This is good. interested I test project. I invite to exchange experiences . My experience on and off. engine and experimental LAMP LIFE . sorry my language translated by Google.

Format using Markdown