aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/speechsynthesis/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/api/speechsynthesis/index.html')
-rw-r--r--files/zh-cn/web/api/speechsynthesis/index.html137
1 files changed, 137 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/speechsynthesis/index.html b/files/zh-cn/web/api/speechsynthesis/index.html
new file mode 100644
index 0000000000..6ea88763e6
--- /dev/null
+++ b/files/zh-cn/web/api/speechsynthesis/index.html
@@ -0,0 +1,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 &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;
+}
+
+inputForm.onsubmit = function(event) {
+ event.preventDefault();
+
+ var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+ var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+ for(i = 0; i &lt; 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>