From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/speechsynthesisutterance/index.html | 133 +++++++++++++++++++++ .../api/speechsynthesisutterance/voice/index.html | 77 ++++++++++++ 2 files changed, 210 insertions(+) create mode 100644 files/zh-cn/web/api/speechsynthesisutterance/index.html create mode 100644 files/zh-cn/web/api/speechsynthesisutterance/voice/index.html (limited to 'files/zh-cn/web/api/speechsynthesisutterance') diff --git a/files/zh-cn/web/api/speechsynthesisutterance/index.html b/files/zh-cn/web/api/speechsynthesisutterance/index.html new file mode 100644 index 0000000000..7b48cadaed --- /dev/null +++ b/files/zh-cn/web/api/speechsynthesisutterance/index.html @@ -0,0 +1,133 @@ +--- +title: SpeechSynthesisUtterance +slug: Web/API/SpeechSynthesisUtterance +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Reference + - SpeechSynthesisUtterance + - TopicStub + - Web Speech API + - speech + - synthesis +translation_of: Web/API/SpeechSynthesisUtterance +--- +

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

+ +

The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)

+ +

Constructor

+ +
+
{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}
+
Returns a new SpeechSynthesisUtterance object instance.
+
+ +

Properties

+ +

SpeechSynthesisUtterance also inherits properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesisUtterance.lang")}}
+
Gets and sets the language of the utterance.
+
{{domxref("SpeechSynthesisUtterance.pitch")}}
+
Gets and sets the pitch at which the utterance will be spoken at.
+
{{domxref("SpeechSynthesisUtterance.rate")}}
+
Gets and sets the speed at which the utterance will be spoken at.
+
{{domxref("SpeechSynthesisUtterance.text")}}
+
Gets and sets the text that will be synthesised when the utterance is spoken.
+
{{domxref("SpeechSynthesisUtterance.voice")}}
+
Gets and sets the voice that will be used to speak the utterance.
+
{{domxref("SpeechSynthesisUtterance.volume")}}
+
Gets and sets the volume that the utterance will be spoken at.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
boundary
+
Fired when the spoken utterance reaches a word or sentence boundary.
+ Also available via the onboundary property.
+
end
+
Fired when the utterance has finished being spoken.
+ Also available via the onend property.
+
error
+
Fired when an error occurs that prevents the utterance from being succesfully spoken.
+ Also available via the onerror property
+
mark
+
Fired when the spoken utterance reaches a named SSML "mark" tag.
+ Also available via the onmark property.
+
pause
+
Fired when the utterance is paused part way through.
+ Also available via the onpause property.
+
resume
+
Fired when a paused utterance is resumed.
+ Also available via the onresume property.
+
start
+
Fired when the utterance has begun to be spoken.
+ Also available via the onstart property.
+
+ +

Examples

+ +

In our basic Speech synthesiser demo (source), we first grab a reference to the SpeechSynthesis controller using window.speechSynthesis. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.

+ +

Inside the inputForm.onsubmit handler, we stop the form submitting with {{domxref("Event.preventDefault","preventDefault()")}}, use the {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} to create a new utterance instance containing the text from the text {{htmlelement("input")}}, set the utterance's {{domxref("SpeechSynthesisUtterance.voice","voice")}} to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.

+ +
var synth = window.speechSynthesis;
+var voices = synth.getVoices();
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+for(var i = 0; i < voices.length; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.value = i;
+  voiceSelect.appendChild(option);
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  utterThis.voice = voices[voiceSelect.value];
+  synth.speak(utterThis);
+  inputTxt.blur();
+}
+ +

Specifications

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

Browser compatibility

+ +
+ + +

{{Compat("api.SpeechSynthesisUtterance")}}

+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/speechsynthesisutterance/voice/index.html b/files/zh-cn/web/api/speechsynthesisutterance/voice/index.html new file mode 100644 index 0000000000..3295efbbbf --- /dev/null +++ b/files/zh-cn/web/api/speechsynthesisutterance/voice/index.html @@ -0,0 +1,77 @@ +--- +title: SpeechSynthesisUtterance.voice +slug: Web/API/SpeechSynthesisUtterance/voice +translation_of: Web/API/SpeechSynthesisUtterance/voice +--- +
<trans newtip="{{APIRef(“Web语音API”)}}{SeeCompattable}" oldtip="{{APIRef("Web Speech API")}}{{SeeCompatTable}}">{{APIRef(“Web语音API”)}}{SeeCompattable}</trans>
+ +

The voice property of the {{domxref("SpeechSynthesisUtterance")}} interface gets and sets the voice that will be used to speak the utterance.

+ +

This should be set to one of the {{domxref("SpeechSynthesisVoice")}} objects returned by {{domxref("SpeechSynthesis.getVoices()")}}. If not set by the time the utterance is spoken, the voice used will be the most suitable default voice available for the utterance's {{domxref("SpeechSynthesisUtterance.lang","lang")}} setting.

+ +

Syntax

+ +
var myVoice = speechSynthesisUtteranceInstance.voice;
+speechSynthesisUtteranceInstance.voice = speechSynthesisVoiceInstance;
+
+ +

Value

+ +

A {{domxref("SpeechSynthesisVoice")}} object.

+ +

Examples

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+  ...
+
+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];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API', '#dom-speechsynthesisutterance-voice', 'voice')}}{{Spec2('Web Speech API')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.SpeechSynthesisUtterance.voice")}}

+
+ +

See also

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