Web Speech API JavaScript yang baru memudahkan Anda menambahkan pengenalan ucapan ke halaman web. API ini memungkinkan kontrol dan fleksibilitas yang lebih 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 akan 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 saat pengguna berhenti berbicara, pengenalan ucapan akan berakhir. Mode ini sangat bagus untuk teks sederhana seperti {i>input <i}yang pendek. Dalam demo ini, kita menyetelnya ke benar (true), sehingga pengenalan akan terus berlanjut meskipun pengguna berhenti sejenak saat berbicara.
Nilai default untuk interimResults
adalah false, yang berarti bahwa satu-satunya hasil yang ditampilkan oleh pengenal bersifat final dan tidak akan berubah. Demo menyetelnya ke benar (true), kita mendapatkan hasil sementara yang mungkin berubah. Lihat demo dengan cermat, teks abu-abu adalah teks yang bersifat 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 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, default-nya 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, kami 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 menyertakan "\n", seperti ketika pengguna mengucapkan "paragraf baru", jadi kami menggunakan fungsi linebreak
untuk mengonversinya menjadi tag HTML <br>
atau <p>
. Terakhir, kode ini menetapkan string ini 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 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
hanya dengan memulai loop for di 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 hanya untuk membuat semuanya terlihat menarik. Fitur 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 dengan sangat cepat sehingga garis miring tidak terlihat, tetapi saat pengenalan ucapan pertama kali digunakan, Chrome perlu meminta izin kepada pengguna untuk menggunakan mikrofon. Dalam hal ini, onstart
hanya akan diaktifkan jika dan jika pengguna memberikan izin. Halaman yang dihosting di HTTPS tidak perlu berulang kali meminta izin, sedangkan halaman yang dihosting HTTP memerlukannya.
Jadi, buat halaman web Anda menjadi hidup dengan memungkinkan mereka untuk mendengarkan pengguna Anda!
Kami ingin mendengar masukan Anda...
- Untuk komentar tentang spesifikasi W3C Web Speech API: email, arsip surat, grup komunitas
- Untuk komentar tentang implementasi Chrome atas spesifikasi ini: email, arsip surat
Lihat Laporan Resmi Privasi Chrome untuk mempelajari cara Google menangani data suara dari API ini.