5

Google chrome has a very nice speech recognition control in it's browser. For example if I place this html tag:

<input  id="speech" type="text" speech="speech" x-webkit-speech="x-webkit-speech" onspeechchange="processspeech();" onwebkitspeechchange="processspeech();" />

with it's corresponding javascript:

<script type="text/javascript">

        function processspeech() {
            var speechtext = $("#speech").val();
            alert(speechtext);
        }

</script>

then I will be able to use google's speech recognition. I am wondering if it is possible to send a click to that input control in order to activate it with JavaScript. In other words I want to start recording the message by clicking my button other than the little microphone. I plan to use the website locally so maybe I can send a click some other way.

Tono Nam
  • 34,064
  • 78
  • 298
  • 470

2 Answers2

1

If it acts like a <file> button, you can try two things:

  • Simulate a click event on the microphone. If speech recognition needs a long click, it won't work.
  • Hide the microphone and put your icon behind it (with a lower z-index). When a user clicks your icon, he will actually click the microphone.

These are some tricks used generally to style <input type="file" />, that's for instance how plupload does it.

ldiqual
  • 15,015
  • 6
  • 52
  • 90
1

I manage to do it with a program called autoit. here are the steps:

1) download AutoIt and install.

2) Create the html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function processspeech() {
            var speechtext = document.getElementById("speech").value;                   
            alert(speechtext);          
        }

    </script>
</head>
<body>


    <div id="speechinput"> 
        <input  id="speech" type="text" speech="speech" x-webkit-speech="x-webkit-speech" onspeechchange="processspeech();" onwebkitspeechchange="processspeech();" />          
    </div> 

</body>
</html>

3) Open the html file that was just created on the last step with google chrome

enter image description here

4) when you instal autoit there is a program called autoit window info launch it and click in the summary tab

enter image description here

5) drag the finder tool to google's chrome window (specifically to the microphone).

enter image description here

6) create a new autoit script:

enter image description here

I forgot to highligh the ControlClick Coords you will need that...

7) type the following function in autoit with the results that you got from step 5:

enter image description here

8) Run the script by pressing {f5} and a click should then be sent to that control even if the window is hidden! you can then use ajax to send the result to your web server etc...

Tono Nam
  • 34,064
  • 78
  • 298
  • 470