/speech-synthesis-cordova

Speech Synthesis polyfill

Primary LanguageJavaScriptMIT LicenseMIT

speech-synthesis-cordova

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

Important

This module is a fork of the speech-synthesis by @janantala. I have added Corodva's Media API support.

Demo

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

References

Usage

We use bower for dependency management. Add

dependencies: {
    "speech-synthesis-cordova": "https://github.com/arvindr21/speech-synthesis-cordova"
}

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-cordova/polyfill.min.js"></script>

Add the Media API plugin to your project

$ phone plugin add org.apache.cordova.media

and make sure you include the media plugin in config.xml before submitting it to Phonegap build

<gap:plugin name="org.apache.cordova.media" version="0.2.13" />

And finally use speech synthesis inside the deviceready event:

document.addEventListener("deviceready", function() {
// 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);

}, false);

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