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

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 の定義
ドラフト  

ブラウザの互換性

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,