Web Speech API is used to implement speech recognition and synthesis in modern web development, and its core is divided into two parts: SpeechRecognition is used to convert speech to text, and SpeechSynthesis is used to convert text to speech. 1. To realize speech recognition, you need to create a SpeechRecognition instance and set parameters such as language and whether to continuously recognize. Start() and listen to onresult to obtain the results. Pay attention to the user triggering and avoid frequent calls to start(); 2. To realize speech synthesis, create SpeechSynthesisUtterance object to set text, language, speech speed, etc. and call speak() to play. You can use pause(), resume(), and cancel() to control the play queue. Get the voice list. It is recommended to listen to onvoiceschanged events; 3. In actual applications, you need to pay attention to the problem of automatic stopping of the mobile terminal. You can restart the recognition in onend. The recognition delay should reduce the frequency of start/stop calling. The synthesis does not pronunciation should check mute, permissions and voice source settings, and pay attention to browser compatibility issues to provide downgrade solutions.

Voice recognition and synthesis are becoming increasingly important in modern web development, especially today when mobile devices are popular. The Web Speech API in H5 provides native support, allowing us to easily implement voice input and output functions in web pages. If you want to know how to use it to "listen" users' voice, or make the web page "speak", then this article goes straight to the point.

1. What is the Web Speech API?

The Web Speech API is a set of interfaces provided by the browser, allowing web pages to invoke the device's speech recognition and speech synthesis functions through JavaScript. Currently it is mainly divided into two parts:

• SpeechRecognition : Converts what the user says into text.
• SpeechSynthesis : Let the web page read the text aloud.

This API is currently supported in Chromium-based browsers such as Chrome and Edge. Safari and Firefox support are limited, so you need to pay attention to compatibility issues when using it.

2. How to achieve voice recognition?

Voice recognition is one of the most commonly used functions of the Web Speech API, such as for voice search, voice input and other scenarios.

To start recognizing speech, you first need to create a SpeechRecognition instance:

 const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

Then some parameters can be set, such as whether to continuously recognize, language type, etc.:

 recognition.continuous = false; // Discontinuous recognition, say one sentence and stop one sentence recognition.lang = 'zh-CN'; // Set Chinese recognition

Then start the recognition:

 recognition.start();

Multiple events will be triggered during the recognition process, such as onresult means that the recognition result has returned:

 recognition.onresult = function(event) {
    const transcript = event.results[0][0].transscript;
    console.log('You are saying:', transcript);
};

A few things to note:

• The user needs to actively trigger recognition behavior (such as clicking a button), otherwise it may be blocked by the browser.
• It is best to call abort() or stop() before calling start() multiple times to avoid errors.
• Testing on mobile is more accurate, as microphone quality is usually better.

3. How to achieve voice synthesis?

Voice synthesis is suitable for use in scenarios such as voice assistants and reading prompt messages. It is used more easily than identification.

First create a SpeechSynthesisUtterance object:

 const msg = new SpeechSynthesisUtterance();
msg.text = 'Hello, this is a voice broadcast';
msg.lang = 'zh-CN';
msg.rate = 1; // The speech speed is 1 by default
msg.pitch = 1; // Tone

Then call speak() method to play the voice:

 window.speechSynthesis.speak(msg);

Common operations include:

• Play queue: Continuous calls to speak() will queue up to play
• Pause/continue: You can use pause() and resume()
• Cancel all playbacks: Use cancel()

You can also get a list of voices supported by the system:

 const voices = window.speechSynthesis.getVoices();
console.log(voices);

But note: Some browsers load voice lists asynchronously, and it is recommended to listen to onvoiceschanged event before obtaining it.

4. Tips in practical applications

• Can't voice recognition be turned on all the time?
  Yes, long runs may automatically stop, especially on mobile. You can consider calling start() again in the onend event to maintain the listening state.

• What to do if there is a delay in speech recognition?
  Try to start recognition after the user has clarified his intentions, and do not call start/stop frequently to reduce the burden on the browser.

• No pronunciation of pronunciation?
  Check whether the browser is muted, has permissions, and whether the correct language and voice source is set.

• Different browsers perform inconsistently?
  The current Web Speech API is not fully standardized, so it is recommended to perform feature detection and give a downgrade plan or prompt.

Basically that's all. Using the Web Speech API well can make your H5 page more interactive. Although it is not particularly complicated, some details are easy to ignore, especially cross-platform compatibility.

The above is the detailed content of H5 Web Speech API: Speech Recognition and Synthesis. For more information, please follow other related articles on the PHP Chinese website!