質問編集履歴
2
詳細を追加しました
test
CHANGED
File without changes
|
test
CHANGED
@@ -103,3 +103,6 @@
|
|
103
103
|
|
104
104
|
|
105
105
|
音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、画像が表示できませんでした。どうしたらいいか教えていただきたいです!
|
106
|
+
|
107
|
+
こちらはWebサーバー上で動くものにしたいです。
|
108
|
+
また、キーワードに含まれていないものは画像を表示せず、会話を自動テキスト化するだけにしたいです。現在すでにテキスト化することの方はできています。
|
1
コードを載せ直しました。
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
|
-
|
19
|
+
SpeechRecognition = webkitSpeechRecognition ||
|
7
|
-
|
20
|
+
SpeechRecognition;
|
8
|
-
<meta charset="UTF-8">
|
9
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
10
|
-
|
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
|
-
|
23
|
+
recognition.lang = 'ja-JP';
|
26
|
-
|
24
|
+
recognition.interimResults = true;
|
25
|
+
recognition.continuous = true;
|
27
26
|
|
28
|
-
|
27
|
+
let finalTranscript = '';
|
28
|
+
|
29
|
-
|
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
|
-
r
|
42
|
+
startBtn.onclick = () => {
|
33
|
-
recognition.
|
43
|
+
recognition.start();
|
44
|
+
}
|
45
|
+
stopBtn.onclick = () => {
|
46
|
+
recognition.stop();
|
47
|
+
}
|
48
|
+
</script>
|
49
|
+
</body>
|
50
|
+
</html>
|
34
51
|
|
35
|
-
|
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
|
-
|
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
|
+
音声認識で特定のキーワードを話すと画像が表示されるようにしたいです。プログラミングはまだ不慣れなので色々と調べながら進めているのですが、画像が表示できませんでした。どうしたらいいか教えていただきたいです!
|