kintone上でWebSpeechAPIを利用して音声認識して文字起こしする【動作確認編】

本記事を読むにあたっての注意点

動作実行を確認できる段階でのコードになります。
文字通り動作確認だけしたい、出来る確信を得たいという方はこちらの記事で十分かと思います。

記法の不統一、コーディングの不備不足、機能の少なさなどがございます。
実装可能なクオリティに仕上げたものは kintone上でWebSpeechAPIを利用して音声認識して文字起こしする【改良編】で追記しておりますので、ご興味がある方は通して読んでいただけたらと思います。
本記事を参考にしつつあなた自身のコーディングをしていただけたら幸いです。

前提知識

• kintone
• JavaScript (kintone JavaScrip API)
• HTML
• WebSpeechAPI

実装後イメージ

プロセス

1. 録音開始、終了ボタンを設置
2. 認識した音声を表示させる<input>を設置
3. WebSpeechAPIを設定しボタンを機能させる（録音開始、録音終了、同時に文字起こし）
4. kintone JavaScript APIで、レコード保存するとkintoneのフィールドに文字列が転記させる

---

コード全体

WebSpeechAPI_on_kintone.js

(function () {
    "use strict";
    kintone.events.on("app.record.edit.show", function (event) {

        // start,stop ボタン生成
        const startButton = document.createElement("button");
        startButton.innerText = "録音開始";
        startButton.id = "start-btn";
        startButton.className = "recognition-buttons";

        const stopButton = document.createElement("button");
        stopButton.innerText = "録音終了";
        stopButton.id = "start-btn";
        stopButton.className = "recognition-buttons";

        // 文字起こし用<input>作成
        const tempForm = document.createElement("input");
        tempForm.id = "temp_input";
        tempForm.type = "text";
        tempForm.maxlength = "300";
        tempForm.value = "";
        tempForm.size = 129;
        kintone.app.record.getSpaceElement('form_space').appendChild(tempForm);

        // Web Speech API の設定 (SpeechRecognitionクラス)
        const SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
        const recognition = new SpeechRecognition();
        recognition.lang = "ja-JP";
        recognition.interimResults = true;
        recognition.continuous = true;

        let resultString = "";
        recognition.onresult = (event) => {
            let intermString = "";
            for (let i = event.resultIndex; i < event.results.length; i++) {
                let transcript = event.results[i][0].transcript;
                if (event.results[i].isFinal) {
                    resultString += transcript + " ";
                } else {
                    intermString = transcript;
                }
            }
            document.getElementById("temp_input").value = resultString + "<" + intermString;
        };

        // 録音ボタンの処理、ボタンの設置
        startButton.onclick = () => {
            recognition.start();
        };
        stopButton.onclick = () => {
            recognition.stop();
        };
        kintone.app.record.getSpaceElement('buttonSpace').appendChild(startButton);
        kintone.app.record.getSpaceElement('buttonSpace').appendChild(stopButton);
        return event;
    });

    // 保存実行前に一時保存から取得してフィールドに移す
    kintone.events.on("app.record.edit.submit", function (event) {
        let str = document.getElementById("temp_input").value;
        event.record.aaa.value = str;
        return event;
    });
})();