Explication détaillée étape par étape de la façon dont Vue implémente la diffusion vocale (avec code)

Comment vue implémente-t-il la diffusion vocale après avoir cliqué sur un bouton ? Utilisez simplement ce plugin ! Examinons en détail comment utiliser le plug-in speak-tts dans Vue pour implémenter la diffusion vocale après avoir cliqué sur un bouton. Cet article est joint avec un exemple de code détaillé. J'espère qu'il sera utile aux amis qui en ont besoin. apprendre!

Utilisez le plug-in Speak-tts dans Vue pour implémenter la diffusion vocale (TTS/Text to Speech) après avoir cliqué sur le bouton

Scenario

plug-in Speak-tts

https ://www.npmjs .com/package/speak-tts (Partage vidéo d'apprentissage : tutoriel vidéo vue)

Cliquez sur le bouton pour déclencher la diffusion vocale et diffuser le contenu textuel spécifié.

Pourquoi la diffusion vocale automatique ne peut-elle pas être mise en œuvre ?

Depuis avril 2018, le navigateur Chrome a complètement interdit la fonction de lecture automatique de l'audio et de la vidéo dans les navigateurs de bureau.

À proprement parler, Chrome n'autorise pas la lecture audio avant que l'utilisateur ne déclenche la page Web.

De plus, lorsque la page est chargée, l'utilisateur n'a aucun comportement d'interaction actif tel que cliquer, dbclick, toucher, etc.

Si vous utilisez js pour appeler directement la méthode .play(), Chrome lancera ce qui suit error: Uncaught (in promise ) DOMException

implementation

1 Reportez-vous aux instructions officielles pour installer les dépendances

npm install speak-tts

2. objet de parole

import Speech from 'speak-tts'

4. Chargement de la page Appelez complètement la méthode d'initialisation

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

5 Ajoutez un bouton à la page

mounted() {
    this.speechInit();
  },
  methods: {
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },

6. Appelez la méthode de lecture dans l'événement de clic de bouton

2efe46d1ef3390d3b867634b2d73a854speak-tts语音播报7485571ee57e8f18a622e724e109ecc3

7.

    speakTtsSpeech() {      this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
        console.log("读取成功");
      });
    },

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!