espdb/speak.html at master · krzydyn/espdb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<!--
 https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.htm
 https://codepen.io/matt-west/pen/wGzuJ
 -->
<body>
<form action="#">
<input type="text" value="Llegar donde hay mucho maiz">
<select>
</select>
<button type="submit">Say It</button>
</form>

<script type="text/javascript">
var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');

var populateDone=0;
function populateVoiceList() {
  voices = synth.getVoices();
  for(i = populateDone; i < voices.length ; i++) {
    var option = document.createElement('option');
    var name = voices[i].name.replace('Google','');

   if(voices[i].default) {
        option.textContent = '['+name + ' (' + voices[i].lang + ')]';
    }
    else {
        option.textContent = name + ' (' + voices[i].lang + ')';
    }

    option.setAttribute('data-lang', voices[i].lang);
    option.setAttribute('data-name', voices[i].name);
    voiceSelect.appendChild(option);
	}
	populateDone=voices.length;
}

populateVoiceList();
if (synth.onvoiceschanged !== undefined) {
  synth.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) {
		console.log(voices[i]);
		utterThis.lang = voices[i].lang;
		utterThis.voiceURL = voices[i].voiceURI;
		console.log(voices[i].name+':'+utterThis.lang+':'+utterThis.voiceURL);
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
}
</script>

</body></html>