Create a Gonik search engine just like a google search engine...
The HTML5 Web Speech API has been around for few years now but it takes slightly more work now to include it in your website.
Here's a html code...
<style>
.speech {border-style: solid; width: 400px; padding: 0; margin: 0;
height:30px; }
.speech input { height: 30px;}
.speech img {float: right; width: 35px }
body {
padding:150px 500px;
font-size: 10em;
font-style: italic;
}
</style>
<!-- Search Form -->
<form id="labnol" method="get" action="https://www.google.com/search">
<body><font color="orange">Gonik</body>
<div class="speech">
<input type="text" size="46" name="q" id="transcript" placeholder="
Search Goonik or type URL" />
<img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif"
title="Search by voice" />
</div>
</form>
<!-- HTML5 Speech Recognition API -->
<script>
function startDictation() {
if (!('webkitSpeechRecognition' in window)) {
alert("Microphone is Disabled");
}
else{
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = "en-US";
recognition.start();
recognition.onresult = function(e) {
document.getElementById('transcript').value
= e.results[0][0].transcript;
//console.log('You said: ', event.results[0][0].transcript);
recognition.stop();
document.getElementById('labnol').submit();
};
recognition.onerror = function(e) {
recognition.stop();
}
}
}
</script>
Now, you have done...
Just save your file and run on your browser using a server(xampp server or any other) and see the magic of "Gonik Search Engine"...
Some Notes before running:
1: Use a Browser which can access you microphone (Chrome is fine).
2: Make sure you are running from a server (put the file into a xampp server or any other).
3: You must have an internet connection.
Here's a html code...
<style>
.speech {border-style: solid; width: 400px; padding: 0; margin: 0;
height:30px; }
.speech input { height: 30px;}
.speech img {float: right; width: 35px }
body {
padding:150px 500px;
font-size: 10em;
font-style: italic;
}
</style>
<!-- Search Form -->
<form id="labnol" method="get" action="https://www.google.com/search">
<body><font color="orange">Gonik</body>
<div class="speech">
<input type="text" size="46" name="q" id="transcript" placeholder="
Search Goonik or type URL" />
<img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif"
title="Search by voice" />
</div>
</form>
<!-- HTML5 Speech Recognition API -->
<script>
function startDictation() {
if (!('webkitSpeechRecognition' in window)) {
alert("Microphone is Disabled");
}
else{
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = "en-US";
recognition.start();
recognition.onresult = function(e) {
document.getElementById('transcript').value
= e.results[0][0].transcript;
//console.log('You said: ', event.results[0][0].transcript);
recognition.stop();
document.getElementById('labnol').submit();
};
recognition.onerror = function(e) {
recognition.stop();
}
}
}
</script>
Now, you have done...
Just save your file and run on your browser using a server(xampp server or any other) and see the magic of "Gonik Search Engine"...
Some Notes before running:
1: Use a Browser which can access you microphone (Chrome is fine).
2: Make sure you are running from a server (put the file into a xampp server or any other).
3: You must have an internet connection.
No comments:
Post a Comment
Thanks For Reading! Visit Again