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

<el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn