Penjelasan langkah demi langkah terperinci tentang cara Vue melaksanakan siaran suara (dengan kod)-View.js-php.cn

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

藏色散人

Lepaskan： 2022-11-14 20:29:02

ke hadapan

4837 orang telah melayarinya

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!

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

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

Salin selepas log masuk

2. Memperkenalkan

import Speech from 'speak-tts'

Salin selepas log masuk

3 🎜>

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

Salin selepas log masuk

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(() => {});
    },

Salin selepas log masuk

6. Panggil kaedah main balik dalam acara klik butang

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

Salin selepas log masuk

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!