This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
speechSynthesis | Chrome Full support 33 | Edge Full support 14 | Firefox Full support 49 | IE No support No | Opera Full support Yes | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support Yes | Firefox Android No support No | Opera Android No support No | Safari iOS Full support 7 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support