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

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

+ +

Web Speech API の SpeechSynthesisUtterance インターフェイスは、発話リクエストを表します。これには、speech サービスが読み上げるコンテンツと、その読み上げ方についての情報 (言語、音の高低、音量) が含まれます。

+ +

コンストラクター

+ +
+
{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}
+
新しい SpeechSynthesisUtterance オブジェクトのインスタンスを返します。
+
+ +

プロパティ

+ +

SpeechSynthesisUtterance は、その親インターフェイスである {{domxref("EventTarget")}} からのプロパティも継承します。

+ +
+
{{domxref("SpeechSynthesisUtterance.lang")}}
+
utterance (発声) の言語を取得または設定します。
+
{{domxref("SpeechSynthesisUtterance.pitch")}}
+
utterance が発話される際のピッチ (音の高低) を取得または設定します。
+
{{domxref("SpeechSynthesisUtterance.rate")}}
+
utterance が発話される際の速度を取得または設定します。
+
{{domxref("SpeechSynthesisUtterance.text")}}
+
utterance が発話される際の合成されるテキストを取得または設定します。
+
{{domxref("SpeechSynthesisUtterance.voice")}}
+
utterance の発話に使用される音声を取得または設定します。
+
{{domxref("SpeechSynthesisUtterance.volume")}}
+
utterance が発話される際の音量を取得または設定します。
+
+ +

イベントハンドラー

+ +
+
{{domxref("SpeechSynthesisUtterance.onboundary")}}
+
発話された utterance が単語または文の境界に達した時に発火します。
+
{{domxref("SpeechSynthesisUtterance.onend")}}
+
utterance の発話が完了した時に発火します。
+
{{domxref("SpeechSynthesisUtterance.onerror")}}
+
utterance の正常な発話を妨げるエラーが発生した時に発火します。
+
{{domxref("SpeechSynthesisUtterance.onmark")}}
+
発話された utterance が SSML (音声合成マークアップ言語) の "mark" タグに達した時に発火します。
+
{{domxref("SpeechSynthesisUtterance.onpause")}}
+
utterance の発話が途中で一時停止された時に発火します。
+
{{domxref("SpeechSynthesisUtterance.onresume")}}
+
一時停止された utterance の発話が再開された時に発火します。
+
{{domxref("SpeechSynthesisUtterance.onstart")}}
+
utterance の発話が開始された時に発火します。
+
+ +

例

+ +

私たちの基本的な 音声合成のデモ では、最初に window.speechSynthesis を使用して SpeechSynthesis コントローラーへの参照を取得します。必要な変数の定義後、 {{domxref("SpeechSynthesis.getVoices()")}} を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。

+ +

inputForm.onsubmit ハンドラー内部では、preventDefault() でフォーム送信を停止し、テキスト {{htmlelement("input")}} に入力されたテキストを含む新しい {{domxref("SpeechSynthesisUtterance")}} インスタンスを作成します。その発声にユーザーが {{htmlelement("select")}} 要素で選択した音声を設定し、{{domxref("SpeechSynthesis.speak()")}} メソッドを通して発声の発話を開始します。

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+for(i = 0; i < voices.length ; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.setAttribute('data-lang', voices[i].lang);
+  option.setAttribute('data-name', voices[i].name);
+  voiceSelect.appendChild(option);
+}
+
+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();
+}
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}{{Spec2('Web Speech API')}}
+ +

ブラウザーの実装状況

+ +
+ + +

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

+
+ +

関連項目

+ + diff --git a/files/ja/web/api/speechsynthesisutterance/lang/index.html b/files/ja/web/api/speechsynthesisutterance/lang/index.html new file mode 100644 index 0000000000..97353d9c61 --- /dev/null +++ b/files/ja/web/api/speechsynthesisutterance/lang/index.html @@ -0,0 +1,131 @@ +--- +title: SpeechSynthesisUtterance.lang +slug: Web/API/SpeechSynthesisUtterance/lang +translation_of: Web/API/SpeechSynthesisUtterance/lang +--- +
{{APIRef("Web Speech API")}} {{SeeCompatTable}}
+{{domxref("SpeechSynthesisUtterance")}}インターフェースのlangプロパティは、発話の言語を取得、設定します。
+ +
 
+ +

 

+ +

If unset, the app's (i.e. the {{htmlelement("html")}} {{htmlattrxref("lang", "html")}} value) lang will be used, or the user-agent default if that is unset too.

+ +

Syntax

+ +
var myLang = speechSynthesisUtteranceInstance.lang;
+speechSynthesisUtteranceInstance.lang = 'en-US';
+
+ +

Value

+ +

A {{domxref("DOMString")}} representing a BCP 47 language tag.

+ +

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];
+    }
+  }
+  utterThis.lang = 'en-US';
+  synth.speak(utterThis);
+  inputTxt.blur();
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API', '#dfn-utterancelang', 'lang')}}{{Spec2('Web Speech API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(33)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatUnknown}}7
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}2.0{{CompatNo}}{{CompatNo}}7.1
+
+ +

See also

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