Fungsi sintesis ucapan HTML5 yang kurang dikenal

Jika Anda mendengarkannya, Anda akan menemukan bahwa suara yang diputar bukanlah materi audio yang direkam sebelumnya, melainkan ucapan yang disintesis melalui pengenalan teks.

Silakan kenakan headphone Anda terlebih dahulu, lalu salin kode berikut ke konsol chrome untuk merasakannya ~

 let msg = new SpeechSynthesisUtterance(Selamat datang membaca blog saya);window.speechSynthesis.speak(msg);

Begini, tidak sulit menerapkan sintesis ucapan di front-end

Dari contoh di atas, kita bisa menebak fungsi dari kedua metode yang disebutkan di atas.

 SpeechSyntehesisUtterancwindow.speechSynthesis.speak

Tentu saja, sintesis ucapan tidak hanya mencakup kedua API ini, namun mari kita mulai dengan dua poin ini.

Referensi: developer.mozilla.org/en-US/docs/… Objek SpeechSyntehesisUtteranc berisi konten yang akan dibaca oleh layanan ucapan dan beberapa parameter, seperti bahasa, nada, dan volume

 SpeechSyntehesisUtteranc()SpeechSynthesisUtterance.langSpeechSynthesisUtterance.pitchSpeechSynthesisUtterance.rateSpeechSynthesisUtterance.voiceSpeechSynthesisUtterance.volume

Catatan: Semua properti di atas dapat dibaca dan ditulis! Anda dapat menyalin kode di bawah ini dan mencobanya. Akan ada instruksi di komentar.

 let msg = new SpeechSynthesisUtterance();msg.text = apa kabar // Teks yang akan disintesis msg.lang = en-US // Pengucapan bahasa Inggris Amerika (secara otomatis dipilih secara default) msg.rate = 2 // Kecepatan ganda (default adalah 1, rentang 0.1~10) msg.pitch = 2 // Nada tinggi (semakin besar angkanya, semakin tajam, defaultnya adalah 1, rentang 0~2) msg.volume = 0.5 // Volume 0,5 kali (default adalah 1, rentang 0~1) window.speechSynthesis.speak(msg);

Pada saat yang sama, objek ini juga dapat merespons serangkaian peristiwa, yang dapat digunakan:

• awal
• akhir
• batas
• berhenti sebentar
• melanjutkan

Dengan bantuan event ini, kita dapat menyelesaikan beberapa fungsi sederhana, seperti menghitung jumlah kata dalam kalimat bahasa Inggris:

 let count = 0; // Jumlah kata let msg = new SpeechSynthesisUtterance();let synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // Mulai membaca console.log(`Isi teks: $ {pesan.teks}`); konsol.log(mulai);});msg.addEventListener('akhir',()=>{ // Akhir pembacaan console.log(end); console.log(`Jumlah kata teks (kata): ${count}`); count = 0;});msg.addEventListener('boundary',()=>{ // Hitung jumlah kata++;});

Setelah mencoba, karena bahasa Mandarin tidak menggunakan spasi untuk memisahkan setiap kata, maka kata tersebut akan dikenali secara otomatis. Misalnya, selamat datang kepada pembaca akan dikenali sebagai dua kata: selamat datang dan pembaca.

Referensi: developer.mozilla.org/en-US/docs/…

Setelah membahas SpeechSyntehesisUtteranc, mari kita lihat SpeechSynthesis

Fungsi utama SpeechSynthesis adalah melakukan serangkaian kontrol pada ucapan, seperti memulai atau menjeda.

Ia memiliki tiga properti read-only yang menunjukkan status suara:

 SpeechSynthesis.pausedSpeechSynthesis.pending

Ada juga serangkaian metode untuk memanipulasi ucapan:

•SpeechSynthesis.speak() mulai membaca ucapan dan memicu acara awal pada saat yang bersamaan

•SpeechSynthesis.pause() menjeda dan memicu peristiwa jeda

•SpeechSynthesis.resume() melanjutkan dan memicu event resume pada saat yang bersamaan

•SpeechSynthesis.cancel() membatalkan pembacaan dan memicu acara akhir pada saat yang bersamaan

Berdasarkan metode operasi ini, kami dapat lebih meningkatkan kemampuan pembaca teks kami:

Mari kita kembali ke titik awal awal. Berdasarkan konten di atas, kita dapat menebak bagaimana pembacaan artikel otomatis diterapkan di beberapa situs web.

Jika bagian depan situs web ini menggunakan kerangka MVVM (ambil Vue sebagai contoh), maka konten artikel dapat disimpan dalam data, yang dapat digunakan untuk membangun sintesis ucapan yang kita perlukan.

Tentu saja, artikel juga dapat diperoleh melalui permintaan ajax, penguraian data yang diminta, dan pembuatan objek sintesis ucapan.

Jika artikel ditulis langsung dalam HTML, DOM perlu diurai saat ini Setelah pengujian, bahkan struktur kacau berikut ini

 <div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <tabel> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </tabel> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>

Baca teks langsung melalui innerText, lalu buat objek sintesis ucapan, dan Anda juga dapat membacanya dalam urutan yang diinginkan (gambar akan diabaikan)

Tentu saja, jika kita ingin mengabaikan beberapa struktur khusus, seperti tabel, kita dapat menghabiskan energi untuk menguraikan dan memfilter data atau elemen DOM yang tidak kita inginkan.

Apa pun yang terjadi, kami dapat menemukan solusi yang sesuai~

Fitur ini masih dalam rancangan dan belum didukung secara luas.

Sekali lagi, API ini belum dapat diterapkan pada lingkungan produksi.

Pendekatan yang lebih umum saat ini adalah membuat API (mungkin API pihak ketiga) yang mensintesis teks menjadi file ucapan di bagian belakang, dan kemudian memutarnya sebagai media di bagian depan.

Suatu saat ketika saya sedang bingung, saya membaca beberapa artikel para ahli dan membaca beberapa pemikiran senior tentang pengembangan front-end. Satu hal yang sangat mengesankan saya:

Front end paling dekat dengan pengguna, semuanya harus dipertimbangkan dari sudut pandang pengguna. Penggunaan bebas hambatan juga merupakan masalah yang sangat penting. Meskipun manfaat yang diperoleh dari fungsi tersebut jauh lebih kecil dibandingkan dengan bisnis lain, agar produk dapat melayani pengguna dengan lebih baik, ada baiknya melakukan lebih banyak upaya. Ini juga merupakan semangat pengembangan front-end.

Di atas adalah fungsi sintesis ucapan HTML5 yang kurang dikenal yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu!