Window.speechSynthesis

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

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

 

WindowオブジェクトのspeechSynthesis読み取り専用プロパティは、 SpeechSynthesis オブジェクトを返します。これは、Web Speech APIの音声合成機能を使用するためのエントリポイントです。

構文

var synth = window.speechSynthesis;

SpeechSynthesis オブジェクト

基本的なSpeechシンセサイザーのデモでは、まず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');


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];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
}

仕様

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

ブラウザの互換性

特徴 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,