ブラウザで音声認識をさせて結果を表示する

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

ボタンを押すとSpeechRecogniztionで音声を受けて画面に文字列を表示させるサンプルを
動かしたいのですが以下のエラーメッセージがでます。どのようにプログラムを
書き換えればいいかわかりません。ご教示いただけますと幸いです。

発生している問題・エラーメッセージ

エラーメッセージ
Uncaught DOMException: Failed to execute 'start' on 'SpeechRecognition': recognition has already started.

### 該当のソースコード
エラーメッセージ
Uncaught DOMException: Failed to execute 'start' on 'SpeechRecognition': recognition has already started.

 <!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>音声認識サンプル</title>
</head>

<body>
    <h2>音声認識サンプル</h2>
    <button id="btn">start</button>
    <div id="content"></div>

    <script></script>
    <script>
        const speech = new webkitSpeechRecognition();
        speech.lang = 'ja-JP';

        const btn = document.getElementById('btn');
        const content = document.getElementById('content');

        btn.addEventListener('click', function () {
            // 音声認識をスタート
            speech.start();
        });

        // speech.addEventListener('result' , function(e) {
        //     // 音声認識で取得した情報を、コンソール画面に表示
        //     console.log(e);

        //     // 音声認識で取得した情報を、HTMLに表示
        //     const text = e.results[0][0].transcript;
        //     content.innerText = text;

        // });

        //追記
        //音声自動文字起こし機能
        speech.onresult = function (e) {
            speech.stop();
            if (e.results[0].isFinal) {
              var autotext = e.results[0][0].transcript
              console.log(e);
              console.log(autotext);
              content.innerHTML += '<div>' + autotext + '</div>';
            }
        }

        speech.onend = () => {
            speech.start()
        };
    </script>

</body>

コード


```ここに言語名を入力
Javascript

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

oikashinoa

2020/02/17 14:54

ソース、後半が切れてます？

行動規範の内容に同意します

回答1件

閉じ括弧がなくないですか？

HTMl
1
2<body>
3    <h1>音声認識</h1>
4    <button id="btn">start</button>
5    <div id="content"></div>
6
7    <script></script>
8    <script>
9        const speech = new webkitSpeechRecognition();
10        speech.lang = 'ja-JP';
11
12        const btn = document.getElementById('btn');
13        const content = document.getElementById('content');
14
15        btn.addEventListener('click', function () {
16
17            speech.start();
18        });
19     </script>
20</body>