speech-synthesis v0.4.0

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

• W3C: Web Speech API Specification
• HTML5 rocks: Web apps that talk - Introduction to the Speech Synthesis API
• Speech recognition is more tricky. Control an AngularJS app using voice commands

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