Web Speech API

The Web Speech API enables you to incorporate Speech data into Web applications.

The Web Speech API has two parts: SpeechSynthesis (text-to-speech TTS) and SpeechRecognition (asynchronous Speech recognition). We’re going to focus today on speech synthesis, converting text into speech for playback

Second, speech synthesis

**SpeechSynthesis: ** controller interface for the SpeechSynthesis service that can be used to get information on the synthesized speech available on your device, as well as on start, pause, and other related commands.

**SpeechSynthesisUtterance: ** indicates a speech request. This includes what will be read by the voice service and how it will be read (e.g. language, pitch, volume).

Introduction to SpeechSynthesis method

** Speechsynthes.cancel () : ** Removes all speeches in the speech queue.

* * SpeechSynthesis getVoices () : * * returns the current equipment list of SpeechSynthesisVoice all available sound.

**SpeechSynthesis. Pause () : ** Places the SpeechSynthesis object on pause.

**SpeechSynthesis. Resume () : ** Sets the SpeechSynthesis object to a non-pause state: If it is paused, continue.

** Speechsynthes.speak () : ** Adds an utterance to the speech speech queue; It will play after the rest of the voice talk has played.

SpeechSynthesisUtterance

* * SpeechSynthesisUtterance. Lang: * * set the language of words. For example, zh-cn indicates Chinese

* * SpeechSynthesisUtterance. Pitch: * * set the speaking tone (pitch). Ranges from 0 (minimum) to 2 (maximum). The default value is 1

* * SpeechSynthesisUtterance. Rate: * * set the speed of speech. The default value is 1. The range is 0.1 to 10, indicating a multiple of the speed, for example, 2 indicating twice the normal speed

* * SpeechSynthesisUtterance. Text: * * set when speaking to synthesis of text content.

* * SpeechSynthesisUtterance. Voice: * * set used for voice.

* * SpeechSynthesisUtterance. Volume: * * set will be in the speaker volume. The range is 0 to 1, and the default is 1

V. VUE project case

<template> < button@click ="playVoice"> </button> </template> <script> const synth = window. const msg = new SpeechSynthesisUtterance(); export default { data() { return {}; }, methods: {playVoice() {this.handlespeak (' do you have a lot of question mark ')}, // handleSpeak(text) {MSG. Text = text; MSG. Lang = "zh-cn "; MSG. Volume = 1; // Voice volume: 1 MSG. Rate = 1; // ่กจ ้€Ÿ : 1 MSG. Pitch = 1; // 1 synth.speak(MSG); }, // voice stop handleStop(e) {MSG. Text = e; msg.lang = "zh-CN"; synth.cancel(msg); }}}; </script>Copy the code