Beberapa hari yang lalu saya melihat sesuatu yang tidak pernah saya perhatikan sebelumnya di salah satu artikel Medium saya, tombol ' dengarkan ' di bagian atas posting. Ketika saya mengkliknya, artikel saya dibacakan oleh browser. Saya pikir ini adalah fitur yang keren dan bertanya-tanya bagaimana saya bisa membangun sesuatu seperti ini sendiri.

Riset

Sedikit riset membawa saya ke Web Speech API . API ini memiliki dua komponen yang berbeda. Pengenalan Pidato dan Sintesis Pidato . Hari ini kita hanya tertarik pada yang terakhir.

Selain itu, saya menemukan dukungan browser untuk API ini. Kita dapat menggunakan Speech API di semua browser modern tanpa masalah.

Fitur

SpeechSynthesis API memungkinkan kita menginstruksikan browser untuk mengonversi teks yang diteruskan menjadi ucapan. Kami dapat menjeda/melanjutkan pidato ini sesuka hati dan dapat mengontrol suara, kecepatan bicara, dan nada.

Suara yang tersedia bergantung pada browser dan sistem operasi yang sedang Anda gunakan.

Demo

Mari kita lihat kode JavaScript dan lihat bagaimana demo bekerja.

Memeriksa Dukungan Peramban

Di awal skrip ini, kami memeriksa apakah browser mendukung SpeechSynthesis API. Jika browser tidak mendukung API ini, seluruh skrip kami tidak akan berfungsi, jadi kami keluar dari fungsionalitas.

Mengatur Opsi Suara Browser

Di sini kita mengulang melalui suara yang disediakan browser dan membuat opsi untuk masing-masing suara di file select. Jika tidak ada suara yang tersedia di browser, peringatan dilemparkan dan metode tidak melakukan apa-apa.

Mendapatkan Opsi Suara yang Dipilih

Dapatkan opsi yang dipilih pertama dari selectdan gunakan namanya untuk menemukan opsi dari array suara.

Memutar dan Menjeda Text to Speech

Saat pengguna mengklik tombol putar, kami memeriksa apakah objek SpeechSynthesis browser saat ini dalam keadaan dijeda. Jika ya, kami hanya melanjutkan berbicara.

Jika tidak dalam status dijeda, kami membuat instance baru dari SpeechSynthesisUtterance. Kami meneruskan teks dan suara yang dipilih, dan memanggil speakmetodenya.

Ketika pengguna mengklik tombol jeda, kita cukup memanggil pause()metode pada SpeechSynthesis API.

Opsi Tambahan

Kami memiliki sejumlah opsi lain dalam API ini di bawah kendali kami.

• Pitch — Dapatkan dan atur nada suara, membuatnya lebih dalam atau lebih tinggi.
• Nilai — Dapatkan dan atur kecepatan ucapan teks.
• Volume — Mendapatkan dan mengatur volume di mana teks akan diucapkan.
• Lang — Dapatkan dan atur bahasa teks yang akan diucapkan.

• Dukungan Browser API Sintesis Pidato
• MDN — API Ucapan Web

Web Speech API adalah tambahan yang sangat menarik untuk perangkat pengembang web. Saya harap demo dan penjelasan ini bermanfaat bagi Anda. Beri tahu saya di komentar untuk apa Anda akan menggunakan API ini!

Jika Anda menyukai konten saya dan ingin mendukung upaya saya, pertimbangkan untuk menjadi pelanggan Medium melalui tautan afiliasi saya . Anda tidak akan dikenakan biaya tambahan apa pun, tetapi Medium akan memberikan sebagian dari hasilnya kepada saya untuk merujuk Anda.

Dan jika Anda mau, Anda dapat terhubung dengan saya di LinkedIn atau Twitter !

Bangun aplikasi dengan komponen yang dapat digunakan kembali seperti Lego

Alat sumber terbuka Bit membantu 250.000+ pengembang untuk membangun aplikasi dengan komponen.

Ubah UI, fitur, atau halaman apa pun menjadi komponen yang dapat digunakan kembali — dan bagikan ke seluruh aplikasi Anda. Lebih mudah untuk berkolaborasi dan membangun lebih cepat.

→ Pelajari lebih lanjut

Pisahkan aplikasi menjadi beberapa komponen untuk mempermudah pengembangan aplikasi, dan nikmati pengalaman terbaik untuk alur kerja yang Anda inginkan:

→ Mikro-Frontend

→ Sistem Desain

→ Berbagi Kode dan menggunakan kembali

→ Monorepo

Belajarlah lagi