-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (112 loc) · 3.93 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Work</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
}
::selection {
color: none;
background: none;
}
.fun{
background: none;
border: 1px solid #e2e2e2;
outline: none;
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 5px;
}
.navbar {
padding-top: 5px;
padding-bottom: 5px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
z-index: 10;
position: fixed;
width: 100%;
letter-spacing: 5px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Voice Assist</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://makemethink.github.io/Voice-Assist/">Home</a></li>
<li><a href="https://makemethink.github.io/Color">Color</a></li>
</ul>
</div>
</div>
</nav>
<div class="container bg-1 text-center ">
<h2 style="margin-top: 100px;"> NICE TO MEET YOU</h2><br>
<input style="outline:none" class="btn btn-default btn-lg" type="button" id="box" onclick="record()" value="I'm ready" >
</div><br>
<div class="container bg-2 text-center">
<h3 class="margin">Description</h3>
<p style=" padding: 10px; margin-top:25px" id="her" >Hello! guys this is my small try, this is a site which gets your voice and convert it to text. If you get boared to type like me you can use this. Don't worry this site doesn't takes your data. To start click the button above.</p>
<textarea name="name" class="content" id="here"style="border: none;outline: none; width:70% ;"></textarea>
<br> <a href="https://makemethink.github.io/Voice-Assist/" style="text-decoration: none; color:#404040"> <button type="button" class="fun" name="button">Reset</button> </a>
<button type="button" class="nun" onclick="myFunction()" name="butt" style="background:none;border: 1px solid #e2e2e2; outline: none; padding: 5px 15px 5px 15px">Copy</button>
</div>
<script type="text/javascript">
function funny(){
document.getElementById("id").classList.toggle("change");
document.getElementById("navs").classList.toggle("change");
}
function record(){
const recognition = new window.webkitSpeechRecognition();
const content = document.querySelector('.content');
recognition.lang = "en-GB";
recognition.onstart =
function(){
console.log('voice');
}
document.getElementById("her").style.display = "none";
recognition.onresult= function(event){
const current = event.resultIndex;
const transcript = event.results[current][0].transcript;
content.textContent = transcript;
readOutLoud(transcript)
}
recognition.start();
function readOutLoud(message)
{
const speech = new SpeechSynthesisUtterance();
speech.text = message;
speech.volume=1;
speech.rate=1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
}
function myFunction() {
var a = document.getElementById("here");
a.select();
a.setSelectionRange(0, 99999);
document.execCommand("copy");
}
</script>
</body>
</html>