質問編集履歴

2

詳細を追加しました

2022/01/20 04:21

投稿

Sane
Sane

score5

test CHANGED
File without changes
test CHANGED
@@ -103,3 +103,6 @@
103
103
 
104
104
 
105
105
  音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、画像が表示できませんでした。どうしたらいいか教えていただきたいです!
106
+
107
+ こちらはWebサーバー上で動くものにしたいです。
108
+ また、キーワードに含まれていないものは画像を表示せず、会話を自動テキスト化するだけにしたいです。現在すでにテキスト化することの方はできています。

1

コードを載せ直しました。

2022/01/20 02:58

投稿

Sane
Sane

score5

test CHANGED
File without changes
test CHANGED
@@ -1,62 +1,57 @@
1
- 音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、上手くいきませんでした。どうしたらいいか教えていただきたいです!
1
+ ```html
2
2
 
3
+ <!DOCTYPE html>
4
+ <html lang="ja">
5
+ <head>
6
+ <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>
7
+ </header>
8
+  <div>
9
+   <button id="start-btn">start</button>
10
+   <button id="stop-btn">stop</button>
11
+   <div id="result-div"></div>
12
+  </div>
3
13
 
14
+  <script>
15
+   const startBtn = document.querySelector('#start-btn');
16
+   const stopBtn = document.querySelector('#stop-btn');
17
+   const resultDiv = document.querySelector('#result-div');
4
18
 
5
- <!DOCTYPE html>
6
- <html lang="ja">
19
+   SpeechRecognition = webkitSpeechRecognition ||
7
- <head>
20
+   SpeechRecognition;
8
- <meta charset="UTF-8">
9
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
- <title>Document</title>
21
+   let recognition = new SpeechRecognition();
11
- <link rel="stylesheet" href="style.css">
12
- </head>
13
- <body>
14
- <header>
15
- <h1>○○○○○</h1>
16
- </header>
17
- <div>
18
- <button id="start-btn">start</button>
19
- <button id="stop-btn">stop</button>
20
- <div id="result-div"></div>
21
- </div>
22
22
 
23
- <script>
24
- const startBtn = document.querySelector('#start-btn');
25
- const stopBtn = document.querySelector('#stop-btn');
23
+   recognition.lang = 'ja-JP';
26
- const resultDiv = document.querySelector('#result-div');
24
+   recognition.interimResults = true;
25
+   recognition.continuous = true;
27
26
 
28
- SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
27
+   let finalTranscript = '';
28
+   
29
- let recognition = new SpeechRecognition();
29
+   recognition.onresult = (event) => {
30
+     let interimTranscript = ' ';
31
+    for (let i = event.resultIndex; i < event.results.length; i++) {
32
+     let transcript = event.results[i][0].transcript;
33
+     if (event.results[i].isFinal) {
34
+      finalTranscript += transcript;
35
+      } else {
36
+      interimTranscript = transcript;
37
+     }
38
+    }
39
+ resultDiv.innerHTML = finalTranscript + '<i style="color:#808080;">' + interimTranscript + '</i>';
40
+ }
30
41
 
31
- recognition.lang = 'ja-JP';
32
- recognition.interimResults = true;
42
+ startBtn.onclick = () => {
33
- recognition.continuous = true;
43
+ recognition.start();
44
+ }
45
+ stopBtn.onclick = () => {
46
+ recognition.stop();
47
+ }
48
+ </script>
49
+ </body>
50
+ </html>
34
51
 
35
- let finalTranscript = '';
52
+ ```
36
53
 
37
- recognition.onresult = (event) => {
38
- let interimTranscript = '';
39
- for (let i = event.resultIndex; i < event.results.length; i++) {
40
- let transcript = event.results[i][0].transcript;
41
- if (event.results[i].isFinal) {
42
- finalTranscript += transcript;
43
- } else {
54
+ ```css
44
- interimTranscript = transcript;
45
- }
46
- }
47
- resultDiv.innerHTML = finalTranscript + '<i style="color:#808080;">' + interimTranscript + '</i>';
48
- }
49
-
50
- startBtn.onclick = () => {
51
- recognition.start();
52
- }
53
- stopBtn.onclick = () => {
54
- recognition.stop();
55
- }
56
- </script>
57
- </body>
58
- </html>
59
-
60
55
 
61
56
  * {
62
57
  box-sizing: border-box;
@@ -100,4 +95,11 @@
100
95
  #result-div{
101
96
  margin-top: 25px;
102
97
  zoom: 1.8;
103
-
98
+ }
99
+
100
+ ```
101
+
102
+
103
+
104
+
105
+ 音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、画像が表示できませんでした。どうしたらいいか教えていただきたいです!