Direct Voice/Speech Input on Mobile Browser

Question

I would like to make a web application which will need to deal with many short user inputs, but instead of typing all the texts the user should be able to use the microphone.

I know that iPhones and Android Smartphones do have a "microphone button" on the keyboard, but both platforms require to focus the input first in order to start recording. It would be much better if I had only a button, because otherwise you don't really feel like you're intended to perform the input using your voice.

I tried using the x-webkit-speech attribute on my Android phone, but either Dolphin HD nor Google Chrome did show a real speech input field.

Is there a way to open the speech input dialogue directly without making the keyboard visible first or do I simply expect to much?

Answer 1

(Assuming speech-input is actually enabled in the browser,) you could only show the 'microphone-button' and redirect the input to wherever you want, like in this example a text-box:

<script type="text/javascript">
function transcribe(words){
    document.getElementById("mic").value="";
    document.getElementById("speech").value=words;
    document.getElementById("speech").focus();
}
</script>
Speech input for textarea - click the microphone icon and talk: <br> 
<br>
<textarea id="speech" cols="50"></textarea>
<input id="mic" style="width:15px; height:20px; border:0px; background-color:transparent" x-webkit-speech onwebkitspeechchange="transcribe(this.value)">

Hope this helpes!