これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

コンストラクター

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

プロパティ

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

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

イベントハンドラー

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

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

inputForm.onsubmit ハンドラー内部では、preventDefault() でフォーム送信を停止し、テキスト <input> に入力されたテキストを含む新しい SpeechSynthesisUtterance インスタンスを作成します。その発声にユーザーが <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 の定義
ドラフト

ブラウザーの実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
SpeechSynthesisUtterance() constructor
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
lang
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
onboundary
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
onend
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
onerror
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
onmark
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
onpause
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
onresume
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
onstart
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
pitch
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
rate
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
text
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
voice
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?
volume
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 未対応 なしChrome Android 完全対応 33Edge Mobile 完全対応 ありFirefox Android 完全対応 62
完全対応 62
未対応 61 — 62
無効
無効 From version 61 until version 62 (exclusive): this feature is behind the media.webspeech.synth.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 7.1Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連項目

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

このページの貢献者: mdnwebdocs-bot, Marsf, iccha
最終更新者: mdnwebdocs-bot,