blob: 6ea88763e6082b89429b5023bdf828f1eb999213 (
plain)
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: SpeechSynthesis
slug: Web/API/SpeechSynthesis
tags:
- API
- Experimental
- Interface
- SpeechSynthesis
- Web Speech API
- speech
translation_of: Web/API/SpeechSynthesis
---
<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
<p> <a href="/en-US/docs/Web/API/Web_Speech_API">网页语音 API</a> 的<strong><code>SpeechSynthesis</code></strong> 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。</p>
<h2 id="属性">属性</h2>
<p><em><code>SpeechSynthesis</code> 也从它的父接口继承属性, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}</dt>
<dd>当<code>SpeechSynthesis</code> 处于暂停状态时， {{domxref("Boolean")}} 值返回 <code>true</code> 。</dd>
<dt>{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}</dt>
<dd>当语音播放队列到目前为止保持没有说完的语音时， {{domxref("Boolean")}} 值返回 <code>true</code> 。</dd>
<dt>{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}</dt>
<dd>当语音谈话正在进行的时候，即使<code>SpeechSynthesis</code>处于暂停状态， {{domxref("Boolean")}} 返回 <code>true</code> 。</dd>
</dl>
<h3 id="事件操作">事件操作</h3>
<dl>
<dt>{{domxref("SpeechSynthesis.onvoiceschanged")}}</dt>
<dd>当由{{domxref("SpeechSynthesis.getVoices()")}}方法返回的{{domxref("SpeechSynthesisVoice")}}列表改变时触发。</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em><code>SpeechSynthesis</code> 也从它的父接口继承方法， {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("SpeechSynthesis.cancel()")}}</dt>
<dd>移除所有语音谈话队列中的谈话。</dd>
<dt>{{domxref("SpeechSynthesis.getVoices()")}}</dt>
<dd>返回当前设备所有可用声音的 {{domxref("SpeechSynthesisVoice")}}列表。</dd>
<dt>{{domxref("SpeechSynthesis.pause()")}}</dt>
<dd>把 <code>SpeechSynthesis</code> 对象置为暂停状态。</dd>
<dt>{{domxref("SpeechSynthesis.resume()")}}</dt>
<dd>把 <code>SpeechSynthesis</code> 对象置为一个非暂停状态：如果已经暂停了则继续。</dd>
<dt>{{domxref("SpeechSynthesis.speak()")}}</dt>
<dd>添加一个 {{domxref("SpeechSynthesisUtterance", "utterance")}} 到语音谈话队列；它将会在其他语音谈话播放完之后播放。</dd>
</dl>
<h2 id="示例">示例</h2>
<p>在我们基础的 <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Speech synthesiser演示中 </a>，我们第一次用 <code>window.speechSynthesis</code>抓取了关于语音播放控制器的参考。在定义了一些必要的变量后，我们用 {{domxref("SpeechSynthesis.getVoices()")}}获取了一列可用的声音并且用它们生成一列可选表单，这样用户能够选择他们想要的声音。</p>
<p> <code>inputForm.onsubmit</code> 的内部操作中，我们用<a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>阻止了表单的提交，创建了一个从{{htmlelement("input")}}文本框获取文本的新{{domxref("SpeechSynthesisUtterance")}}实例，在{{htmlelement("select")}}元素可选的声音设置成语音谈话的voice属性，然后通过{{domxref("SpeechSynthesis.speak()")}}方法开始语音播放。</p>
<pre class="brush: js">var synth = window.speechSynthesis;
var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');
var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');
var voices = [];
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];
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
inputTxt.blur();
}</pre>
<h2 id="特性">特性</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', '#tts-section', 'SpeechSynthesis')}}</td>
<td>{{Spec2('Web Speech API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<div>{{Compat("api.SpeechSynthesis")}}</div>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
</ul>
|
