文字を入力すると翻訳して喋る

2024年3月25日

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

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

今回は「文字を入力すると英訳して喋ってくれる」機能に挑戦してみようと思います。アプリでええやん

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

合体

というわけで喋る機能と日本語を英訳する機能を合体ガッチャンコさせてみましょう。

<input type="text" id="jatext" placeholder="日本語を入力してください">

<input type="button" value="翻訳" onclick="output()">

<input type="text" id="entext" placeholder="ここに翻訳結果が出ます">

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

const API_KEY = 'ここにAPIキーを入れます';
const API_URL = 'https://api-free.deepl.com/v2/translate';
function output() {
  const jatext = document.getElementById("jatext").value;
  let content = encodeURI('auth_key=' + API_KEY + '&text=' + jatext + '&source_lang=JA&target_lang=EN');
  let url = API_URL + '?' + content;
  fetch(url)
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Could not reach the API: " + response.statusText);
    }
  }).then(function(data) {
    document.getElementById("entext").value = data["translations"][0]["text"];
  }).catch(function(error) {
    document.getElementById("entext").value = error.message;
  });
};
            
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("entext").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);
});

ネイティブな発音にしよう

参考：WEB CREATES｜【JS】Web Speech APIの音声読み上げ機能の実装方法（日本語/英語読み上げ）

さっきの試作品でほぼ完成なのですが、英文を読み上げてもどうも日本語的な発音になってしまいます。

ネイティブな発音にするために、スクリプトを書き足します。

function speech(){
  const uttr = new SpeechSynthesisUtterance(document.getElementById("entext").value);
  uttr.rate=1.0;
  uttr.pitch=1.0; 
  uttr.lang = 'en-US';
  window.speechSynthesis.cancel();
  window.speechSynthesis.speak(uttr);

  for (let i = 0; i < voices.length; i++) {
    if (voices[i].lang === 'en-US') {
      uttr.voice = voices[i]
    }
  }
}

まとめ

なんていい発音！