First off I am trying to create a temporary solution that I don't expect to work forever. Just an experiment if you will!
I have the following running! What I am trying to do is initiate the voice search on page load. Any ideas for a way to get this working! Note: You will need chrome browser to see the mic input.
/
<html>
<head>
<style>
#mike {
font-size: 25px;
width: 25px;
height: 25px;
cursor:pointer;
border: none;
position: absolute;
margin-left: 5px;
outline: none;
background: transparent;
}
#txt {
height: 150px;
width: 150px;
}
</style>
<script>
var mike = document.getElementById('mike');
mike.onfocus = mike.blur;
mike.onwebkitspeechchange = function(e) {
console.log(e); // SpeechInputEvent
document.getElementById('txt').value = mike.value;
};
</script>
</head>
First off I am trying to create a temporary solution that I don't expect to work forever. Just an experiment if you will!
I have the following running! What I am trying to do is initiate the voice search on page load. Any ideas for a way to get this working! Note: You will need chrome browser to see the mic input.
http://jsfiddle.net/dirtyd77/99amf/
<html>
<head>
<style>
#mike {
font-size: 25px;
width: 25px;
height: 25px;
cursor:pointer;
border: none;
position: absolute;
margin-left: 5px;
outline: none;
background: transparent;
}
#txt {
height: 150px;
width: 150px;
}
</style>
<script>
var mike = document.getElementById('mike');
mike.onfocus = mike.blur;
mike.onwebkitspeechchange = function(e) {
console.log(e); // SpeechInputEvent
document.getElementById('txt').value = mike.value;
};
</script>
</head>
Share Improve this question edited Apr 19, 2013 at 18:09 Dom 40.5k12 gold badges54 silver badges82 bronze badges asked Apr 13, 2013 at 2:38 tylertyler 1,2932 gold badges17 silver badges40 bronze badges
5 Answers
Reset to default 13 +25Unfortunately, this is not possible. The most important reason being that it would be an invasion of privacy/security hazard. A user must willingly choose to be recorded (in this case, by mouseclick). If the event can be emulated and the user is unaware that they are being recorded, there could be serious legal repercussions. Hope this helps!
UPDATE:
This is from a document about Speech Input:
To minimize the chance of users unwittingly let web pages record speech without their knowledge, implementations must abort an active speech input session if the web page lost input focus to another window or to another tab within the same user agent.
Here are concerns from that same document :
1) Spoken password inputs can be problematic from a security perspective, but it is up to the user to decide if they want to speak their password.
2) Speech input could potentially be used to eavesdrop on users. Malicious webpages could use tricks such as hiding the input element or otherwise making the user believe that it has stopped recording speech while continuing to do so. They could also potentially style the input element to appear as something else and trick the user into clicking them. An example of styling the file input element can be seen at http://www.quirksmode.org/dom/inputfile.html. The above recommendations are intended to reduce this risk of such attacks.
Also, according to this article from html5rocks.com:
the first time speech recognition is used, Chrome needs to ask the user for permission to use the microphone, in which case onstart only fires when and if the user allows permission.
With this in mind, it would be very difficult, if not nearly impossible, to implement onload events without the user's consent, since Google has taken measures to protect against malicious webpages. Google has also prevented users from simulating click events.
After trying a bunch of stuff and researching, I found that:
You cannot programmatically activate the speech input. This is to prevent abuse. https://code.google.com/p/html5rocks/issues/detail?id=594
That's from google.
Tried like hell to make the jFiddle work. Used a bunch of jquery functions, tried target to simulate a click, a few third party stuff -- looks they've got it pretty well secured.
You can use webkitSpeechRecognition which doesn't require a button click to activate. Then just direct whatever text you capture into the input.
webkitSpeechRecognition will prompt the user to authorize the site to use the mic, but as long as that permission exists, it can start listening for user input as soon as the page loads. Make sure your site uses HTTPS so that the browser only asks the user for the permission once, and remembers it.
You might also want to check out annyang, which is a JavaScript library that makes dealing with speech recognition super-easy.
Have you tried this approach:
x-webkit-speech: onwebkitspeechchange not resting the value
If you look at the example they're doing something else entirely via
onwebkitspeechchange="webkitSpeechChange(this);"
I'd imagine you need to add that to your code.
The first thing that comes to mind is to use jQuery. Here is a little of how to:
$(document).ready(function(){
startMikeInput();
}
This will initiate your mic input when the page is done loading. You will also need to reference the jQuery in your script tag. It might be helpful too to use an external js file.