Use x-webkit-speech in an HTML/JavaScript extension

问题

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.

回答1:

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.

回答2:

if (document.createElement("input").webkitSpeech === undefined) {
    alert("Speech input is not supported in your browser.");
}

you can use this code

回答3:

Dont worry, just try following it should help

<!DOCTYPE html> 
<html>
<meta charset="utf-8" />  
<title>Speech Input Test</title>  
<h2>Speech Input Test</h2>
<input id="speech-input-field" type="text" x-webkit-speech="">
<html>

来源：https://stackoverflow.com/questions/5534153/use-x-webkit-speech-in-an-html-javascript-extension

标签

html5

google-chrome-extension

speech-recognition

speech