文字を入力すると喋る

2024年3月6日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「文字を入力すると喋ってくれる」機能に挑戦してみようと思います。

※スマホのマナーモードにしていても、本体の音量設定に準じて音が出ますので、電車やバスの中では特にご注意ください。

実装

参考：Javascript、Delphi、Javascript、CSS、PHPソースコードサンプル集、無料素材集｜Javascriptで文字列をブラウザに話させる（しゃべらせる）

とりあえず上記サイトを真似してやってみましょう。

まずは文字入力欄と「話す」ボタンを設置します。入力欄のIDをspeech_text、ボタンのIDをspeech_buttonとしておきます。

<input type="text" id="speech_text" placeholder="文字を入力してください">

<input type="button" id="speech_button" value="話す">

以下のスクリプトを記述します。

var voices = [];

if(window.speechSynthesis.onvoiceschanged==null){
  window.speechSynthesis.onvoiceschanged = function(){
    voices = window.speechSynthesis.getVoices();
  }
}else{
  voices = window.speechSynthesis.getVoices();
}

function speech(){
  const uttr = new SpeechSynthesisUtterance(document.getElementById("speech_text").value);
  uttr.rate=1.0;
  uttr.pitch=1.0;  
  uttr.voice=window.speechSynthesis.getVoices().filter(voice => voice.name==='Google 日本語')[0];
  window.speechSynthesis.cancel();
  window.speechSynthesis.speak(uttr);
}

window.addEventListener("load",function(){
  document.getElementById("speech_button").addEventListener("click",speech);
});

まとめ

これ、日本語を入力したらそれを英語に翻訳してから喋ってくれたりしないかなあ。