-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (76 loc) · 2.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<body>
<div class="centered">
<h1>Speak N Spell Alpha 🗣️🔤</h1>
Ask "How do you spell ______"?
</div>
<div id="resultUpper">WONDERFUL</div>
<div id="resultLower">wonderful</div>
<div class="libleft" id="info">
👨💻 <a href="http://cwmoriarty.com">cwmoriarty.com</a><br><br>
</div>
</body>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<script>
// document.getElementById('result').textContent="TESTES"
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
} else if ('SpeechRecognition' in window) {
recognition = new SpeechRecognition();
} else {
document.getElementById('info').textContent = "⚠️Speech Recognition not supported in this browser.";
}
recognition.continuous = true;
recognition.interimResults = false;
recognition.lang = 'en-US';
recognition.onresult = (event) => {
const transcript = event.results[event.results.length - 1][0].transcript.trim();
const regex = /how do you spell\s+(\w+)/i;
const match = transcript.match(regex);
if (match) {
document.getElementById('resultUpper').textContent = match[1].toUpperCase();
document.getElementById('resultLower').textContent = match[1].toLowerCase();
}
};
recognition.onerror = (event) => {
console.error('Speech recognition error', event);
};
recognition.onend = () => {
recognition.start();
};
recognition.start();
</script>
<style type="text/css">
body { font-family: Helvetica, Geneva, sans-serif; }
a { color: black; }
#resultUpper { font-family: "Open Sans"; font-size: 15vw; width: 100%; top: 10%; position: absolute; text-align: center;}
#resultLower { font-family: "Open Sans"; font-size: 13vw; width: 100%; top: 40%; position: absolute; text-align: center; color:darkblue;}
.centered {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, 0%);
width: 50%;
height: 30%;
font-size: calc(1vw + 1vh);
/*border: 1px solid black;*/
}
.centered h1
{
font-size: calc(2vw + 2vh);
}
@media (max-width: 768px) {
.centered {
width: 50%;
height: 50%;
font-size: calc(2vw + 2vh);
}
}
.libleft {
font-size: large;
position: fixed;
left:10;
bottom:10;
}
</style>