Speech Synthesis polyfill
Clone or download


speech-synthesis v0.4.0 Build Status

Speech Synthesis polyfill based on Google Translate service. Polyfill downloads audio from Google Translate server using CORS and plays it using audio element.


Check out http://janantala.github.io/speech-synthesis/



We use bower for dependency management. Add

dependencies: {
    "speech-synthesis": "latest"

To your bower.json file. Then run

bower install

This will copy the files into your bower_components folder, along with its dependencies. Load the script files in your application:

<script type="text/javascript" src="bower_components/speech-synthesis/polyfill.min.js"></script>

And finally use speech synthesis:

// Initialize speech synthesis, we use polyfill only when speech synthesis is not available
var fallbackSpeechSynthesis = window.getSpeechSynthesis();
var fallbackSpeechSynthesisUtterance = window.getSpeechSynthesisUtterance();

// To use polyfill directly call
// var fallbackSpeechSynthesis = window.speechSynthesisPolyfill;
// var fallbackSpeechSynthesisUtterance = window.SpeechSynthesisUtterancePolyfill;

var u = new fallbackSpeechSynthesisUtterance('Hello World');
u.lang = 'en-US';
u.volume = 1.0;
u.rate = 1.0;
u.onend = function(event) { console.log('Finished in ' + event.elapsedTime + ' seconds.'); };

CORS proxy server

CORS proxy server is required to download audio from google translate service into your web application. Default value is set to http://www.corsproxy.com/ but we would recommend you to use your own server. To set up your own change corsProxyServer attribute in SpeechSynthesisUtterance instance.

u.corsProxyServer = 'http://www.corsproxy.com/';

Identify the polyfill usage

To identify the polyfill usage you can use isPolyfill attributes.

var u = new window.SpeechSynthesisUtterancePolyfill('Hello World');
u.isPolyfill; // true

window.speechSynthesisPolyfill.isPolyfill; // true

Native support detection

To detect native speech synthesis support use:

window.nativeSpeechSynthesisSupport(); // true, false
window.getSpeechSynthesis(); // returns native implementation or polyfill
window.getSpeechSynthesisUtterance(); // returns native implementation or polyfill

Supported attributes and methods

SpeechSynthesis Attributes

  • pending
  • speaking
  • paused

SpeechSynthesis Methods

  • speak()
  • cancel()
  • pause()
  • resume()
  • getVoices()

SpeechSynthesisUtterance Attributes

  • text
  • lang
  • voiceURI
  • volume
  • rate
  • pitch

SpeechSynthesisUtterance Events

  • onstart
  • onend
  • onerror
  • onpause
  • onresume
  • onmark
  • onboundary

SpeechSynthesisEvent Attributes

  • charIndex
  • elapsedTime
  • name


  • voiceURI
  • name
  • lang
  • localService
  • default

Voice depends on google translate service.


  • length
  • item


Contributions are welcome. Please make a pull request and do not bump versions. Also include tests.


The MIT License

Copyright (c) 2014 Jan Antala