DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

WEB SPEECH API

Pelajari cara menggunakan Web Speech API dalam JavaScript untuk membuat aplikasi web yang mampu berinteraksi melalui suara, dan bentuk yang lebih intuitif dan aksesibel.

Dalam interaksi manusia dengan mesin, kemampuan untuk berbicara dan mendengarkan adalah salah satu bentuk komunikasi yang paling alami dan intuitif. Web Speech API merupakan teknologi yang memungkinkan aplikasi web untuk memiliki fitur pengenalan suara dan sintesis suara.

Secara umum, Web Speech API terdiri dari dua komponen utama: SpeechRecognition untuk pengenalan suara dan SpeechSynthesis untuk sintesis suara.

SpeechRecognition

SpeechRecognition merupakan interface yang melakukan pengenalan suara, mengubah suara menjadi teks. Berikut cara penggunaannya:

var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US';
recognition.start();

recognition.onresult = function(event) {
 console.log(event.results[0][0].transcript);
}

Setelah SpeechRecognition diaktifkan dengan metode start(), ia akan mendengarkan pengguna menjalankan instruksi melalui mikrofon dan kemudian akan menghasilkan output berupa teks.

SpeechSynthesis

SpeechSynthesis merupakan interface yang melakukan sintesis suara, mengubah teks menjadi suara. Berikut adalah contoh sederhananya:

var speech = new SpeechSynthesisUtterance("Hello, how are you?");
window.speechSynthesis.speak(speech);

Dalam contoh di atas, objek SpeechSynthesisUtterance diisi dengan teks yang ingin diucapkan, kemudian metode speak() memulai generasi suara berdasarkan teks tersebut.

SpeechSynthesisVoice

Untuk lebih personalisasi, kamu dapat menentukan suara yang digunakan untuk SpeechSynthesis menggunakan interface SpeechSynthesisVoice. Web browser umumnya menyediakan beberapa pilihan suara yang bisa kamu gunakan.

var speech = new SpeechSynthesisUtterance("Hello, how are you?");
speech.voice = window.speechSynthesis.getVoices()[1];
window.speechSynthesis.speak(speech);

Praktek menggunakan Web Speech API ini dapat membantu dalam membangun aplikasi web yang lebih intuitif dan aksesibel. Misalnya, aplikasi web dapat dibangun untuk membantu orang-orang dengan disabilitas visual atau aplikasi pendidikan yang menggabungkan interaksi suara untuk meningkatkan pengalaman belajar.

👈🏼 Web Notification API
Debug di Javascript 👉🏼