We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

この翻訳は不完全です。英語から この記事を翻訳 してください。

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

Web Speech APIのSpeechSynthesisUtteranceインターフェイスは、音声要求を表現します。これには、音声サービスが読むべき内容とその読み方に関する情報(例えば、言語、ピッチ、音量など)が含まれています。

コンストラクタ

SpeechSynthesisUtterance.SpeechSynthesisUtterance()
新しいSpeechSynthesisUtteranceオブジェクトインスタンスを返します。

プロパティ

SpeechSynthesisUtteranceは親インタフェースEventTargetからプロパティを継承します。

SpeechSynthesisUtterance.lang
発話の言語を取得および設定します。
SpeechSynthesisUtterance.pitch
発話される音程を取得または設定します。
SpeechSynthesisUtterance.rate
発話される速度を取得および設定します。
SpeechSynthesisUtterance.text
発話したときに合成されるテキストを取得または設定します。
SpeechSynthesisUtterance.voice
発話のために使用される音声を取得して設定します。
SpeechSynthesisUtterance.volume
発話される音量を取得または設定します。

イベントハンドラ

SpeechSynthesisUtterance.onboundary
発話が単語または文の境界に達するとイベントが発生する。
SpeechSynthesisUtterance.onend
発話が終わったらイベントが発生する。
SpeechSynthesisUtterance.onerror
発話が正常に行われないようなエラーが発生した場合にイベントが発生する。
SpeechSynthesisUtterance.onmark
発話がSSML(音声合成マークアップ言語)の「mark」要素タグに到達するとイベントが発生する。
SpeechSynthesisUtterance.onpause
発話が途中で中断されたときにイベントが発生する。
SpeechSynthesisUtterance.onresume
一時停止した発話が再開されたときにイベントが発生する。
SpeechSynthesisUtterance.onstart
発声が始まったときにイベントが発生する。

基本的なSpeechシンセサイザーのデモでは、まずwindow.speechSynthesisを使用してSpeechSynthesisコントローラーへの参照を取得します。いくつかの必要な変数を定義した後、私たちはSpeechSynthesis.getVoices()を使用して利用可能なボイスのリストを取得し、ユーザーが希望するボイスを選択できるようにセレクトメニューを設定します。

inputForm.onsubmitハンドラの内部では、preventDefault()でフォーム送信を停止します。constructorは、<input>要素からのテキストを含む、新しい発話インスタンスを生成します。

voiceでは<select>要素で選択された発声を、発話側に設定してから、 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();
}

仕様

仕様 状態 コメント
Web Speech API
SpeechSynthesisUtterance の定義
ドラフト  

ブラウザの互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本的なサポート 33 (有) 49 (49) 未サポート (有) 7
機能 Android Chrome Edge Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
基本的なサポート (有) (有) (有) 未サポート 2.0 未サポート 未サポート 7.1

こちらもご覧ください

ドキュメントのタグと貢献者

このページの貢献者: iccha
最終更新者: iccha,