Cara Menambahkan Fitur Text-to-Speech di Halaman Web Apa Pun

Itu teks pidato fitur mengacu pada narasi lisan dari sebuah teks ditampilkan di perangkat. Saat ini, perangkat seperti laptop, tablet, dan ponsel sudah memiliki fitur ini. Aplikasi apa pun yang berjalan pada perangkat ini, seperti browser web, dapat memanfaatkannya, dan memperluas fungsinya. Fitur narasi dapat menjadi bantuan yang cocok untuk aplikasi itu menampilkan banyak teks, seperti menawarkan opsi untuk mendengarkan untuk pengunjung situs web.

API Ucapan Web

Itu API Web Speech JavaScript adalah pintu gerbang menuju mengakses fitur Text-to-Speech oleh browser web. Jadi, jika Anda ingin memperkenalkan fungsionalitas text-to-speech pada halaman web yang berat, dan memungkinkan pembaca Anda mendengarkan konten, Anda dapat menggunakan API praktis ini, atau, lebih spesifik, ini Sintesis Bicara antarmuka.

Kode awal & cek dukungan

Untuk memulai, mari buat halaman web dengan saya contoh teks untuk diriwayatkan, dan tiga tombol.

     
  Kelinci Dengan Banyak Teman
  Kelinci sangat populer dengan ... 
 Tapi dia menolak, menyatakan itu ... 
  Pesan moral dalam cerita…

Tombol akan menjadi kontrol untuk narasi. Sekarang kita perlu memastikan apakah UA mendukung Sintesis Bicara antarmuka. Untuk melakukannya, kami dengan cepat memeriksa dengan JavaScript jika jendela objek memiliki 'speechSynthesis' milik, atau tidak.

 onload = function () if ('speechSynthesis' di jendela) / * sintesis pidato didukung * / else / * sintesis bicara tidak didukung * /

Jika Sintesis wicara tersedia, pertama kita buat referensi untuk Sintesis wicara yang kami tetapkan untuk synth variabel. Kami juga memulai sebuah bendera dengan Salah nilai (kita akan lihat tujuannya nanti di pos), dan kita buat referensi & klik penangan acara untuk tiga tombol (Putar, Jeda, Berhenti) juga.

Ketika pengguna mengklik salah satu tombol, fungsinya masing-masing (onClickPlay (), onClickPause (), onClickStop ()) akan dipanggil.

 if ('speechSynthesis' di jendela) var synth = speechSynthesis; var flag = false; / * referensi ke tombol * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * klik event handler untuk tombol * / playEle.addEventListener ('klik', onClickPlay); pauseEle.addEventListener ('klik', onClickPause); stopEle.addEventListener ('klik', onClickStop); fungsi onClickPlay ()  fungsi onClickPause ()  fungsi onClickStop ()

Buat fungsi khusus

Sekarang ayo membangun fungsi klik dari tiga tombol individual yang akan dipanggil oleh penangan acara.

1. Mainkan / Lanjutkan

Ketika tombol Play diklik, pertama kita Periksalah bendera. Jika itu Salah, kami mengaturnya benar, jadi jika suatu saat tombol diklik nanti, kodenya di dalam pertama jika kondisi tidak akan dieksekusi (tidak sampai bendera Salah lagi).

Lalu kita buat contoh baru dari Sintesis Pidato antarmuka yang menyimpan informasi tentang pidato, seperti, teks yang akan dibaca, volume suara, suara yang diucapkan, kecepatan, nada dan bahasa pidato. Kami menambahkan teks artikel sebagai parameter konstruktor, dan tetapkan ke ucapan variabel.

 fungsi onClickPlay () if (! flag) flag = true; utterance = new SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (ucapan);  if (synth.paused) / * unpause / resume narration * / synth.resume ();

Kami menggunakan SpeechSynthesis.getVoices () metode untuk tunjuk suara untuk pidato dari suara-suara yang tersedia di perangkat pengguna. Karena metode ini mengembalikan array dari semua opsi suara yang tersedia di perangkat, kami menetapkan suara perangkat pertama yang tersedia dengan menggunakan utterance.voice = synth.getVoices () [0]; pernyataan.

Itu onend properti mewakili pengendali acara dieksekusi ketika pidato selesai. Di dalamnya, kami mengubah nilai bendera variabel kembali ke false sehingga kode yang memulai pidato dapat dieksekusi kapan tombolnya diklik lagi.

Lalu kami memanggil SpeechSynthesis.speak () metode untuk mulai narasinya. Kami juga perlu memeriksa jika narasinya dijeda, yang kami gunakan hanya baca SpeechSynthesis.paused milik. Jika narasinya dijeda, kita perlu melanjutkan narasinya pada klik tombol, yang dapat kita capai dengan menggunakan SpeechSynthesis.resume () metode.

2. Jeda

Sekarang mari kita buat onClickPause () fungsi di mana kita periksa dulu jika narasinya sedang berlangsung dan tidak dijeda. Kami dapat menguji kondisi ini dengan memanfaatkan SpeechSynthesis.speaking dan SpeechSynthesis.paused properti. Jika kedua kondisi itu benar, maka kami onClickPause () fungsi menjeda pidato dengan memanggil SpeechSynthesis.pause () metode.

 fungsi onClickPause () if (synth.speaking &&! synth.paused) / * jeda narasi * / synth.pause ();

3. Berhenti

Itu onClickStop () fungsi adalah dibangun mirip dengan onClickPause (). Jika pidatonya sedang berlangsung, kami Hentikan dengan memanggil SpeechSynthesis.cancel () metode itu menghapus semua ucapan.

 fungsi onClickStop () if (synth.speaking) / * stop narration * / / * untuk safari * / flag = false; synth.cancel ();

Perhatikan bahwa pada pembatalan pidato, onend Acara dipecat secara otomatis, dan kami telah menambahkan kode setel ulang bendera di dalamnya. Namun, ada bug di browser Safari yang mencegah peristiwa ini dari penembakan, itu sebabnya kami menempatkan kembali bendera di onClickStop () fungsi. Anda tidak harus melakukannya jika Anda tidak ingin mendukung Safari.

Dukungan browser

Semua versi browser modern terbaru memiliki dukungan penuh atau sebagian untuk API sintesis ucapan. Peramban webkit tidak memutar ucapan dari banyak tab, menjeda adalah buggy (berfungsi tetapi buggy), dan ucapan tidak disetel ulang saat pengguna memuat ulang laman di peramban webkit.

Demo kerja

Lihat demo langsung di bawah ini, atau lihat kode lengkapnya di Github.

Lihat Pena Ã ?? Â ° Ã… Â¸SEBUAH¢Â ?? Â ?? Ã'Â £ Text to Speech - JavaScript oleh HONGKIAT (@hkdc) di CodePen.