So implementieren Sie Text-to-Speech in Vue

Vue implementiert Text-to-Speech-Methoden: 1. Erstellen Sie ein SpeechSynthesisUtterance-Objekt. 2. Implementieren Sie die Browser-Beurteilung über „isIe(){...}“. 3. Verwenden Sie ie gemäß dem Code, z. B. „if( this .isIe()){let voiceObj = new ActiveXObject("Sapi.SpVoice")voiceObj.Rate = ...)".

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3, Dell G3-Computer.

Wie implementiert Vue Text-to-Speech?

Detaillierte Erläuterung der von vue implementierten Text-to-Speech-Funktion

Derzeit hat h5 eine Text-to-Speech-Funktion hinzugefügt (diese wird jedoch verbessert und ist kaum verwendbar), h5 hat eine neue SpeechSynthesisUtterance-Instanz hinzugefügt

Erstellen Sie zunächst ein neues SpeechSynthesisUtterance-Objekt.

Verwendungsbeispiele Einige Eigenschaften des Objekts, darunter:

• Text – der zu synthetisierende Textinhalt, eine Zeichenfolge.

• lang – die verwendete Sprache, Zeichenfolge, zum Beispiel: „zh-cn“

• voiceURI – Geben Sie die Stimme und den Dienst an, die Sie verwenden möchten, Zeichenfolge.

• Lautstärke – die Lautstärke des Tons, der Bereich liegt zwischen 0 und 1, der Standardwert ist 1.

• Rate – Sprechgeschwindigkeit, numerischer Wert, der Standardwert ist 1, der Bereich liegt zwischen 0,1 und 10, was ein Vielfaches der Sprechgeschwindigkeit angibt, zum Beispiel steht 2 für das Doppelte der normalen Sprechgeschwindigkeit.

• Tonhöhe – stellt die Tonhöhe der Sprache dar, numerischer Wert im Bereich von 0 (Minimum) bis 2 (Maximum). Der Standardwert ist 1.

Methode

• speak() Die entsprechende Instanz zur Sprachwarteschlange hinzufügen

• cancel() Alle Stimmen in der Warteschlange löschen, wenn sie gerade abgespielt wird

• Pause( ) Die Stimme anhalten

• resume() Die angehaltene Stimme fortsetzen

• getVoices Ruft das unterstützte Spracharray ab. Hinweis: Es muss dem Voiceschanged-Ereignis hinzugefügt werden, um wirksam zu werden. Diese Methode unterstützt jedoch nicht alte Version von IE, es ist erforderlich, die Browser-Beurteilungsmethode

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

hinzuzufügen und dann entsprechend der IE-Nutzungsmethode

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

empfohlenes Lernen: „

vue.js Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Text-to-Speech in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!