Web Speech API JavaScript baru memudahkan Anda menambahkan pengenalan ucapan ke halaman web. API ini memungkinkan kontrol dan fleksibilitas yang baik atas kemampuan pengenalan ucapan di Chrome versi 25 dan yang lebih baru. Berikut adalah contoh dengan teks yang dikenali yang hampir langsung muncul saat berbicara.
Mari kita lihat prosesnya. Pertama, kita akan memeriksa apakah browser mendukung Web Speech API dengan memeriksa apakah objek webkitSpeechRecognition ada. Jika tidak, sebaiknya pengguna mengupgrade browser mereka. (Karena API masih bersifat eksperimental, saat ini API tersebut diawali dengan awalan vendor.) Terakhir, kita membuat objek webkitSpeechRecognition yang menyediakan antarmuka ucapan, dan menetapkan beberapa atribut dan pengendali peristiwanya.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
Nilai default untuk continuous adalah salah (false), yang berarti bahwa saat pengguna berhenti berbicara, pengenalan ucapan akan berakhir. Mode ini sangat cocok untuk teks sederhana seperti kolom input singkat. Dalam demo ini, kita menyetelnya ke benar (true), sehingga pengenalan akan berlanjut meskipun pengguna berhenti sejenak saat berbicara.
Nilai default untuk interimResults adalah salah, yang berarti bahwa satu-satunya hasil yang ditampilkan oleh pengenal bersifat final dan tidak akan berubah. Demo menetapkannya ke benar (true) sehingga kita mendapatkan hasil awal sementara yang dapat berubah. Tonton demo dengan cermat, teks abu-abu adalah teks sementara dan terkadang berubah, sedangkan teks hitam adalah respons dari pengenal yang ditandai sebagai final dan tidak akan berubah.
Untuk memulai, pengguna mengklik tombol mikrofon, yang memicu kode ini:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Kami menetapkan bahasa lisan untuk pengenal ucapan "lang" ke nilai BCP-47 yang telah dipilih pengguna melalui daftar drop-down pilihan, misalnya “en-US” untuk bahasa Inggris-Amerika Serikat. Jika tidak ditetapkan, lang akan ditetapkan secara default ke hierarki dan elemen root dokumen HTML. Pengenalan ucapan Chrome mendukung banyak bahasa (lihat tabel “langs” di sumber demo), serta beberapa bahasa yang ditulis dari kanan ke kiri yang tidak disertakan dalam demo ini, seperti he-IL dan ar-EG.
Setelah menetapkan bahasa, kita memanggil recognition.start() untuk mengaktifkan pengenal ucapan. Setelah mulai merekam audio, kode ini akan memanggil pengendali peristiwa onstart, lalu untuk setiap kumpulan hasil baru, kode ini akan memanggil pengendali peristiwa onresult.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Pengendali ini menggabungkan semua hasil yang diterima sejauh ini menjadi dua string: final_transcript dan interim_transcript. String yang dihasilkan dapat menyertakan "\n", seperti saat pengguna mengucapkan “paragraf baru”, jadi kita menggunakan fungsi linebreak untuk mengonversinya menjadi tag HTML <br> atau <p>. Terakhir, string ini ditetapkan sebagai innerHTML elemen <span> yang sesuai: final_span yang diberi gaya dengan teks hitam, dan interim_span yang diberi gaya dengan teks abu-abu.
interim_transcript adalah variabel lokal, dan sepenuhnya dibuat ulang setiap kali peristiwa ini dipanggil karena mungkin semua hasil sementara telah berubah sejak peristiwa onresult terakhir. Kita dapat melakukan hal yang sama untuk final_transcript cukup dengan memulai loop for di 0. Namun, karena teks akhir tidak pernah berubah, kami telah membuat kode di sini sedikit lebih efisien dengan menjadikan final_transcript sebagai global, sehingga peristiwa ini dapat memulai loop for di event.resultIndex dan hanya menambahkan teks akhir baru.
Selesai! Kode lainnya hanya ada untuk membuat semuanya terlihat bagus. Fungsi ini mempertahankan status, menampilkan beberapa pesan informatif kepada pengguna, dan menukar gambar GIF di tombol mikrofon antara mikrofon statis, gambar garis miring mikrofon, dan animasi mikrofon dengan titik merah yang berdenyut.
Gambar garis miring mikrofon ditampilkan saat recognition.start() dipanggil, lalu diganti dengan animasi mikrofon saat onstart diaktifkan. Biasanya hal ini terjadi begitu cepat sehingga garis miring tidak terlihat, tetapi saat pertama kali pengenalan ucapan digunakan, Chrome perlu meminta izin pengguna untuk menggunakan mikrofon. Dalam hal ini, onstart hanya diaktifkan jika dan saat pengguna mengizinkan. Halaman yang dihosting di HTTPS tidak perlu meminta izin berulang kali, sedangkan halaman yang dihosting di HTTP harus meminta izin.
Jadi, buat halaman web Anda lebih menarik dengan memungkinkannya mendengarkan pengguna.
Kami ingin mendengar masukan Anda...
- Untuk komentar tentang spesifikasi Web Speech API W3C: email, arsip email, grup komunitas
- Untuk komentar tentang penerapan spesifikasi ini oleh Chrome: email, arsip email
Lihat Laporan Resmi Privasi Chrome untuk mempelajari cara Google menangani data suara dari API ini.