2023-04-26 / 処理画面デコレーション
qString: 音声で入力

qString: 音声で入力

translate qString: Type with Voice

音声入力を受け付けます。現状は Chrome 他、一部のブラウザでのみ動作します。音声認識（Speech Recognition）ボタンを押してがら発声すると、文字が入力されます。スマートフォンで「点検結果の報告」を処理する際などに便利です。なお、サーバーベースの認識エンジンが使用されるため、オフラインでは正常動作しません。

  • Startボタンで「Speech Recognition service」が起動します。
  • 利用シーン
    • 両手がふさがっている際の記録
    • スマートフォン環境での記録
    • 手の不自由な方のテキスト入力
  • 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>
warning 自由改変可能な HTML/JavaScript コードです (MIT License)。いかなる保証もありません。
(JavaScript を用いたデコレーションは Professional editionでのみ利用可能です: M213)

Capture

音声入力を受け付けます。現状は Chrome 他、一部のブラウザでのみ動作します。音声認識（Speech Recognition）ボタンを押してがら発声すると、文字が入力されます。スマートフォンで「点検結果の報告」を処理する際などに便利です。なお、サーバーベースの認識エンジンが使用されるため、オフラインでは正常動作しません。

未確定結果表示モード（interim mode）

open_in_new Online DEMO (public form)

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

See Also

OpenAI: Chat, 開始
qNumber: 読み上げ

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

%d人のブロガーが「いいね」をつけました。