キーワードを話すと画像が出るようにしたいです。

html
1
2<!DOCTYPE html> 
3<html lang="ja"> 
4<head> 
5<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> 
6</header> 
7　<div> 
8　　<button id="start-btn">start</button>  
9　   <button id="stop-btn">stop</button> 
10　　<div id="result-div"></div> 
11　</div> 
12
13　<script>
14　　const startBtn = document.querySelector('#start-btn'); 
15　　const stopBtn = document.querySelector('#stop-btn'); 
16　　const resultDiv = document.querySelector('#result-div'); 
17
18　　SpeechRecognition = webkitSpeechRecognition || 
19　　SpeechRecognition; 
20　　let recognition = new SpeechRecognition(); 
21
22　　recognition.lang = 'ja-JP'; 
23　　recognition.interimResults = true; 
24　　recognition.continuous = true; 
25
26　　let finalTranscript = ''; 
27　　
28　　recognition.onresult = (event) => {
29　　　 let interimTranscript = ' '; 
30　　　for (let i = event.resultIndex; i < event.results.length; i++) { 
31　　　　let transcript = event.results[i][0].transcript; 
32　　　　if (event.results[i].isFinal) { 
33　　　　　finalTranscript += transcript;
34　　　　 } else { 
35　　　　　interimTranscript = transcript; 
36　　　　} 
37　　　} 
38        resultDiv.innerHTML = finalTranscript + '<i style="color:#808080;">' + interimTranscript + '</i>'; 
39    } 
40
41    startBtn.onclick = () => { 
42       recognition.start();
43    } 
44   stopBtn.onclick = () => { 
45      recognition.stop(); 
46   } 
47 </script> 
48</body>
49 </html>
50

css
1
2* {
3   box-sizing: border-box;
4}
5body {
6   margin: 0;
7   padding: 0;
8   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
9   background-color: #CDEAFA;
10}
11header {
12   padding: 10px;
13   position: fixed;
14   top: 0;
15   width: 100%;
16   background-color: #73CDF7;
17   display: flex;
18   align-items: center;
19   text-align: center;
20   position:fixed;
21}
22h1 {
23    text-decoration: none;
24    color: #142e37;
25    margin: auto;
26    padding: 0;
27text-align: center;
28    font-size: 30px;
29font-family: cursive;
30    width: 100%;
31}
32div{
33text-align: center;
34margin-right: 50px;
35}
36button{
37margin-left: 20px;
38margin-top: 100px;
39zoom: 1.8;
40}
41#result-div{
42margin-top: 25px;
43zoom: 1.8;
44}
45

音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、画像が表示できませんでした。どうしたらいいか教えていただきたいです！

こちらはWebサーバー上で動くものにしたいです。
また、キーワードに含まれていないものは画像を表示せず、会話を自動テキスト化するだけにしたいです。現在すでにテキスト化することの方はできています。

y_waiwai

2022/01/20 02:30

このままではコードが読めないので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

Lhankor_Mhy

2022/01/20 02:33 編集

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

m.ts10806

2022/01/20 02:33

現状のコードでどこまでできていて何がわからないのでしょうか「うまくいかない」では何も伝わらないので、起きている現象を具体的に記載してください

Lhankor_Mhy

2022/01/20 03:03 編集

「画像」とはご提示のコードで言うと、どれのことですか？ #result-div ですか？

Sane

2022/01/20 03:17

はい、現在result-divに音声認識で話した内容が文字で出るようになっているので、ここに話している中で特定のキーワードを認識することによって画像が表示されるようにしたいです。 (例えば、公園に行きたいと言うと→公園の画像が表示)

m.ts10806

2022/01/20 03:20

それは仕様になるので、法則決めてください。 AIレベル目指すならDBとかなりの数の教師データ必要になりそうですが。

Sane

2022/01/20 03:31

簡単なサンプルとして作成できればいいので、AIレベルなど高度なものでなくて大丈夫です。 finalTranscriptにimgを加えれば可能だというのを見つけたのですが、その場合はどのようにimgを挿入すればいいのでしょうか？もしわかれば教えていただきたいです。

m.ts10806

2022/01/20 03:32

あとは、表示させたい画像はどこにあるのか準備するのかとか、もっと仕様詰めて設計する必要があると思います。

Sane

2022/01/20 03:36

表示させたい画像はファイルに保存してあるものを使います。

Lhankor_Mhy

2022/01/20 03:40

問題を把握しました。

Sane

2022/01/20 03:58

ご回答いただきありがとうございます。載せていただいたコードは if(event.results［i］.isFinal)｛　の後ろに入れればいいのでしょうか？

Lhankor_Mhy

2022/01/20 04:03

回答へのコメントは回答のコメント欄にしていただくのが望ましいです。 resultDiv.innerHTML = finalTranscript + '' + interimTranscript + ''; を差し替える感じですね。

m.ts10806

2022/01/20 04:03

>ファイルに保存細かいことかもしれませんが大事なので。画像自体が「ファイル」です。「どこ」というと大抵は「置かれている具体的な場所」をさします。 WebサービスはWebサーバー上で動くのでそのサーバー内か、もしくは画像検索APIなどで他所様のものを参照するとか（基本直リンクはやらないほうが良いですが、「音声のなかのキーワードにない画像はどうするの」という点が不明でした）

m.ts10806

2022/01/20 04:05

ひとまず現状の質問内容ではそのあたりの要件や想い、現状の問題点が不明なので、原則質問本文に反映してください。

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

回答1件

ベストアンサー

こういうことですか？

js
1if (finalTranscript == "teratail") {
2	resultDiv.innerHTML = '<img src="teratail.png">'
3} else {
4	resultDiv.innerHTML = '<img src="others.png">'
5}

投稿2022/01/20 03:44

Lhankor_Mhy

総合スコア37699

Sane

2022/01/20 04:24

ありがとうございます。実行してみます。

Sane

2022/01/20 04:27

差し替えて実行したところUncaught SyntaxError: Unexpected end of inputとエラー表示が出てきました。

Lhankor_Mhy

2022/01/20 04:42

解決していないなら、ベストアンサーを選出しない方がいいですよ。エラーについては、具体的なコードがないので具体的な回答はできませんが、エラーが出ている箇所の文法がおかしいのだと思います。

Lhankor_Mhy

2022/01/20 05:39

もしかすると、閉じタグを書いてしまっているのかもですね。

Sane

2022/01/20 06:34

いろいろとご指摘いただきありがとうございます。文法ミスがあったみたいです。修正したら画像が表示されるようになりました！元々は音声認識で会話を自動テキスト化するようにしていたのですが、先程のコードで特定のキーワードを言った際に画像が表示されるようになった代わりに他の言葉はテキスト化されなくなりました。これは差し替えた箇所の else｛　resultDiv.innerHTML= を変えれば直りますか？

Lhankor_Mhy

2022/01/20 06:46

ああ、追記があったのですね、気づきませんでした。おっしゃるとおりでいいかと思います。もし、「teratailはプログラミングに関する問題解決をサポートします」→「【画像】はプログラミングに関する問題解決をサポートします」のようなことをしたいのであれば、文字列の置換をするのがいいでしょう。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

Sane

2022/01/20 07:29

else｛　 resultDiv.innerHTML= の後ろにconst p=〜の部分を足していくのですか？文字列の使い方に苦戦しています。例えば、今日は友達と遊べて(楽しかった)です。と話し時に( )の部分をにっこりマークの画像に置き換えつつ、テキストを表示するにはどのようにしたらいいのでしょうか？

Lhankor_Mhy

2022/01/20 07:55

それ、質問に当初から書いてあれば、たぶん1時間ぐらいで解決していたでしょうね…… 上記の回答は忘れて、 resultDiv.innerHTML = finalTranscript.replace('楽しかった','<img src="smile.png">') + '' + interimTranscript + ''; みたいな感じでいいと思います。（試してないです）

Sane

2022/01/20 08:29

上手くいきました！ありがとうございます！ちなみに下のようにキーワードを消さず、画像の下にキーワードを出したままにすることも可能でしょうか？　　　　　　　　　　　(画像) 今日は○○をしたのが楽しかったです。

Lhankor_Mhy

2022/01/20 08:54

ruby要素を使うのが手っ取り早そうですね。 resultDiv.innerHTML = finalTranscript.replace('楽しかった','<ruby>楽しかった<rt><img src="smile.png"></rt></ruby>') + '' + interimTranscript + '';

Sane

2022/01/20 09:00

できました！何度もご質問してしまってすみません。ご丁寧に教えてくださったおかげで無事に完成することができました。本当にありがとうございました。

Lhankor_Mhy

2022/01/20 09:12

お役に立てたようで何よりです。

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