Web Speech Synthesis API チートシート

Web Speech API の speechSynthesis インターフェースを使用すると、Web アプリケーションからテキストをもとに音声合成（読み上げ）を実行できます。

基本的な音声合成

const msg = new SpeechSynthesisUtterance('こんにちは、世界！');
window.speechSynthesis.speak(msg);

音声プロパティとイベントのカスタマイズ

const msg = new SpeechSynthesisUtterance('アプリケーションへようこそ');

msg.rate = 1.0;   // 速度: 0.1 〜 10 (デフォルト 1)
msg.pitch = 1.2;  // ピッチ(音高): 0 〜 2 (デフォルト 1)
msg.volume = 1.0; // 音量: 0 〜 1 (デフォルト 1)
msg.lang = 'en-US';

// イベントリスナー
msg.onstart = () => console.log('音声再生が開始されました');
msg.onend = () => console.log('音声再生が終了しました');
msg.onerror = (e) => console.error('音声再生エラー:', e);

window.speechSynthesis.speak(msg);

インストール済み音声の選択

window.speechSynthesis.onvoiceschanged = () => {
  const voices = window.speechSynthesis.getVoices();
  const selectedVoice = voices.find(v => v.lang === 'en-US' && v.name.includes('Google'));
  if (selectedVoice) {
    msg.voice = selectedVoice;
  }
};

再生コントロール

window.speechSynthesis.pause();   // 音声再生を一時停止
window.speechSynthesis.resume();  // 一時停止中の再生を再開
window.speechSynthesis.cancel();  // 再生を中断し、キューをクリア

参考リンク

• MDN: SpeechSynthesis
• MDN: SpeechSynthesisUtterance