このままではコードが読めないので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>○○○○○</h1> </header> <div> <button id="start-btn">start</button> <button id="stop-btn">stop</button> <div id="result-div"></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:#808080;">' + interimTranscript + '</i>'; } startBtn.onclick = () => { recognition.start(); } stopBtn.onclick = () => { recognition.stop(); } </script> </body> </html>
css
* { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #CDEAFA; } header { padding: 10px; position: fixed; top: 0; width: 100%; background-color: #73CDF7; display: flex; align-items: center; text-align: center; position:fixed; } h1 { text-decoration: none; color: #142e37; margin: auto; padding: 0; text-align: center; font-size: 30px; font-family: cursive; width: 100%; } div{ text-align: center; margin-right: 50px; } button{ margin-left: 20px; margin-top: 100px; zoom: 1.8; } #result-div{ margin-top: 25px; zoom: 1.8; }
音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、画像が表示できませんでした。どうしたらいいか教えていただきたいです！
こちらはWebサーバー上で動くものにしたいです。
また、キーワードに含まれていないものは画像を表示せず、会話を自動テキスト化するだけにしたいです。現在すでにテキスト化することの方はできています。
markdownを使ってソースコードを書いてください。
https://teratail.com/help/question-tips#:~:text=teratail%E3%81%A6%E3%82%99%E3%81%AF%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%88%E3%82%99%E3%82%92%E3%82%B7%E3%83%B3%E3%82%BF%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8B%E3%82%99%E3%81%A6%E3%82%99%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494
https://teratail.com/questions/238564
現状のコードでどこまでできていて何がわからないのでしょうか
「うまくいかない」では何も伝わらないので、起きている現象を具体的に記載してください
「画像」とはご提示のコードで言うと、どれのことですか？
#result-div ですか？
はい、現在result-divに音声認識で話した内容が文字で出るようになっているので、ここに話している中で特定のキーワードを認識することによって画像が表示されるようにしたいです。
(例えば、公園に行きたいと言うと→公園の画像が表示)
それは仕様になるので、法則決めてください。
AIレベル目指すならDBとかなりの数の教師データ必要になりそうですが。
簡単なサンプルとして作成できればいいので、AIレベルなど高度なものでなくて大丈夫です。 finalTranscriptにimgを加えれば可能だというのを見つけたのですが、その場合はどのようにimgを挿入すればいいのでしょうか？もしわかれば教えていただきたいです。
あとは、表示させたい画像はどこにあるのか準備するのかとか、もっと仕様詰めて設計する必要があると思います。
表示させたい画像はファイルに保存してあるものを使います。
問題を把握しました。
ご回答いただきありがとうございます。
載せていただいたコードは
if(event.results［i］.isFinal)｛ の後ろに入れればいいのでしょうか？
回答へのコメントは回答のコメント欄にしていただくのが望ましいです。
resultDiv.innerHTML = finalTranscript + '<i style="color:#808080;">' + interimTranscript + '</i>';
を差し替える感じですね。
>ファイルに保存
細かいことかもしれませんが大事なので。画像自体が「ファイル」です。
「どこ」というと大抵は「置かれている具体的な場所」をさします。
WebサービスはWebサーバー上で動くのでそのサーバー内か、もしくは画像検索APIなどで他所様のものを参照するとか（基本直リンクはやらないほうが良いですが、「音声のなかのキーワードにない画像はどうするの」という点が不明でした）
ひとまず現状の質問内容ではそのあたりの要件や想い、現状の問題点が不明なので、原則質問本文に反映してください。
まだ回答がついていません
会員登録して回答してみよう
