From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/speechsynthesis/index.html | 137 +++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 files/zh-cn/web/api/speechsynthesis/index.html (limited to 'files/zh-cn/web/api/speechsynthesis/index.html') 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 +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

 网页语音 API 的SpeechSynthesis 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。

+ +

属性

+ +

SpeechSynthesis 也从它的父接口继承属性, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}
+
当SpeechSynthesis 处于暂停状态时， {{domxref("Boolean")}} 值返回 true 。
+
{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}
+
当语音播放队列到目前为止保持没有说完的语音时， {{domxref("Boolean")}} 值返回 true 。
+
{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}
+
当语音谈话正在进行的时候，即使SpeechSynthesis处于暂停状态， {{domxref("Boolean")}} 返回 true 。
+
+ +

事件操作

+ +
+
{{domxref("SpeechSynthesis.onvoiceschanged")}}
+
当由{{domxref("SpeechSynthesis.getVoices()")}}方法返回的{{domxref("SpeechSynthesisVoice")}}列表改变时触发。
+
+ +

方法

+ +

SpeechSynthesis 也从它的父接口继承方法， {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesis.cancel()")}}
+
移除所有语音谈话队列中的谈话。
+
{{domxref("SpeechSynthesis.getVoices()")}}
+
返回当前设备所有可用声音的 {{domxref("SpeechSynthesisVoice")}}列表。
+
{{domxref("SpeechSynthesis.pause()")}}
+
把 SpeechSynthesis 对象置为暂停状态。
+
{{domxref("SpeechSynthesis.resume()")}}
+
把 SpeechSynthesis 对象置为一个非暂停状态：如果已经暂停了则继续。
+
{{domxref("SpeechSynthesis.speak()")}}
+
添加一个 {{domxref("SpeechSynthesisUtterance", "utterance")}} 到语音谈话队列；它将会在其他语音谈话播放完之后播放。
+
+ +

示例

+ +

在我们基础的 Speech synthesiser演示中 ，我们第一次用 window.speechSynthesis抓取了关于语音播放控制器的参考。在定义了一些必要的变量后，我们用 {{domxref("SpeechSynthesis.getVoices()")}}获取了一列可用的声音并且用它们生成一列可选表单，这样用户能够选择他们想要的声音。

+ +

 inputForm.onsubmit 的内部操作中，我们用preventDefault()阻止了表单的提交，创建了一个从{{htmlelement("input")}}文本框获取文本的新{{domxref("SpeechSynthesisUtterance")}}实例，在{{htmlelement("select")}}元素可选的声音设置成语音谈话的voice属性，然后通过{{domxref("SpeechSynthesis.speak()")}}方法开始语音播放。

+ +
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();
+}
+ +

特性

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API', '#tts-section', 'SpeechSynthesis')}}{{Spec2('Web Speech API')}} 
+ +

浏览器兼容

+ +
{{Compat("api.SpeechSynthesis")}}
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf