files/id/web/api/speechsynthesis/onvoiceschanged/index.html


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
66
67
68
69
70
71
72
73
74

---
title: Kk
slug: Web/API/SpeechSynthesis/onvoiceschanged
translation_of: Web/API/SpeechSynthesis/onvoiceschanged
---
<div>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</div>

<p>The <code><strong>onvoiceschanged</strong></code> property of the {{domxref("SpeechSynthesis")}} interface represents an event handler that will run when the list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the <a href="/en-US/docs/Web/API/SpeechSynthesis/voiceschanged_event">voiceschanged</a> event fires.)</p>

<p>This may occur when speech synthesis is being done on the server-side and the voices list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis application is running.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">speechSynthesisInstance.onvoiceschanged = function() { ... };
</pre>

<h2 id="Examples">Examples</h2>

<p>This could be used to populate a list of voices that the user can choose between when the event fires (see our <a href="https://github.com/mdn/web-speech-api/blob/gh-pages/speak-easy-synthesis/script.js">Speak easy synthesis demo</a>.) Note that Firefox doesn't support it at present, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the bottom if statement seen below.</p>

<pre class="brush: js">var voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for(i = 0; i &lt; 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;
}</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Speech API', '#dom-speechsynthesis-onvoiceschanged', 'onvoiceschanged')}}</td>
   <td>{{Spec2('Web Speech API')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>


<p>{{Compat("api.SpeechSynthesis.onvoiceschanged")}}</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
</ul>