Penjelasan langkah demi langkah terperinci tentang cara Vue melaksanakan siaran suara (dengan kod)

Bagaimanakah Vue melaksanakan siaran suara selepas mengklik butang? Hanya gunakan pemalam ini! Mari kita lihat secara terperinci cara menggunakan pemalam bercakap-tts dalam Vue untuk melaksanakan siaran suara selepas mengklik butang Artikel ini dilampirkan dengan kod contoh terperinci. Saya harap ia akan membantu rakan-rakan yang memerlukannya belajar!

Gunakan pemalam speak-tts dalam Vue untuk melaksanakan siaran suara (TTS/text-to-speech) selepas mengklik butang

Senario

pemalam bercakap-tts

https://www.npmjs.com/package/speak-tts (Belajar perkongsian video: vue video tutorial )

membolehkan mengklik butang untuk mencetuskan siaran suara dan menyiarkan teks yang ditentukan kandungan.

Mengapa siaran suara automatik tidak boleh dilaksanakan?

Sejak April 2018, penyemak imbas Chrome telah melarang sepenuhnya fungsi main balik automatik audio dan video dalam penyemak imbas desktop.

Tegasnya, Chrome tidak membenarkan audio dimainkan sebelum pengguna mencetuskan halaman web.

Bukan itu sahaja, apabila halaman dimuatkan, pengguna tidak mempunyai tingkah laku interaksi aktif seperti klik, dbclick, sentuh, dll.

Jika anda menggunakan js untuk memanggil terus .play () kaedah, chrome akan membuang Ralat berikut berlaku: Tidak ditangkap (dalam janji) DOMException

Pelaksanaan

1 Rujuk kepada arahan rasmi untuk memasang kebergantungan

npm install speak-tts

2. Memperkenalkan

import Speech from 'speak-tts'

3 🎜>

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

4. Panggil kaedah pemulaan selepas halaman dimuatkan

5 >

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

6. Panggil kaedah main balik dalam acara klik butang

2efe46d1ef3390d3b867634b2d73a854speak-tts语音播报7485571ee57e8f18a622e724e109ecc3

Kod sampel lengkap

Atas ialah kandungan terperinci Penjelasan langkah demi langkah terperinci tentang cara Vue melaksanakan siaran suara (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!