音声のみでチャットメッセージを送信しよう

/**
 * ChatServerから送信されてきたメッセージを画面に表示します
 *（SocketIOClass.jsから呼び出される関数）
 */
function addMsgToScreen(msg, myUserId) {

    // msg.messageに格納されているテキストメッセージを画面に表示します
    // 処理が画面側の実装に依存するため、詳細は省略します

    const from = msg.from,
          isMyselfMessage = (from === myUserId);

    // 受信したテキストを読み上げます（自分が送信したメッセージの読み上げは行いません）
    if (!isMyselfMessage) {

        let synthesis = new SpeechSynthesisUtterance();

        synthesis.text = msg.message;
        speechSynthesis.speak(synthesis);
    }
}

'use strict'

$(function() {

 // チャットルームへの入室者情報を生成します
 const userId      = /* 入室ユーザのIDを取得します */,
       userName    = /* 入室ユーザの名前を取得します */,
       roomId      = /* 入室するチャットルームのIDを取得します */,
       joinMessage = {
           userId   : userId,
           userName : userName,
           roomId   : roomId
       };

 // チャットルームに入室します
 const socketIO = new SocketIOClass(userId);
 socketIO.emit( 'join', joinMessage );

 // submitボタンを押下した際の処理を定義します
 $("#messge-submit-btn").on("click", () => {

     const message = /* 画面で入力されたチャットの送信メッセージを取得します */,
           msgObj = {
               from    : userId,
               to      : 'all',
               message : message
           };

     // ChatServerにメッセージを送信します
     socketIO.emit( 'message', msgObj );
 });

 /**
 * 以下の処理が音声によるメッセージ送信機能の追加部分
 */

 /** 音声認識用インスタンス */
 let recognition = new webkitSpeechRecognition();
 recognition.lang = "ja";

 /** 送信メッセージ */
 let submitMsg;

 // 会話の段階を制御するフラグ

 /** apiが発話するために音声認識が終了されたかどうか */
 let stopForApiSpeech = false;

 /** チャットの送信メッセージの音声認識中かどうか */
 let chatInputStart = false;

 /** チャットの送信メッセージの確認中かどうか */
 let chatSubmitConfirmed = false;

 // 音声認識中にマイクからのinputを受信した際の処理を定義します
 recognition.addEventListener('result', (e) => {

     let inputMsg = e.results[0][0].transcript;

     if (!chatInputStart) {
         // チャット初期状態の場合

         if ( inputMsg == "チャット スタート" ) {

             execApiSpeech("スピークしてくれ。");

             chatInputStart = true;
             return;

         }

         // メッセージが "チャット スタート" ではない場合は何もしないで処理を終了させます
         return;
     }

     // 以下、チャット初期状態ではない場合

     if (inputMsg == "チャットエンド") {

         execApiSpeech("スピーク終わり。");

         submitMsg = "";
         chatInputStart = false;
         chatSubmitConfirmed = false;

         return;
     }

     if (!chatSubmitConfirmed) {
         // チャットメッセージの受付中の場合

         execApiSpeech(inputMsg + "。を送信しますよ。");

         submitMsg = inputMsg;
         chatSubmitConfirmed = true;

         return;
     }

     // 以下、チャットメッセージの受付中ではない場合（チャットメッセージ確認中の場合）

     if ( inputMsg == "送信" ) {

         const msgObj = {
             from: userId,
             to: 'all',
             message: submitMsg
         }

         // ChatServerにメッセージを送信します
         socketIO.emit( 'message', msgObj );

         submitMsg = "";
         chatSubmitConfirmed = false;
     } else if ( inputMsg == "キャンセル" ) {

         execApiSpeech("メッセージを取り消しました。");

         submitMsg = "";
         chatSubmitConfirmed = false;
     } else {

         execApiSpeech("もう一度言ってください。");
     }

 });

 // 音声認識を終了した際の処理を定義します
 recognition.addEventListener('end', () => {

     if (stopForApiSpeech) {

         // APIが発話するために音声認識を停止した場合は
         // 音声認識の自動再スタートは行いません
         stopForApiSpeech = false;
         return;
     }

     // 音声認識を自動再スタートさせます
     recognition.start();
 });

 /**
  * SpeechSynthesisUtteranceインスタンスを取得します
  */
 function getSpeechSynthesisUtterance(msg) {

     // SpeechSynthesisUtteranceインスタンの設定を行います
     let synthesis = new SpeechSynthesisUtterance();
     synthesis.lang = 'ja';
     synthesis.text = msg;

     // 発話が終了した際の処理を定義します
     synthesis.addEventListener('end', () => {

         // 発話終了後に音声認識を再スタートさせます
         recognition.start();
     });

     return synthesis;
 }

 /**
  * SpeechSynthesisUtteranceインスタンスに発話をさせます
  */
 function execApiSpeech(msg) {

    // 発話をする前に、音声認識を停止します
    stopForApiSpeech = true;
    recognition.stop();

    // 発話します
    let synthesis = getSpeechSynthesisUtterance(msg);
    speechSynthesis.speak(synthesis);
 }

 // 音声認識を開始します（js読み込み時に開始します）
 recognition.start();

});

/**
 * ChatServerから送信されてきたメッセージを画面に表示します
 *（SocketIOClass.jsから呼び出される関数）
 */
function addMsgToScreen(msg, myUserId) {

    // msg.messageに格納されているテキストメッセージを画面に表示します
    // 処理が画面側の実装に依存するため、詳細は省略します

    const from = msg.from,
          isMyselfMessage = (from === myUserId);

    // 受信したテキストを読み上げます（自分が送信したメッセージの読み上げは行いません）
    if (!isMyselfMessage) {

        let synthesis = new SpeechSynthesisUtterance();

        synthesis.text = msg.message;
        speechSynthesis.speak(synthesis);
    }
}