Skip to content

janantala/speech-synthesis

Repository files navigation

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.

Demo

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

References

Usage

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.'); };
fallbackSpeechSynthesis.speak(u);

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

SpeechSynthesisVoice

  • voiceURI
  • name
  • lang
  • localService
  • default

Voice depends on google translate service.

SpeechSynthesisVoiceList

  • length
  • item

Contributing

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

License

The MIT License

Copyright (c) 2014 Jan Antala