This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.
The speechSynthesis
read-only property of the Window object returns a SpeechSynthesis
object, which is the entry point into using Web Speech API speech synthesis functionality.
Syntax
var synth = window.speechSynthesis;
Value
A SpeechSynthesis
object.
Examples
In our basic Speech synthesiser demo, we first grab a reference to the SpeechSynthesis controller using window.speechSynthesis
. After defining some necessary variables, we retrieve a list of the voices available using SpeechSynthesis.getVoices()
and populate a select menu with them so the user can choose what voice they want.
Inside the inputForm.onsubmit
handler, we stop the form submitting with preventDefault(), create a new SpeechSynthesisUtterance
instance containing the text from the text <input>
, set the utterance's voice to the voice selected in the <select>
element, and start the utterance speaking via the SpeechSynthesis.speak()
method.
var synth = window.speechSynthesis; var inputForm = document.querySelector('form'); var inputTxt = document.querySelector('input'); var voiceSelect = document.querySelector('select'); function populateVoiceList() { voices = synth.getVoices(); for(i = 0; i < voices.length ; i++) { var option = document.createElement('option'); option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textContent += ' -- DEFAULT'; } option.setAttribute('data-lang', voices[i].lang); option.setAttribute('data-name', voices[i].name); voiceSelect.appendChild(option); } } populateVoiceList(); if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; } inputForm.onsubmit = function(event) { event.preventDefault(); var utterThis = new SpeechSynthesisUtterance(inputTxt.value); var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedOption) { utterThis.voice = voices[i]; } } synth.speak(utterThis); inputTxt.blur(); }
Specifications
Specification | Status | Comment |
---|---|---|
Web Speech API The definition of 'SpeechSynthesis' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 33 | 45 (45) [1] | Not supported | ? | 7 |
Feature | Android | Chrome | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | Not supported | 2.0 | Not supported | Not supported | 7.1 |
- [1] Can be enabled via the
media.webspeech.synth.enabled
flag in about:config. Windows has been implemented on version 42, Mac and Linux have been implemented on version 44.