JS | ブラウザ上で動作するリアルタイム文字起こし（音声認識）機能を簡単に実装する

<button id="start">開始</button>
<button id="stop">停止</button>
<div id="progress"></div>
<div id="result"></div>

<script>
/**
 * ボタン 出力エリア
 */
const start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    progress = document.getElementById('progress'),
    result = document.getElementById('result');

/**
 * 音声認識
 */
const rec = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

/**
 * 音声認識の設定
 */
rec.lang = 'ja-JP';
rec.interimResults = true;
rec.continuous = true;
/**
 * エラー時
 */
rec.onerror = (e) => {
    if (e.error == 'not-allowed') {
        alert('マイクのアクセスを許可してください');
    }
};
/**
 * 結果出力
 */
rec.onresult = (e) => {
    let results = e.results, i, l;
    for (i = e.resultIndex, l = results.length; i < l; i++) {
        if (results[i].isFinal) {
            result.innerHTML += results[i][0].transcript + '<br>';
            progress.innerText = '';
        } 
        else {
            progress.innerText = results[i][0].transcript;
        }
    }
};
/**
 * 開始イベント
 */
start.addEventListener('click', (e) => {
    rec.start();
});
/**
 * 停止イベント
 */
stop.addEventListener('click', (e) => {
    rec.stop();
});
</script>