speechSynthesis

Experiment with speechSynthesis

by Laurens Maneschijn

HTML

<form id="form">
	<label>text:     <input  id="text" type="text" value="hello world"></label><br>
	<label>volume:   <input  id="volume" type="range" min="0.0" max="1" step="0.1" value="1"></label>
	<label>rate:     <input  id="rate"   type="range" min="0.1" max="10" step="0.1" value="1"></label>
	<label>pitch:    <input  id="pitch"  type="range" min="0.0" max="2" step="0.1" value="1"></label><br>
	<label>voice:    <select id="voice"></select></label><br>
	<label>language: <select id="language"></select></label> (if selected voice is not default, language is ignored)<br>
	<input type="submit">
</form>

<hr>

<details>
	<summary>related links:</summary>
	<ul>
		<li><a target="_blank" href="https://dev.to/asaoluelijah/text-to-speech-in-3-lines-of-javascript-b8h">source idea</a></li>
		<li><a target="_blank" href="https://stackoverflow.com/questions/15653145/using-google-text-to-speech-in-javascript">stackoverflow</a></li>
		<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">MDN Web_Speech_API</a></li>
		<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">MDN SpeechSynthesis</a></li>
		<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">MDN SpeechSynthesis.getVoices()</a></li>
		<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/lang">MDN SpeechSynthesisUtterance.lang</a></li>
	</ul>
</details>

CSS

input {
	vertical-align: middle;
}

JavaScript

var form = document.querySelector('#form');
var input_text = document.querySelector('#text');
var input_volume = document.querySelector('#volume');
var input_rate = document.querySelector('#rate');
var input_pitch = document.querySelector('#pitch');
var select_voice = document.querySelector('#voice');
var select_language = document.querySelector('#language');

function speak() {
	var msg = new SpeechSynthesisUtterance();
	var voices = window.speechSynthesis.getVoices();
	if (voices && select_voice.value) {
		msg.voice = voices[select_voice.value]; // voices[0]; 
	}
	msg.volume = input_volume.value; // 1; // From 0 to 1
	msg.rate = input_rate.value; //  1; // From 0.1 to 10
	msg.pitch = input_pitch.value; //  1; // From 0 to 2
	msg.text = input_text.value; //  "hello world";
	if (select_language.value) {
		msg.lang = select_language.value; //  'en-US';
	}
	// if text is empty and a voice is chosen, speak the voice name:
	if (!input_text.value && voices && select_voice.value) {
		msg.text = (voices[select_voice.value]).name;
	}
	console.log(msg);
	window.speechSynthesis.cancel();
	window.speechSynthesis.speak(msg);
}
var timeout_speak;
function speak_delayed() {
	window.speechSynthesis.cancel();
	clearTimeout(timeout_speak);
	timeout_speak = setTimeout(function(){
		speak();
	}, 300);
}

var update_voices_done = false;
function update_voices() {
//	console.log(window.speechSynthesis);
//	console.log(window.speechSynthesis.getVoices());
	var voices = window.speechSynthesis.getVoices();
	if (!voices || !voices.length || update_voices_done) {
		return;
	}
	update_voices_done = true; // prevent updating twice.
	console.table(voices);

	select_voice.innerHTML = '<option value="">default</option>';
	voices.forEach(function(voice, i) {
 		var option = document.createElement('option');
//		option.text = i + ' ' + voice.lang + ' ' + voice.name + ' ' + voice.voiceURI + ' ' + (voice.localService?'local':'') + ' ' + (voice.default?'default':'');
		option.text = i + ' ' +...