Comment implémenter la synthèse vocale dans vue

Vue implémente des méthodes de synthèse vocale : 1. Créez un objet SpeechSynthesisUtterance ; 2. Implémentez le jugement du navigateur via "isIe(){...}" ; 3. Utilisez simplement ie selon le code, tel que "if( this.isIe())(let voiceObj = new ActiveXObject("Sapi.SpVoice")voiceObj.Rate = ...)".

L'environnement d'exploitation de ce tutoriel : système windows7, vue3, ordinateur Dell G3.

Comment vue implémente-t-il la synthèse vocale ?

Explication détaillée de la fonction de synthèse vocale implémentée par vue

Actuellement, h5 a ajouté une fonction de synthèse vocale (mais elle est en cours d'amélioration et est à peine utilisable), h5 a ajouté une nouvelle instance SpeechSynthesisUtterance

Tout d'abord, créez un nouvel objet SpeechSynthesisUtterance

Exemples d'utilisation Quelques propriétés de l'objet, notamment :

• text – le contenu du texte à synthétiser, une chaîne.

• lang - la langue utilisée, chaîne, par exemple : "zh-cn"

• voiceURI - spécifiez la voix et le service que vous souhaitez utiliser, chaîne.

• volume – le volume du son, la plage est de 0 à 1, la valeur par défaut est 1.

• rate - débit de parole, valeur numérique, la valeur par défaut est 1, la plage est de 0,1 à 10, indiquant un multiple de la vitesse de parole, par exemple, 2 représente le double de la vitesse de parole normale.

• hauteur – représente la hauteur de la parole, valeur numérique, allant de 0 (minimum) à 2 (maximum). La valeur par défaut est 1.

Méthode

• speak() Ajoutez l'instance correspondante à la file d'attente vocale

• cancel() Supprimez toutes les voix de la file d'attente Si elle est en cours de lecture, arrêtez-la directement

• pause( ) Mettre la voix en pause

• resume() Reprendre la voix en pause

• getVoices Obtenez le tableau de langues pris en charge Remarque : il doit être ajouté à l'événement voiceschanged pour prendre effet

Mais cette méthode ne prend pas en charge le. ancienne version d'IE, il est nécessaire d'ajouter la méthode de jugement du navigateur

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

puis selon la méthode d'utilisation d'IE

   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)
    },

apprentissage recommandé : "tutoriel vidéo vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!