Bagaimana Menambah Ciri Teks-ke-Ucapan di Sebarang Laman Web

The teks-ke-ucapan ciri merujuk kepada penulisan teks yang dituturkan dipaparkan pada peranti. Pada masa ini, peranti seperti komputer riba, tablet, dan telefon bimbit sudah mempunyai ciri ini. Sebarang aplikasi yang dijalankan pada peranti ini, seperti penyemak imbas web, boleh gunakannya, dan memanjangkan fungsinya. Ciri naratif boleh menjadi bantuan yang sesuai untuk aplikasi itu memaparkan teks yang banyak, kerana ia menawarkan pilihan untuk mendengar kepada pengunjung laman web.

API Ucapan Web

The API JavaScript Ucapan Web adalah pintu masuk untuk akses ciri Teks-ke-Ucapan oleh penyemak imbas web. Oleh itu, jika anda ingin memperkenalkan fungsian teks-ke-ucapan pada halaman web yang berat teks, dan membolehkan pembaca anda mendengar kandungan, anda boleh menggunakan API berguna ini, atau, untuk menjadi lebih spesifik, yang UcapanSynthesis antara muka.

Kod awal & semak sokongan

Untuk bermula, mari buat halaman web dengan saya sampel teks untuk disampaikan, dan tiga butang.

     
  The Hare With Many Friends
  Lentur sangat popular dengan ... 
 Tetapi dia menolak, menyatakan bahawa ... 
  Moral cerita ...

Butang akan menjadi kawalan untuk naratif. Sekarang kita perlu pastikan jika UA menyokong UcapanSynthesis antara muka. Untuk berbuat demikian, kami dengan cepat menyemak dengan JavaScript jika tingkap objek mempunyai 'speechSynthesis' harta, atau tidak.

 onload = function () if ('speechSynthesis' in window) / * synthesis speech supported * / else / * synthesis speech not supported * /

Jika speechSynthesis boleh didapati, pertama kami buat rujukan untuk speechSynthesis yang kami berikan kepada synth pembolehubah. Kita juga memulakan bendera dengan salah nilai (kita akan nampak tujuannya di kemudian hari), dan kami membuat rujukan & klik pengendali acara untuk tiga butang (Main, Jeda, Berhenti) juga.

Apabila pengguna mengklik salah satu butang, fungsi masing-masing (onClickPlay (), onClickPause (), onClickStop ()) akan dipanggil.

 jika ('speechSynthesis' dalam tetingkap) var synth = speechSynthesis; var flag = false; / * rujukan kepada butang * / var playEle = document.querySelector ('# bermain'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * klik pengendali acara untuk butang * / playEle.addEventListener ('klik', onClickPlay); pauseEle.addEventListener ('klik', onClickPause); stopEle.addEventListener ('klik', onClickStop); fungsi fungsi onClickPlay ()  pada fungsiClickPause ()  padaClickStop ()

Buat fungsi tersuai

Sekarang mari membina fungsi klik dari tiga butang individu yang akan dipanggil oleh pengendali acara.

1. Main / Sambung semula

Apabila butang Main diklik, pertama sekali kita semak bendera. Sekiranya ia salah, kami menetapkannya benar, jadi jika pada bila-bila masa butang diklik kemudian, kod di dalamnya pertama jika keadaan tidak akan dilaksanakan (tidak sehingga bendera adalah salah lagi).

Kemudian kami buat contoh baru UcapanSynthesisUtterance antara muka yang memegang maklumat tentang ucapan, seperti, teks yang akan dibaca, jumlah pertuturan, suara yang diucapkan, kelajuan, padang dan bahasa ucapan. Kami menambah teks artikel sebagai parameter pembina, dan serahkannya kepada ucapan pembolehubah.

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

Kami menggunakannya SpeechSynthesis.getVoices () kaedah untuk Menetapkan suara untuk ucapan dari suara yang terdapat di peranti pengguna. Oleh kerana kaedah ini mengembalikan pelbagai pilihan suara yang ada dalam peranti, kami tetapkan suara peranti pertama yang tersedia dengan menggunakan utterance.voice = synth.getVoices () [0]; pernyataan.

The di hujung harta mewakili pengendali acara yang ada dilaksanakan apabila ucapan selesai. Di dalamnya, kita menukar nilai dari bendera pembolehubah kembali kepada palsu supaya kod yang memulakan ucapan boleh dilaksanakan apabila butang itu ada diklik semula.

Kemudian kami panggil SpeechSynthesis.speak () kaedah untuk mulakan ceritera. Kami juga perlu menyemak jika perihalan dijeda, yang mana kita menggunakan bacaan sahaja SpeechSynthesis.paused harta. Sekiranya narasi dijeda, kita perlu meneruskan naratif pada klik butang, yang boleh kita hadapi dengan menggunakan SpeechSynthesis.resume () kaedah.

2. Jeda

Sekarang mari kita buat onClickPause () fungsi di mana kita mula-mula semak jika perihalan sedang dijalankan dan tidak dijeda. Kami boleh menguji keadaan ini dengan menggunakan SpeechSynthesis.speaking dan juga SpeechSynthesis.paused hartanah. Sekiranya kedua-dua syarat itu benar, kami onClickPause () fungsi menjeda ucapannya dengan memanggil SpeechSynthesis.pause () kaedah.

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

3. Berhenti

The onClickStop () fungsi adalah dibina sama dengan onClickPause (). Sekiranya ucapan sedang berlangsung, kami berhenti dengan memanggil SpeechSynthesis.cancel () kaedah itu membuang semua ucapan.

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

Ambil perhatian bahawa pada pembatalan ucapan, di hujung acara dipecat secara automatik, dan kami telah menambah kod penetapan bendera di dalamnya. Walau bagaimanapun, ada bug dalam pelayar Safari yang menghalang acara ini dari menembak, itulah sebabnya kami mengembalikan semula bendera di onClickStop () fungsi. Anda tidak perlu melakukannya jika anda tidak mahu menyokong Safari.

Sokongan penyemak imbas

Semua versi terkini pelayar moden mempunyai sokongan penuh atau separa untuk sintesis ucapan API. Pelayar webkit tidak memainkan pertuturan dari pelbagai tab, menjeda adalah kereta (berfungsi tetapi buggy), dan ucapan tidak ditetapkan semula apabila pengguna memuatkan semula halaman dalam peramban Webkit.

Demo kerja

Lihat demo langsung di bawah, atau semak kod penuh pada Github.

Lihat Pena Ã ?? Â ° Ã ... Â¸Ã¢Â ?? Â ?? Ã'Â £ Teks ke Ucapan - JavaScript oleh HONGKIAT (@hkdc) pada CodePen.