音声認識の結果から画像を表示させる方法を教えていただけないでしょうか？

前提・実現したいこと

現在、Web Speech APIを利用して、発言した内容が、表示されるようになっています。

ここから、発言した内容と一緒の画像名を表示させたいのですが、どのようにしたら表示させることができるのでしょうか？？
例えば、「カエル」とマイクに向かって発言したら、複数の画像が保存されているディレクトリを参照し、「カエル.jpg」を画面に表示させる。というようなことをしたいです。

参考となるサイト等ありましたら、教えて頂きたいです。よろしくおねがい致します。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="start-btn">start</button>
  <button id="stop-btn">stop</button>
  <div id="result-div"></div>

  <script>
    const startBtn = document.querySelector('#start-btn');
    const stopBtn = document.querySelector('#stop-btn');
    const resultDiv = document.querySelector('#result-div');

    SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
    let recognition = new SpeechRecognition();

    recognition.lang = 'ja-JP';
    recognition.interimResults = true;
    recognition.continuous = true;

    let finalTranscript = '';

    recognition.onresult = (event) => {
      let interimTranscript = '';
      for (let i = event.resultIndex; i < event.results.length; i++) {
        let transcript = event.results[i][0].transcript;
        if (event.results[i].isFinal) {
          finalTranscript += transcript;
        } else {
          interimTranscript = transcript;
        }
      }
      resultDiv.innerHTML = finalTranscript + '<i style="color:#ddd;">' + interimTranscript + '</i>';
    }

    startBtn.onclick = () => {
      recognition.start();
    }
    stopBtn.onclick = () => {
      recognition.stop();
    }
  </script>
</body>
</html>

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

回答1件

ベストアンサー

オッ、これすごいですね。精度高いし。

それはさておき、非同期処理とかそのへんのことを考えないのであれば後は簡単です。finalTranscript に '.jpg' をくっつけて（例えば カエル.jpg）あげて <img> を作り挿入するとよいのです。この辺の処理は Web Speech API を調べられた beginner.tanaka さんなら「JavaScript img 追加」などで調べればすぐにできると思います。もし出来なかったら具体的なところを添えてまた質問してみてください。

投稿2021/01/05 23:53