はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Unity】WebGLでなるべく簡単に音声認識をしてみた②

はじめに

少し前にWebGLで音声認識をしてみたという記事を上げさせていただきました。

www.hanachiru-blog.com

そちらにサンプルを用意させていただいていたのですが、ややレスポンスが悪かったみたいなので少し修正してみました。
https://hanachiru.github.io/WebSpeeshAPITest2/

そこでどんなことをして改善したのかをまとめておきたいと思います。
f:id:hanaaaaaachiru:20191006202545g:plain

認識している途中結果も取得する

まず最初にやったことは認識途中の結果も取得したことです。

recognition.interimResults = true;

前回の記事ではしゃべりがひと段落した後にWebGLに結果を送ってから表示していたので、かなり遅く感じてしまっていました。

結構「しゃべりがひと段落」がざっくりとしていて、思ったよりも長文になってしまっていてビックリしました。

これを前回のサンプルに入れればこんな感じです。

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
        var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");

        function Start() {
            SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
            const recognition = new SpeechRecognition();

            recognition.continuous = true;
            recognition.interimResults = true;

            recognition.onnomatch = function () {
                window.alert("セットアップに失敗しました。ページの再読み込みをしてください。")
            };

            recognition.onerror = function () {
                console.log("エラーが発生しました。再接続をします。")
                Start();
            };

            recognition.onsoundend = function () {
                console.log("音声入力が停止しました。再接続します。")
                Start();
            }

            recognition.onresult = (event) => {
                gameInstance.SendMessage('GameManager', 'OnMessage', event.results[event.results.length - 1][0].transcript);
            };

            recognition.start();
        }

        Start();
    </script>
</head>

<body>
    <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
</body>
</html>

メモリの量を増やす

これもおそらく効果があった?と思うのですが、WebGLで使用可能なメモリの量を増やしたことです。

設定はPlayer Settings -> Publishing Setting -> Memory Sizeからできます。

f:id:hanaaaaaachiru:20191006201936p:plain

公式の説明を一部引用させていただくと、

WebGL のランタイムで使用可能なメモリを MB 単位で指定します。これは慎重に値を設定してください。もしこの値が低すぎる場合、コンテンツやシーンを読み込んだときにメモリが足りずに out-of-memory のメモリ不足エラーが発生する可能性があります。それとは逆に、メモリを多く確保し過ぎるとブラウザ/プラットフォームの組み合わせによっては、要求したメモリが確保できずにプレイヤーの読み込みに失敗する可能性があります。詳細はWebGLを対象とした場合に必要なメモリへの配慮を参照してください。

WebGL の Player Settings - Unity マニュアル

とのことで増やしすぎもダメみたいなので難しそうですが、とりあえず1024に設定してみました。

ちなみに上限は2032みたいです。

さいごに

とりあえず主にしたことはこの2つです。

他になにか良い方法がありましたら是非コメント等で教えていただけると嬉しいです。