Detailed explanation of how to add voice function to input box in H5

This article will introduce to you how to use HTML5 to add voice input function to the input box. The implementation method is very simple. Friends who need it can refer to this article.

Here are the powerful HTML functions that you will use in the future. You can Directly add the 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 should also support speech recognition as long as they support html5. 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)” />

[Related recommendations]

1. Html5 free video tutorial

2. What should I do if the input box is blocked when making a virtual keyboard in H5?

3. Detailed explanation of the method of implementing full-screen playback on WeChat in HTML5

4. Detailed explanation of browser compatibility issues with H5 new tags

5. Teach you a detailed example of how to use H5 to change the current url without refreshing

The above is the detailed content of Detailed explanation of how to add voice function to input box in H5. For more information, please follow other related articles on the PHP Chinese website!