qString: 音声で入力
音声入力を受け付けます。現状は Chrome 他、一部のブラウザでのみ動作します。音声認識(Speech Recognition)ボタンを押してがら発声すると、文字が入力されます。スマートフォンで「点検結果の報告」を処理する際などに便利です。なお、サーバーベースの認識エンジンが使用されるため、オフラインでは正常動作しません。
- Startボタンで「Speech Recognition service」が起動します。
- https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition
- SpeechRecognition はウェブ音声 API のインターフェイスで、 認識サービスの制御インターフェイスです。認識サービスから送信された SpeechRecognitionEvent も処理します。(実験的機能)
- 利用シーン
- 両手がふさがっている際の記録
- スマートフォン環境での記録
- 手の不自由な方のテキスト入力
- OSやブラウザによって挙動が異なります。
- 音声受付終了のタイミング
- 確定判断のタイミング
- 文字変換の効率
- 中間結果を返すモードは、現状、スマホで正常に動作しません。
user_recog.interimResults = true;
- 読点・句読点・改行などの発音されない文字は、ボタンでの入力が可能です。
- 下流工程にて、生成AI人工知能(”Chat GPT” など)に「校正」させる方法も非常に有効です。
- 音声入力とAI校正の例
- “製造ライン用プレス機
制御盤 ヒューズ 制御盤用のヒューズが劣化している交換を検討したい なお シリンダー内部にわずかな 摩耗がある問題ない範囲だが 経過観察したい 以上” - “製造ライン用プレス機
制御盤 ヒューズ:制御盤用のヒューズが劣化しているため、交換を検討したい。また、シリンダー内部にわずかな摩耗があるが、問題ない範囲であるため、経過観察したい。以上。”
- “製造ライン用プレス機
Input / Output
- ← (Microphone Device)
- → qString (STRING_TEXTAREA)
q_EquipmentProblem
Code Example
HTML/JavaScript (click to close)
<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>
自由改変可能な HTML/JavaScript コードです (MIT License)。いかなる保証もありません。
Capture


Appendix
user_startRecog(strLang: string): void
- Start the speech recognition with the specified language.
- Parameters:
strLang: string
– The language code for speech recognition.
- Returns:
void
user_stopRecog(): void
- Stop the speech recognition.
- Returns:
void
user_insertChar(strSuffix: string): void
- Insert a character or linebreak to the recognized text.
- Parameters:
strSuffix: string
– The character or linebreak to be inserted.
- Returns:
void
user_showMsg(id: string, text: string): void
- Show a message in the specified HTML element by its ID.
- Parameters:
id: string
– The ID of the HTML element where the message will be shown.text: string
– The message text to be displayed in the HTML element.
user_recog.onresult(event: SpeechRecognitionEvent): void
- An event handler for the speech recognition result event.
- Parameters:
event: SpeechRecognitionEvent
– The speech recognition event object.
- Returns:
void