Myu: 音声合成、音声認識

Windowsなどでは、なんとかなるが、WebGL（Unity）などでは、まだ発展途上のようだ。Html5などで、なんとかなるようだったので、試してみた。

https://www.petitmonte.com/javascript/web-speech-api.html

を参考にさせていただいた。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>きもち・おねがい　をはなそう</h1>
<form id="form_tts">
  <select id="mySelect" style="width:80%;font-size:24px;">
    <option>ありがとう、ございました</option>
    <option>かなしいです</option>
    <option>たのしいです</option>
    <option>びっくりしました</option>
    <option>ホールで、あそんでも、いいですか</option>
    <option>トイレを、おねがいしても、いいですか</option>
    <option>おはなししても、いいですか</option>
  </select>
  <input type="text" id="txt_tts" style="visibility:hidden">
  
  <!--

-->
  
  <select id="select_tts" style="visibility:hidden">
     <option data-lang="ja-JP" data-name="Google 日本語">Google 日本語 (ja-JP)</option>
    <option data-lang="ja-JP" data-name="Microsoft Sayaka - Japanese (Japan)">Microsoft Sayaka - Japanese (Japan) (ja-JP)</option>
   
  </select>
  <p></p>
  <button id="play" type="submit" style="font-size:36px;">おてほん</button>
</form>

<br><br>
<div>
<button id="btn_stt" style="font-size:36px;">はなしをきく</button>

>>><span id="output_stt" style="font-size:36px;color:red"></span>
  <p id="confidence_stt"></p>
</div>
 
<script>

function speakC(text){
 
    // 再生中
    if (synth.speaking) {
      console.log('再生をキャンセルしました。');
      synth.cancel();
    }
      
      var utterThis = new SpeechSynthesisUtterance(text);
      synth.speak(utterThis);
  
  }

// 再生
  function speak(){
 
    // 再生中
    if (synth.speaking) {
      console.log('再生をキャンセルしました。');
      synth.cancel();
    }
    
    
      var select = document.getElementById("mySelect");
  var input = document.getElementById("txt_tts");
     // 選択されたオプションの値を取得
  var selectedValue = select.value;
  // 入力フィールドに選択された値を設定
  input.value = selectedValue;
    
      
    if (txt_tts.value !== '') {
      var utterThis = new SpeechSynthesisUtterance(txt_tts.value);
        
      utterThis.onstart  = function (event) {
        console.log('再生を開始しました。');
      }        
      utterThis.onend = function (event) {
        console.log('再生が終了しました。');
        //speakC("再生Ｏｋ");
      }
      utterThis.onerror = function (event) {
        alert('エラーが発生しました。')
      }
 
      var selectedOption = select_tts.selectedOptions[0].getAttribute('data-name');
 /*     for(i = 0; i < voices.length ; i++) {
        if(voices[i].name === selectedOption) {
          utterThis.voice = voices[i];
          console.log(utterThis.voice)
          break;
        }
      }
      
      utterThis.pitch = pitch_tts.value;
      utterThis.rate = rate_tts.value;
      */
      synth.speak(utterThis);
    }
  }
  
  // 以下、イベント
  form_tts.onsubmit = function(event) {
    event.preventDefault();
    speak();
    txt_tts.blur();
  }
  
  /*
  pitch_tts.onchange = function() {
    document.getElementById('pitch-value-tts').innerHTML = pitch_tts.value;
  }
 
  rate_tts.onchange = function() {
    document.getElementById('rate-value-tts').innerHTML = rate_tts.value;
  }
  
 
  select_tts.onchange = function(){
    speak();
  }
  
  */
}else{
  alert('IE11には対応していません。\n※macOS/iOSのブラウザは未確認');
}

function shori(rest){
    var select = document.getElementById("mySelect");
  var selectedValue = select.value;
  var ans="";
switch (selectedValue) {
  case "ありがとう、ございました":
    ans="ありがとうございました";
    break;
  case "かなしいです":
    ans="悲しいです";
    break;
  case "たのしいです":
    ans="楽しいです";
    break;
  case "びっくりしました":
    ans="びっくりしました";
    break;
  case "ホールで、あそんでも、いいですか":
    ans="ホールで遊んでもいいですか";
    break;
  case "トイレを、おねがいしても、いいですか":
    ans="トイレをお願いしてもいいですか";
    break;
  case "おはなししても、いいですか":
    ans="お話してもいいですか";
    break;

default:
    break;
}

if (ans==rest){
   speakC("そうです。上手なはなしかたですね");
 }else{
   speakC("もういちど、はなしてもらえますか？");
 }

}

</script>

</body>
</html>

Myu

2023年6月24日土曜日

音声合成、音声認識

0 件のコメント:

コメントを投稿

ブログアーカイブ