Web Speech API JavaScript yang 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 ini contoh dengan teks yang dikenali yang muncul hampir seketika saat berbicara.
Mari kita lihat di balik layar. Pertama, kita periksa apakah browser mendukung Web Speech API dengan memeriksa apakah objek webkitSpeechRecognition ada. Jika tidak, sebaiknya pengguna mengupgrade browser mereka. (Karena masih bersifat eksperimental, API tersebut saat ini diberi awalan vendor.) Terakhir, kita membuat objek webkitSpeechRecognition yang menyediakan antarmuka ucapan, serta 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 false, yang berarti bahwa ketika pengguna berhenti berbicara, pengenalan ucapan akan berakhir. Mode ini sangat bagus untuk teks sederhana seperti kolom input pendek. Dalam demo ini, kita menyetelnya ke true (benar), 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 adalah hasil akhir dan tidak akan berubah. Demo menyetelnya ke true (benar) sehingga kita mendapatkan hasil sementara yang lebih awal yang mungkin berubah. Perhatikan demo dengan cermat, teks abu-abu adalah teks yang bersifat sementara dan terkadang berubah, sedangkan teks hitam adalah respons dari pengenal yang ditandai selesai 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 menyetel bahasa lisan untuk pengenal ucapan "lang" ke nilai BCP-47 yang telah dipilih pengguna melalui menu drop-down pilihan, misalnya, “en-US” untuk bahasa Inggris-Amerika Serikat. Jika tidak disetel, defaultnya adalah lang elemen root dan hierarki 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 menyetel bahasa, kita akan memanggil recognition.start() untuk mengaktifkan pengenal ucapan. Setelah mulai merekam audio, sistem akan memanggil pengendali peristiwa onstart, lalu memanggil pengendali peristiwa onresult untuk setiap kumpulan hasil baru.
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 ke dalam dua string: final_transcript dan interim_transcript. String yang dihasilkan dapat mencakup "\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 dari 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 dibuat ulang sepenuhnya setiap kali peristiwa ini dipanggil karena semua hasil sementara mungkin telah berubah sejak peristiwa onresult terakhir. Kita dapat melakukan hal yang sama untuk final_transcript hanya dengan memulai loop for dari 0. Namun, karena teks akhir tidak pernah berubah, kita telah membuat kode di sini sedikit lebih efisien dengan membuat final_transcript menjadi global, sehingga peristiwa ini dapat memulai loop for di event.resultIndex dan hanya menambahkan teks akhir baru.
Selesai! Kode lainnya ada di sana 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 berkedip.
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 pengenalan ucapan pertama kali digunakan, Chrome perlu meminta izin dari pengguna untuk menggunakan mikrofon, dalam hal ini onstart hanya diaktifkan saat dan jika pengguna memberikan izin. Halaman yang dihosting di HTTPS tidak perlu meminta izin berulang kali, sedangkan halaman yang dihosting HTTP memerlukannya.
Jadi buat halaman web Anda menjadi hidup dengan memungkinkan mereka mendengarkan pengguna Anda!
Kami ingin mendengar masukan Anda...
- Untuk komentar tentang spesifikasi W3C Web Speech API: email, arsip surat, grup komunitas
- Untuk komentar tentang penerapan spesifikasi ini oleh Chrome: email, arsip surat
Lihat Laporan Resmi Privasi Chrome untuk mempelajari cara Google menangani data suara dari API ini.