Javascriptで文字列をブラウザに話させる（しゃべらせる）

Javascriptで文字列をブラウザに話させる（しゃべらせる）

window.speechSynthesis.speak() を使用するとブラウザに音声読み上げさせることができます。

話させたい文字を入力して「話す」ボタンを押すと話します

ソースコード

<input type="text" id="speech_text" value="ここに入力した文字列をブラウザがしゃべります。" size="50"><br>
<input type="button" id="speech_button" value="話す"> 			

<script>
var voices = [];
//事前に音声一覧を取得する
if(window.speechSynthesis.onvoiceschanged==null){
  window.speechSynthesis.onvoiceschanged = function(){
    voices = window.speechSynthesis.getVoices();
    //音声一覧をコンソールログに出力する場合
    for(i=0;i<voices.length;i++){
      console.log(voices[i].name);
    }
  }
}else{
  voices = window.speechSynthesis.getVoices();
  //音声一覧をコンソールログに出力する場合
  for(i=0;i<voices.length;i++){
    console.log(voices[i].name);
  }
}
function speech(){
  const uttr = new SpeechSynthesisUtterance(document.getElementById("speech_text").value);
  // 話す速度 0.0(遅い)～1.0(標準)～2.0(速い)
  uttr.rate=1.0;
  // ピッチ（声の高さ） 0.0(低め)～1.0(標準)～2.0(高め)
  uttr.pitch=1.0;
  // お話が完了したときの関数
  uttr.onend=function(){
    //alert("お話終了");
  }

  //日本語の音声は、以下のような値から選べる。選ばない場合はデフォルト設定
  /*
  uttr.voice=window.speechSynthesis.getVoices().filter(
    voice => voice.name==='Microsoft Haruka Desktop - Japanese' //FireFox,Chrome
    //voice => voice.name==='Microsoft Nanami Online (Natural) - Japanese (Japan)' //Edgeのみ可
    //voice => voice.name==='Microsoft Ayumi - Japanese (Japan)' //Edge,Chromeのみ可
    //voice => voice.name==='Microsoft Haruka - Japanese (Japan)' //Edge,Chromeのみ可
    //voice => voice.name==='Microsoft Ichiro - Japanese (Japan)' //Edge,Chromeのみ可
    //voice => voice.name==='Microsoft Sayaka - Japanese (Japan)' //Edge,Chromeのみ可
    //voice => voice.name==='Google 日本語' //Chromeのみ可
  )[0];
  */

  window.speechSynthesis.cancel();
  // お話しする
  window.speechSynthesis.speak(uttr);

  //お話の一時停止
  //window.speechSynthesis.pause();
  //お話の再開
  //window.speechSynthesis.resume();
  //お話の終了
  //window.speechSynthesis.cancel();
}
window.addEventListener("load",function(){
  //ボタンを押すと「speech」関数を呼び出す
  document.getElementById("speech_button").addEventListener("click",speech);
});
</script>