<h1>Web Speech API 音声合成テスト</h1>
<input type="text" placeholder="入力してください" value="オタク" class="input-text" />
<input type="button" value="喋らせる" class="button" />
document.querySelector('.button').onclick = () => {
  var u = new SpeechSynthesisUtterance();
  u.text = document.querySelector('.input-text').value; // 発話する内容を指定する
  u.lang = 'ja-JP'; // 言語を指定する
  u.rate = 1.0; // 発話速度を指定する
  speechSynthesis.speak(u); // 喋らせる
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.