Question

I’m using the x-webkit-speech attribute on an input element. When the microphone icon is clicked I’d like to fire a Javascript function but can’t seem to figure out a way to detect the click. Is this even possible?

Answer 1

Here’s what I’ve figured out, the W3C Speech Input API Specification (Draft) does specify an onspeechstart and on onspeechend however at time of writing Chrome hasn’t yet implemented these as onwebkitspeechstart and onwebkitspeechend.

So my work around is creating two input elements one uses x-webkit-speech but has a small width so its only displaying the microphone icon. The other input doesn’t have x-webkit-speech. This allows me to detect the onclick event on the x-webkit-speech input and when the webkitspeechchange event is fired I move the text to the larger input.

Also there’s a little trick I found, you can scale the microphone size:

  #theinput {
    -webkit-transform: scale(3.0, 3.0);
    -moz-transform: scale(3.0, 3.0);
    -ms-transform: scale(3.0, 3.0);
    transform: scale(3.0, 3.0);
  }