-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathvoice_assistant.html
111 lines (101 loc) · 3.42 KB
/
voice_assistant.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
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speech Assistant</title>
<link rel="icon" href="css\qsee-parent-non-shadow.png" />
<link rel="stylesheet" href="css\voice_assistant.css" />
<style>
/* body {
background-image: url(https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60);
} */
/* h1 {
color: crimson;
} */
/* .talk {
background-color: cyan;
border-radius: 20px;
} */
/* .content {
color: rgb(139, 189, 189);
} */
</style>
</head>
<body>
<div class="upper">
<!-- <img src="img\3line.png" class="tlines" /> -->
<a href="parent-dashboard.html"><button class="back"></button> </a>
<a href="pickrole.html"><button class="home"></button> </a>
</div>
<div class="background">
<center>
<button class="parent"></button>
</center>
<p></p>
<p>
<button class="profile1"></button>
<div class="text"><h2 class="h2">Hi I'm Qsee, how can I help you?</h2></div>
</p>
<p>
<div >
<h2 class="voice"></h2>
<!-- <img class="voice"src="css\voice.png"> -->
</div></p>
<!-- <p>
<button class="profile2"></button>
<div class="text2"><h2 class="hh2">Opening Ali’s Psychological report...</h2></div>
</p> -->
</div>
<center>
<div class="bottom">
<!-- <h1>Hi I'm Qsee, how can I help you?</h1> -->
<a class="rainbow rainbow-1"> <button class="talk">Click here to Talk</button><a/>
<!-- <h3 class="voice"></h3> -->
</center>
<script>
// The JavaScript Part Starts
const btn = document.querySelector(".talk");
const content = document.querySelector(".voice");
const report = ["opening report sir"];
const attendance = ["opening attendance sir"];
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.onstart = function () {
console.log("How Can I Help You ?");
};
recognition.onresult = function (event) {
const current = event.resultIndex;
const transcript = event.results[current][0].transcript;
content.textContent = transcript;
readOutLoud(transcript);
};
btn.addEventListener("click", () => {
recognition.start();
});
function readOutLoud(message) {
const speech = new SpeechSynthesisUtterance();
speech.text = "I am not able to understand ,sir";
if (message.includes("report")) {
const finalText = report[Math.floor(Math.random() * report.length)];
speech.text = finalText;
window.open("report.html");
}
if (message.includes("attendance")) {
const finalText =
attendance[Math.floor(Math.random() * attendance.length)];
speech.text = finalText;
window.open(
"attendance_chart.html"
);
}
speech.volume = 1;
speech.rate = 1.1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
</script>
</div>
</body>
</html>