qNumber: Speech
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>
Freely modifiable HTML/JavaScript code, MIT License. No warranty of any kind.
Capture

