qString: 音声で入力

<button type="button" onclick="user_stopRecog()">
 <span class="material-icons">stop_circle</span></button>
<button type="button" onclick="user_startRecog( 'en-US' )" class="user_startBtn">
(β) <span class="material-icons">mic</span> en-US</button>
<button type="button" onclick="user_startRecog( 'ja-JP' )" class="user_startBtn">
(β) <span class="material-icons">mic</span> ja-JP</button>

<div style="margin:5px 0px 3px 10px;">
<button type="button" style="min-height:30px; min-width:30px; border-radius: 15px;"
 onclick="user_insertChar( ', ' )"> , </button>
<button type="button" style="min-height:30px; min-width:30px; border-radius: 15px;"
 onclick="user_insertChar( '. ' )"> . </button>
<button type="button" style="min-height:30px; min-width:30px; border-radius: 15px;"
 onclick="user_insertChar( ': ' )"> : </button>
<button type="button" style="min-height:30px; min-width:30px; border-radius: 15px;"
 onclick="user_insertChar( '? ' )"> ? </button>
<button type="button" style="min-height:30px; min-width:30px; border-radius: 15px;"
 onclick="user_insertChar( '、' )"> 、</button>
<button type="button" style="min-height:30px; min-width:30px; border-radius: 15px;"
 onclick="user_insertChar( '。' )"> 。</button>
<button type="button" style="min-height:30px; min-width:30px; border-radius: 15px;"
 onclick="user_insertChar( '\n' )"> <span class="material-icons">keyboard_return</span></button>
</div>

<div id="user_speechStatus" style="padding:2px; margin:5px; border: 3px solid #FFC69B; "
>(SpeechAPI Status viewer...)</div>
<div id="user_firedCounter" style="margin:0px 10px; word-break: break-all;"> (no audio events fired) </div>

<script>
const user_qString = "q_EquipmentProblem"; // ★★★ EDIT Field Name ★★★
let user_strFiredCounter = '';
let user_strOriginal = '';

//// setup Web Speech API
SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
if( ! ('SpeechRecognition' in window) ) { console.error('speech-recognition not supported'); }
const user_recog = new SpeechRecognition();
      user_recog.interimResults = false; // interim results should be returned
      user_recog.continuous     = true; // continuous results are returned for each recognition
      // https://developer.mozilla.org/docs/Web/API/SpeechRecognition

//// Speaker action: start
function user_startRecog ( strLang ) {
  user_strFiredCounter += '>';
  user_strOriginal = qbpms.form.get( user_qString );
  user_recog.lang = strLang;
  user_recog.start();
  user_showMsg( "#user_speechStatus",            // ★ EDIT id ★
                " Recognition Started. mode: " + strLang );
  console.log(  " Recognition Started. mode: " + strLang );
  const btns = document.querySelectorAll( ".user_startBtn" );
        btns.forEach ( el => { el.disabled = true; el.style.cursor = "not-allowed"; } );
}

//// Speaker action: stop
function user_stopRecog () {
  user_strFiredCounter += '<';
  user_recog.stop(); // -> event handler property "onresult"
  user_showMsg( "#user_speechStatus",            // ★ EDIT id ★
                " Recognition Stopped." );
  console.log(  " Recognition Stopped." );
  const btns = document.querySelectorAll( ".user_startBtn" );
        btns.forEach ( el => { el.disabled = false; el.style.cursor = "pointer"; } );
}

//// Speaker action: insert character or linebreak
function user_insertChar ( strSuffix ) {
  user_strFiredCounter += '|';
  user_recog.stop(); // -> event handler property "onresult"
  console.log(  " inserted" );
  const btns = document.querySelectorAll( ".user_startBtn" );
        btns.forEach ( el => { el.disabled = false; el.style.cursor = "pointer"; } );
  let strTmp = qbpms.form.get( user_qString );
  // if ( ! strSuffix.endsWith('\n') ){ strTmp += ' '; };
  qbpms.form.set( user_qString, strTmp + strSuffix );
}

//// Show Interim Result to Msg, Append Final Result to qString
user_recog.onresult = (event) => {
  console.log( "--- Result Event fired (a word or phrase recognized) ! --- " );
  user_strFiredCounter += ( event.resultIndex % 10 ) + '';
  user_showMsg( "#user_firedCounter",            // ★ EDIT id ★
                 user_strFiredCounter + " " +
                 event.results.length
              );
  let strTmp = '';
  for ( let i = event.resultIndex; i < event.results.length; i++ ) {
    // English "event.resultIndex" on Android 12, even the index '0' changes frequently.
    if ( ! event.results[i].isFinal ) { // an interim result
      strTmp += event.results[i][0].transcript;
      user_showMsg( "#user_speechStatus", strTmp ); // ★ EDIT id ★
    } else { // when isFinal===true, joins all results
      let strFinal = '';
      for ( let j = 0; j < event.results.length; j++ ) {
        strFinal += event.results[j][0].transcript;
      }
      qbpms.form.set( user_qString, user_strOriginal + strFinal );
    }
  }
};

/**
 * Show a message in the specified HTML element by its ID
 * @param {string} id - The ID of the HTML element where the message will be shown.
 * @param {string} text - The message text to be displayed in the HTML element.
 */
function user_showMsg ( id, text ) { // eg "#user_speechStatus"
  let elMsgArea = document.querySelector ( id );
  while ( elMsgArea.firstChild ) { elMsgArea.removeChild ( elMsgArea.firstChild ); }
  elMsgArea.appendChild( document.createTextNode( text ) );
}
</script>