このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Window: speechSynthesis プロパティ
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年9月.
speechSynthesis は Window オブジェクトの読み取り専用プロパティで、SpeechSynthesis オブジェクトを返します。これは、ウェブ音声 API の音声合成機能を使用するためのエントリーポイントです。
値
SpeechSynthesis オブジェクト。
例
この基本的な 音声合成のデモ では、最初に window.speechSynthesis を使用して SpeechSynthesis コントローラーへの参照を取得します。いくつかの必要な変数を定義した後、SpeechSynthesis.getVoices() を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。
inputForm.onsubmit ハンドラー内部では、preventDefault() でフォーム送信を停止し、テキスト <input> に入力されたテキストを含む新しい SpeechSynthesisUtterance インスタンスを作成します。その発声 (utterance) にユーザーが <select> 要素で選択した音声を設定し、SpeechSynthesis.speak() メソッドを通して発声の発話を開始します。
const synth = window.speechSynthesis;
const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");
function populateVoiceList() {
voices = synth.getVoices();
for (const voice of voices) {
const option = document.createElement("option");
option.textContent = `${voice.name} (${voice.lang})`;
if (voice.default) {
option.textContent += " — DEFAULT";
}
option.setAttribute("data-lang", voice.lang);
option.setAttribute("data-name", voice.name);
voiceSelect.appendChild(option);
}
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
inputForm.onsubmit = (event) => {
event.preventDefault();
const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
const selectedOption =
voiceSelect.selectedOptions[0].getAttribute("data-name");
utterThis.voice = voices.find((v) => v.name === selectedOption);
synth.speak(utterThis);
inputTxt.blur();
};
仕様書
| Specification |
|---|
| Web Speech API # tts-section |
ブラウザーの実装状況
Enable JavaScript to view this browser compatibility table.