diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/speechsynthesis | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/speechsynthesis')
-rw-r--r-- | files/zh-cn/web/api/speechsynthesis/getvoices/index.html | 93 | ||||
-rw-r--r-- | files/zh-cn/web/api/speechsynthesis/index.html | 137 | ||||
-rw-r--r-- | files/zh-cn/web/api/speechsynthesis/paused/index.html | 109 |
3 files changed, 339 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/speechsynthesis/getvoices/index.html b/files/zh-cn/web/api/speechsynthesis/getvoices/index.html new file mode 100644 index 0000000000..5d66a40799 --- /dev/null +++ b/files/zh-cn/web/api/speechsynthesis/getvoices/index.html @@ -0,0 +1,93 @@ +--- +title: SpeechSynthesis.getVoices() +slug: Web/API/SpeechSynthesis/getVoices +translation_of: Web/API/SpeechSynthesis/getVoices +--- +<div>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</div> + +<p>The <code><strong>getVoices()</strong></code> method of the {{domxref("SpeechSynthesis")}} interface returns a list of {{domxref("SpeechSynthesisVoice")}} objects representing all the available voices on the current device.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">speechSynthesisInstance.getVoices(); +</pre> + +<h3 id="参数">参数</h3> + +<p>None.</p> + +<h3 id="返回值">返回值</h3> + +<p>返回一个类型为{{domxref("SpeechSynthesisVoice")}} 的数组(array)列表(list)。</p> + +<div class="note"> +<p><strong>Note</strong>: 使用此方法会返回存在错误规范的<code>SpeechSynthesisVoiceList</code> 对象, 可能已被从现有规范中移除。</p> +</div> + +<h2 id="示例">示例</h2> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function populateVoiceList() { + if(typeof speechSynthesis === 'undefined') { + return; + } + + voices = speechSynthesis.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); + document.getElementById("voiceSelect").appendChild(option); + } +} + +populateVoiceList(); +if (typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) { + speechSynthesis.onvoiceschanged = populateVoiceList; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><select id="voiceSelect"></select> +</pre> + +<p>{{EmbedLiveSample("Example", 400, 25)}}</p> + +<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', '#dfn-ttsgetvoices', 'getVoices()')}}</td> + <td>{{Spec2('Web Speech API')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.SpeechSynthesis.getVoices")}}</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> 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 < 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> diff --git a/files/zh-cn/web/api/speechsynthesis/paused/index.html b/files/zh-cn/web/api/speechsynthesis/paused/index.html new file mode 100644 index 0000000000..f4c4f78f3c --- /dev/null +++ b/files/zh-cn/web/api/speechsynthesis/paused/index.html @@ -0,0 +1,109 @@ +--- +title: SpeechSynthesis.paused +slug: Web/API/SpeechSynthesis/paused +translation_of: Web/API/SpeechSynthesis/paused +--- +<div>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</div> + +<p> {{domxref("SpeechSynthesis")}} 接口的只读属性 <strong><code>paused</code></strong> 是一个 {{domxref("Boolean")}} 值,当<code>SpeechSynthesis</code>对象处于暂停状态时,返回<code>true</code> ,否则返回 <code>false。</code></p> + +<p>它能被设置为 {{domxref("SpeechSynthesis.pause()", "暂停状态")}} 即使当前并没有语音在播放队列中。如果{{domxref("SpeechSynthesisUtterance","utterances")}} 被添加到语音播放队列,队列中的语音并不会播放直到使用 {{domxref("SpeechSynthesis.resume()")}}使<code>SpeechSynthesis</code>对象处于非暂停状态。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var amIPaused = speechSynthesisInstance.paused; +</pre> + +<h3 id="Value">Value</h3> + +<p>一个{{domxref("Boolean")}}。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var synth = window.speechSynthesis; + +synth.pause(); + +var amIPaused = synth.paused; // 将返回 true +</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', '#dfn-ttspaused', 'paused')}}</td> + <td>{{Spec2('Web Speech API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器通用性">浏览器通用性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(33)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>7</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>2.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="请参阅">请参阅</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li> +</ul> |