How to implement text-to-speech in vue

Vue implements text-to-speech method: 1. Create a SpeechSynthesisUtterance object; 2. Implement browser judgment through "isIe(){...}" method; 3. According to the ie usage method, the code Such as "if(this.isIe()){let voiceObj = new ActiveXObject("Sapi.SpVoice")voiceObj.Rate = ...)".

The operating environment of this tutorial: windows7 system, vue3, Dell G3 computer.

How does vue implement text-to-speech?

Detailed explanation of the text-to-speech function in vue

Currently, h5 has added a new text-to-speech function (but it is being improved and is barely usable), h5's new SpeechSynthesisUtterance instance

First create a new SpeechSynthesisUtterance object

Use some attributes of the instance object, including:

• text – the text content to be synthesized, a string.

• lang – the language used, string, for example: "zh-cn"

• voiceURI – specifies the voice and service you want to use, String.

• volume – The volume of the sound, ranging from 0 to 1, the default is 1.

• rate – speaking rate, numerical value, the default value is 1, the range is 0.1 to 10, indicating a multiple of the speaking speed, for example, 2 represents twice the normal speaking speed.

• pitch – Indicates the pitch of speech, numerical value, ranging from 0 (minimum) to 2 (maximum). The default value is 1.

Method

• speak() Add the corresponding instance to the voice queue

• cancel() Delete all the voices in the queue. If it is playing, stop it directly

• pause() Pause the voice

• resume() Resumes the paused voice

• getVoices Gets the supported language array. Note: It must be added to the voiceschanged event to take effect

But This method does not support the old version of IE. You need to add the browser judgment method

isIe(){
    if(!!window.ActiveXObject || "ActiveXObject " in window){
        return true
    }else{
        return false
    }
},

and then follow the IE usage method

   voice(e){
    window.speechSynthesis.cancel()
      let timer
      timer = setInterval(() => {
        let msg = e
        if(this.isIe()){
            let voiceObj = new ActiveXObject("Sapi.SpVoice")
            voiceObj.Rate = -1 // 语速
            voiceObj.Volume = 50 // 音量
            voiceObj.Speak(msg,1)
        }else{
            let speakMsg = new 
               SpeechSynthesisUtterance(msg)
            speakMsg.rate = 1 // 语速
            speakMsg.pitch = 3 // 音量
            window.speechSynthesis.speak(speakMsg)
        }
     }, 1000)
     setTimeout(() => {
        // 一段时间后清除定时器
        clearInterval(timer)
     }, 1000)
    },

. Recommended learning: "vue.js video tutorial"

The above is the detailed content of How to implement text-to-speech in vue. For more information, please follow other related articles on the PHP Chinese website!