0

発生している問題

音声認識のプログラムを書いています。終了ボタンを押しことで音声認識プログラムを終了させたいのですが、
音声認識が終了するたびに再スタートするループがあり、プログラムを終了することができません。

実現したいこと

音声認識終了を押したらプログラムが終了?初期化するようにしたいと考えています。

問題のコード

<body>
    <h1>音声認識</h1>
    <div id="japanese"></div>
    <p class="recognize-text">認識結果が表示されます</p>
    <button id="recognize">音声認識開始</button>
    <button id="recognize-end">音声認識終了</button>
    <div id="endMsg">入力完了と判定しました<br>入力:</div>
      <script>
        const textDisplay = document.querySelector('.recognize-text');
      
        try {
          // 音声認識
          window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
          const recognition = new webkitSpeechRecognition();
          recognition.lang = 'ja-JP';
          recognition.continuous = false;
          recognition.interimResults = false;
          var reset = recognition.onend;

          // 認識スタート
          recognition.onstart = (e)=>{
            textDisplay.textContent = "認識中";
            textDisplay.style.color = "#aaa"
            console.log('Speech recognition service started')
          }   

          // 認識終了
          recognition.onresult = (e)=> {
            const str = e.results[0][0].transcript;
            textDisplay.textContent = str;

            if(e.results[0].isFinal){
              console.log(str);
              document.getElementById("myobj").value = str;
              document.getElementById("myobj").dispatchEvent(new Event('input'));
            }
          }
          
          // スタートボタン
          document.querySelector('#recognize').onclick = (e)=>{
            recognition.start();
          }

          // リセットループ
          recognition.onend = (e)=> { 
            console.log('reset')
            textDisplay.textContent = "認識完了";
            textDisplay.style.color = "#aaa"
            recognition.start();
          } 

          終了ボタン
          document.getElementById('recognize-end').onclick = (e)=>{
            document.getElementById("myobj").value = ""
            recognition.end();
          }

          recognition.onerror = function(event)  {
            console.log('音声認識エラーが検出されました:' + event.error);
          }
      
        } catch (error) {
          console.log(error);
        }
        </script>
        <input type="text" id="myobj" value="">
        <script>

        var myobj = document.getElementById("myobj");
        myobj.oninput = myfunc;
        var gTimer;
        function myfunc() {
            // =========================================================
            //   入力の度に実行される
            //     入力完了までタイマーで実行待ちする
            //     タイマーまでに次の入力があると、再度タイマー設定
            // =========================================================
            // --- サンプル用 メッセージ出力 -------------------
            var wObj = document.getElementById("endMsg");
            wObj.innerHTML = '入力中です';
            wObj.className = 'defStyle runStyle';
            // =============================================
            //   一定時間を待って入力完了と判断 
            // =============================================
            if(gTimer){clearTimeout(gTimer);}
            gTimer = setTimeout(inputEnd, 800);
        }
        function inputEnd(){
        // =========================================================
        //   タイマー時間経過で入力完了と判断
        // =========================================================
            // サンプル用の処理です。入れ替えて利用ください
            // 入力完了後のメッセージ入れ替え
            var wObj    = document.getElementById("endMsg");
            wObj.innerHTML = '入力完了と判定しました<br>入力:'+document.getElementById("myobj").value;
            wObj.className = 'defStyle endStyle';
        }
      </script>
  </body>

1 件の回答 1

0

既にお気づきのとおり、以下の部分において認識が終わったタイミングで recognition.start() してしまっているため、無限にループして認識が行われるようになってしまっています。ここに終了条件を書くか、そもそもループしないようにすべきです。Web Speech API を連続的に使用するために繰り返したいのであればループを消したくないでしょうから、状態の情報を持っている変数か何かを使って終了条件を作るのが良さそうです。

// リセットループ
recognition.onend = (e)=> { 
  console.log('reset')
  textDisplay.textContent = "認識完了";
  textDisplay.style.color = "#aaa"
  recognition.start();
} 

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。