H5 adds voice input function

This time I will bring you the voice input function added to H5. What are the precautions for adding the voice input function to H5. The following is a practical case, let’s take a look.

What is introduced here is the powerful HTML function that everyone will use in the future. You can directly add voice function to the input box. Let's take a look at the implementation method first.

You can see the microphone icon on the right side of the input box. Click on the microphone to perform speech recognition.

In fact, it is very simple. Speech recognition is the basic function of html5. Its usage is

<input type=”text” speech x-webkit-speech />

If you like XHTML-like syntax, you can express it like this

<input type=”text” x-webkit-speech=”x-webkit-speech” />

Speech recognition was something that was unbelievable ten years ago. Even a few years ago, speech recognition on web pages could only be achieved using other methods, such as using Flashplayer and so on. But now, to obtain the voice, you only need to simply add a attribute tag to the input box, and it can be recognized.

Mobile devices such as browsers on mobile phones, as long as they support html5, should also support speech recognition. Try browsing this page on your Android?

In addition, if you want to use javascript to get the end of the speech recognition event, you can use onwebkitspeechchange

<input type=”text” speech x-webkit-speech onwebkitspeechchange=”alert(this.value)” />

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of H5 storage method

##postMessage implements cross-domain and cross-window messaging

The above is the detailed content of H5 adds voice input function. For more information, please follow other related articles on the PHP Chinese website!