Speech Synthesis API in JS

The original link

Introduction to the

There are actually two kinds of APIS for Web Speech in HTML5. One is “Speech Recognition” and the other is “Speech Synthesis”. These two terms actually refer to “Speech to text”. “And” Text to speech “.

This article is about Speech Synthesis. Please move on to Speech Recognition.

To get the browser to speak, just:

Let speechInstance = new SpeechSynthesisUtterance(' Hello, I am speechInstance. '); speechSynthesis.speak(speechInstance);Copy the code

Is so simple, why not copy into the browser to try?

SpeechSynthesis is primarily used to build instances of speechSynthesis. Presumably, speechSynthesis is used to trigger the speech module of the browser that allows the browser to read the content.

The SpeechSynthesisUtterance instance has the following properties that you can set to adjust your speech.

  • Text – The text content to be synthesized, a string.
  • Lang – Language used, string, for example: “zh-cn”
  • VoiceURI – Specifies the voice and service you want to use, a string.
  • Volume – The volume of a sound. The value ranges from 0 to 1. The default value is 1.
  • Rate – Speed, number. The default value is 1, ranging from 0.1 to 10, and represents a multiple of the speed, for example, 2 represents twice the normal speed.
  • Pitch – The pitch of the speech, the number, ranging from 0 (minimum) to 2 (maximum). The default value is 1.

Here are some other methods:

  • Onstart – Callback at the beginning of speech synthesis.
  • Onpause – A callback to pause speech synthesis.
  • Onresume – Callback when speech synthesis resumes.
  • Onend – Callback at the end of speech synthesis.

There are methods for speechSynthesis objects:

  • Speak () – can receive only SpeechSynthesisUtterance as the sole argument, which is used to read synthesized speech.
  • Stop () – Stops the synthesis process immediately.
  • Pause () – Pauses the composition process.
  • Resume () — Resumes the composition process.
  • GetVoices () – This method takes no arguments and returns an array of browser-supported voice packages.

SpeechSynthesis. GetVoices () returns for each different browsers and different versions of the return is different, it is roughly:

Pay attention to

Language package is not stable, sometimes return empty, you can use timer to try several times.

The main code

// Vue methods: {onChange (e) {let chosenItem = this.voicedata.filter (item => {return e == item.lang; }); this.queryParams.voiceURI = chosenItem[0].voiceURI; }, onSpeak () { this.speechInstance = new SpeechSynthesisUtterance(); Object.keys(this.queryParams).forEach(key => { this.speechInstance[key] = this.queryParams[key]; }) console.log(this.speechInstance); speechSynthesis.speak(this.speechInstance); } }, mounted () { let timer = setInterval(() => { if(! This. VoiceData. Length) {/ / obtain language pack this. VoiceData = speechSynthesis. GetVoices (); } else { clearInterval(timer); }}, 500); }Copy the code

Give it a try

A rough test shows that Chrome on Mac supports volume and pitch, but not rate. Firefox and Safari do not support volume, rate, and pitch.

Mobile end under the IOS Chrome, UC and Safari, Android Chrome, unexpectedly all perfect support 😄!

But perhaps because Of Google’s wall, Chrome’s voice is spotty, while Firefox and Safari are.

It’s fun to try a few other languages, such as Japanese (JA-JP), Cantonese (zh-HK), Taiwanese (zh-TW), etc 😂. Assuming your browser has the language pack.

Strange is that Chinese choose to read in English (en-us), the return is a string of not quite understand the male voice, hope that the English ability of the great god more advice 🙏.

What can do

After the improvement of the support problem, can think of many uses.

  • The blind man to read
  • The translation? It may also incorporate speech recognition
  • Combined with the previous text recognition, the recognition of the text into speech is perfect
  • , etc.

The resources

  • SpeechSynthesisUtterance
  • Introduction to HTML5 Speech Synthesis API