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

Web Speech APISpeechSynthesis インターフェイスは、speech サービスのための制御インターフェイスです。これは、端末で利用可能な合成音声についての情報を取得するために使用されます。読み上げの開始および一時停止、他のコマンドで制御します。

プロパティ

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

SpeechSynthesis.paused 読取専用
真偽値SpeechSynthesis オブジェクトが一時停止状態の場合に true を返します。
SpeechSynthesis.pending 読取専用
真偽値。発声 (utterance) キューにまだ発話されていないものがある場合に true を返します。
SpeechSynthesis.speaking 読取専用
真偽値SpeechSynthesis が一時停止状態であっても、発声が現在発話処理中の場合に true を返します。

イベントハンドラー

SpeechSynthesis.onvoiceschanged
SpeechSynthesis.getVoices() メソッドにより返される SpeechSynthesisVoice オブジェクトのリストが変更された時に発火します。

メソッド

SpeechSynthesis は、その親インターフェイスである EventTarget からのメソッドも継承します。

SpeechSynthesis.cancel()
すべての発声を発声キューから削除します。
SpeechSynthesis.getVoices()
現在の端末上のすべての利用可能な音声を表す、SpeechSynthesisVoice オブジェクトのリストを返します。
SpeechSynthesis.pause()
SpeechSynthesis オブジェクトを一時停止状態にします。
SpeechSynthesis.resume()
SpeechSynthesis オブジェクトを一時停止でない状態にします。つまり、一時停止状態であった場合に再開します。
SpeechSynthesis.speak()
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('.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();
}

仕様

仕様書 策定状況 備考
Web Speech API
SpeechSynthesis の定義
ドラフト  

ブラウザーの実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?
cancel
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?
getVoices
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?
onvoiceschanged
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 4.4.3Chrome 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 未対応 なしSamsung Internet Android ?
pause
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?
paused
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?
pending
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?
resume
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?
speak
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?
speaking
実験的
Chrome 完全対応 33Edge 完全対応 ありFirefox 完全対応 49IE 未対応 なしOpera 完全対応 21Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome 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 ?

凡例

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

関連項目

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

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