Bagaimana untuk menambah sari kata dan suara dalam vue

Dalam reka bentuk web hari ini, lebih ramai orang memilih untuk menggunakan Vue untuk pembangunan kerana ia mempunyai kelebihan pantas, fleksibel dan boleh digunakan semula. Bukan itu sahaja, Vue juga mempunyai sumber yang kaya dan sokongan komuniti, menjadikan rangka kerja ini digemari oleh semakin ramai pembangun.

Dalam pembangunan sebenar, sesetengah tapak web yang mempunyai permintaan tinggi selalunya perlu menyediakan pengalaman pengguna interaksi teks dan suara, dan cara melaksanakan fungsi ini dalam Vue telah menjadi bidang yang ramai pembangun berminat untuk mengkaji. Di bawah ini kita akan membincangkan secara terperinci dua aspek sari kata dan suara dalam Vue.

1. Cara menambah sari kata dalam Vue

1 Penyediaan sumber sari kata

Apabila menggunakan Vue untuk mencipta sari kata, kami perlu menyediakan sumber sari kata yang diperlukan fail sari kata yang sepadan melalui tapak web berkaitan sari kata, dan proses fail sari kata ini mengikut keperluan.

2. Pasang pemalam Vue

Vue menyediakan beberapa pemalam praktikal Apabila kita perlu menambah sari kata, kita perlu memasang pemalam yang sepadan. Sebagai contoh, kita boleh menggunakan pemalam Vue-Sub untuk menambah sari kata. Kaedah pemasangan adalah seperti berikut:

npm install vue-sub --save

3 Gunakan pemalam Vue-Sub

Selepas memasang pemalam Vue-Sub, kita boleh menggunakan pemalam ini. komponen yang perlu menambah sari kata. Berikut ialah kaedah pelaksanaan khusus:

Pertama, dalam komponen yang perlu menambah sari kata, kita perlu memperkenalkan komponen Vue-Sub dan mendaftarkan komponen yang diperkenalkan dengan Vue.

// 引入组件
import VueSub from 'vue-sub'

// 注册到Vue中
Vue.use(VueSub)

Seterusnya, dalam komponen yang perlu menambah sari kata, kita boleh menggunakan arahan "v-sub" yang disediakan oleh komponen Vue-Sub untuk memaparkan kandungan sari kata dalam HTML.

<video src="xxx" v-sub="{ en: &#39;./subtitle.en.srt&#39;, cn: &#39;./subtitle.cn.srt&#39; }"></video>

Di sini, kami mengikat perintah "v-sub" dan memasukkan dua parameter "en" dan "cn", sepadan dengan sari kata bahasa Inggeris dan sari kata Cina.

Pada ketika ini, kami telah menyelesaikan operasi menambah sari kata dalam Vue, dan kesannya sangat bagus! Jika anda juga perlu menambah sari kata dalam Vue, anda juga boleh mencuba kaedah ini.

2. Cara menambah suara pada Vue

Dalam reka bentuk web hari ini, suara juga telah menjadi hala tuju penyelidikan yang penting. Dalam penggunaan Vue, cara mencapai kesan suara juga merupakan isu yang sedang dibincangkan secara aktif oleh pembangun. Di bawah ini kami akan membincangkan dua aspek menambah suara pada Vue untuk membantu anda berjaya menambahkan fungsi suara pada Vue.

1. Pelaksanaan melalui Vue Web Speech API

Dalam pelaksanaan Vue, kita boleh menggunakan Web Speech API untuk menambah suara. Secara amnya, API Pertuturan Web adalah sebahagian daripada standard HTML5, dan di sini kami akan cuba melaksanakannya menggunakan versi pemalam tetingkap API Pertuturan Web.

Pertama, kita perlu memuat turun dan memasang pemalam yang diperlukan (seperti yang ditunjukkan di bawah).

// 文本到语音
npm install --save responsivevoice

// 语音到文本
npm install --save annyang

Seterusnya, kita boleh menambah suara dalam komponen Vue tertentu. Berikut ialah coretan kod untuk menggunakan pemalam respondvoice untuk melaksanakan text-to-speech dalam Vue:

const ResponsiveVoice = require('responsivevoice');

ResponsiveVoice.speak('Hello World');

2 Rakam audio melalui Vue dan muat naik

Selain itu menggunakan API Pertuturan Web, kami juga Satu lagi cara anda boleh menambah pertuturan dalam Vue ialah merakam audio dan memuat naiknya. Mula-mula, kita perlu memperkenalkan pemalam untuk merakam audio, seperti yang ditunjukkan di bawah:

// 引入音频录制组件
npm install vue-recorder --save

Seterusnya, kita boleh menggunakan komponen perakam vue dalam komponen Vue tertentu untuk merakam dan memuat naik audio. Berikut ialah coretan kod yang sepadan:

<vue-recorder @complete=&#39;uploadAudio&#39;></vue-recorder>

Dalam coretan kod ini, "@complete" ialah fungsi panggil balik yang disediakan oleh komponen perakam vue Kami boleh melaksanakan operasi muat naik audio dalam fungsi ini. Jika anda juga ingin melaksanakan kesan suara dalam Vue, anda boleh mencuba kaedah ini.

Ringkasan:

Rangka kerja Vue bukan sahaja rangka kerja hadapan yang berkuasa, tetapi juga mempunyai sumber yang kaya dan komuniti yang aktif, membuatkan ramai pembangun suka menggunakannya untuk membangunkan aplikasi web. Penggunaan sari kata dan fungsi suara dalam Vue juga merupakan fungsi yang mempunyai nilai aplikasi yang sangat tinggi. Jika anda juga perlu melaksanakan sari kata atau kesan suara dalam Vue semasa pembangunan, anda juga boleh mencuba penyelesaian di atas, saya percaya kaedah ini pasti akan memenuhi keperluan pembangunan anda dan mencapai pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menambah sari kata dan suara dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!