This is an experimental technologyCheck 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 APIThe definition of 'SpeechSynthesis' in that specification. | Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
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
See also
Window.speechSynthesis by Mozilla Contributors is licensed under CC-BY-SA 2.5.