qNumber: Speech

qNumber: Speech

translate qNumber: 読み上げ

Reads out numerical values in numeric type fields (Text-to-Speech), using the Web Speech API (Speech Synthesis). For example, the billing amount data “12,000,000 (yen)” can be confirmed by the voice “issen ni-hyakuman” or “twelve million”.

  • The volume may become unstable (smaller).
    • In most cases, the reset button will restore it.

Input / Output

  • ← qNumber q_InvoiceAmount
  • → (Sound Playback Device)

Code Example

HTML/JavaScript (click to close)
<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>
warning Freely modifiable HTML/JavaScript code, MIT License. No warranty of any kind.
(Decoration using JavaScript is only available in the Professional edition: M213)

Capture

Reads out numerical values in numeric type fields (Text-to-Speech), using the Web Speech API (Speech Synthesis). For example, the billing amount data "12,000,000 (yen)" can be confirmed by the voice "issen ni-hyakuman" or "twelve million".

open_in_new Online DEMO (public form)

See Also

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: