Menu
I am trying to use the new x-webkit-speech function in a simple HTML/JavaScript extension in Google Chrome. I, however, have tried and tried looking at a bunch of examples and cannot get it to successfully call the function. I have seen other people do it, and I don't really get why I cannot. I put the JavaScript code into a separate file, but I include using <script src="filename.js"> this is my line for the x-webkit-speech....
<input id="speechInput" type="text" style="font-size:25px;" x-webkit-speech speech onwebkitspeechchange="onChange()" />
Now, if I change onChange() to alert(this.value), it executes an alert box with the value of the speech input in it. So I really do not understand why I cannot just call another function. I am not the greatest JavaScript or HTML programmer, but I have researched this a great deal. Everyone defines things differently, and since there is no solid API, it is hard to really know who has the correct form, because they all seem to work somehow.
My onChange function looks like
function onChange() { alert("in onChange"); }
I am just trying to test and make sure it's going to the function, but I get nothing.
487
The x-webkit-speech attribute can be used on any HTML5 input element with a type of text, number, tel, or search. Unfortunately, it's not permitted on textarea fields. I suspect that's to stop people using it for long dictations which could result in inaccurate results or high memory usage.
First, create a new JavaScript file and name it speechRecognition. js . Next, add the script to the HTML file using the script tag after the body tag. Adding the script tag after the body tag will make sure that the script file is loaded after all the elements have been loaded to the DOM which aids performance.
You can also start speech input by focussing the element and pressing Ctrl + Shift + . on Windows, or Command + Shift + .
The speech recognition part of the Web Speech API allows authorized Web applications to access the device's microphone and produces a transcript of the voice being recorded. This allows Web applications to use voice as one of the input & control method, similar to touch or keyboard.
I was playing around with this feature today and actually your code seems to be OK and works for me. The full version would be the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Speech</title>
</head>
<script type="text/javascript" charset="utf-8">
function onChange() {
alert('changed');
}
</script>
<body>
<input id="speechInput" type="text" style="font-size:25px;"
x-webkit-speech onwebkitspeechchange="onChange()" />
</body>
</html>
Though I did notice that onChange() does not get called if Chrome fails to recognize the speech. I'm using Chrome 11.0.696.28 beta. Also the speech attribute is not necessary if you're targeting only webkit-based browsers like Chrome or Safari. And even if you leave it in, it doesn't work with Firefox 4. Not sure about IE9 since I don't have it.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
