Detaillierte Schritt-für-Schritt-Erklärung, wie Vue Voice Broadcast implementiert (mit Code)

Wie implementiert Vue die Sprachübertragung nach dem Klicken auf eine Schaltfläche? Benutzen Sie einfach dieses Plugin! Lassen Sie uns einen detaillierten Blick darauf werfen, wie Sie das Speak-TTS-Plug-In in Vue verwenden, um die Sprachübertragung zu implementieren. Ich hoffe, dass dieser Artikel hilfreich für Freunde ist, die ihn benötigen lernen!

Verwenden Sie das Speak-tts-Plug-in in Vue, um Sprachübertragung (TTS/Text to Speech) zu implementieren, nachdem Sie auf die Schaltfläche geklickt haben

Szenario

speak-tts-Plug-in

https ://www.npmjs.com/package/speak-tts (Lernvideo-Sharing: vue-Video-Tutorial)

Klicken Sie auf die Schaltfläche, um die Sprachübertragung auszulösen und den angegebenen Textinhalt zu übertragen.

Warum kann keine automatische Sprachübertragung implementiert werden?

Seit April 2018 hat der Chrome-Browser die automatische Wiedergabefunktion von Audio und Video in Desktop-Browsern vollständig verboten.

Streng genommen lässt Chrome nicht zu, dass Audio abgespielt wird, bevor der Benutzer die Webseite auslöst.

Darüber hinaus hat der Benutzer beim Laden der Seite kein aktives Interaktionsverhalten wie Klicken, Dbclick, Berühren usw.

Wenn Sie js verwenden, um die .play()-Methode direkt aufzurufen, löst Chrome Folgendes aus Fehler: Nicht abgefangen (im Versprechen)

Implementierung

1. Beachten Sie die offiziellen Anweisungen zur Installation von Abhängigkeiten

2. Deklarieren das Sprachobjekt

npm install speak-tts

4. Rufen Sie die Initialisierungsmethode vollständig auf

import Speech from 'speak-tts'

6. Rufen Sie die Wiedergabemethode im Button-Click-Ereignis auf

7. Vollständiger Beispielcode

  data() {    return {
      speech: null,
    };

Das obige ist der detaillierte Inhalt vonDetaillierte Schritt-für-Schritt-Erklärung, wie Vue Voice Broadcast implementiert (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!