qNumber: Speech

<button type="button" onclick="user_resetSpeechApi()">
 <span class="material-icons">stop_circle</span></button>
<button type="button" onclick="user_startSpeech( 'en-US' )">
(β) en-US <span class="material-icons">volume_up</span></button>
<button type="button" onclick="user_startSpeech( 'ja-JP' )">
(β) ja-JP <span class="material-icons">volume_up</span></button>
<div id="user_speechStatus" style="padding:2px; margin:5px; border: 3px solid #FFC69B; "
>(SpeechAPI Status viewer...)</div>

<script>
//// Initialize for Win Chrome
const synth = window.speechSynthesis;
function user_initializeSpeechApi () {
  if ( ! 'speechSynthesis' in window ) { console.error('text-to-speech not supported'); }
  let arrVoices = synth.getVoices(); // array of SpeechSynthesisVoice objects
  console.log( 'Initialized (arrVoices:' + arrVoices.length + ')' );
}
qbpms.form.on ( 'ready', user_initializeSpeechApi );

//// User action: reset
function user_resetSpeechApi () {
  synth.cancel(); // Remove all utters from the queue.
  let arrVoices = synth.getVoices();
  console.log( 'Queue canceled (arrVoices:' + arrVoices.length + ')' );
  let msg  = " (utterance queue cleared)";
      msg += ( synth.paused ? " Paused:" : "" );
      msg += ( synth.pending ? " Pending:" : "" );
      msg += ( synth.speaking ? " Speaking:" : "" );
  user_showMsg ( '#user_speechStatus', msg );
}

//// User action: start
function user_startSpeech ( strLang ) {
  // https://developer.mozilla.org/docs/Web/API/Web_Speech_API
  let bigInvoiceAmount = qbpms.form.get( "q_InvoiceAmount" ); // ★★★ EDIT Field Name ★★★
  let speech = new SpeechSynthesisUtterance();
      // https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance
      speech.text = bigInvoiceAmount.toString();
      speech.lang = strLang;
  synth.speak( speech ); // Adds an utterance to the utterance queue.
  let msg  = "";
      msg += ( synth.paused ? " Paused:" : "" );
      msg += ( synth.pending ? " Pending:" : "" );
      msg += ( synth.speaking ? " Speaking:" : "" );
      msg += " pitch=" + speech.pitch;
      msg += " speed=" + speech.rate;
      msg += " volume=" + speech.volume;
      msg += " lang=" + speech.lang;
      msg += " " + ( speech.voice?.name ?? "-" );
      msg += " " + ( speech.voice?.lang ?? "-" );
  user_showMsg ( '#user_speechStatus', msg );
}

/**
 * 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>