Aplikasi web berbasis suara - Pengantar Web Speech API

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.

Demo Web Speech API

DEMO / SUMBER

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...

Lihat Laporan Resmi Privasi Chrome untuk mempelajari cara Google menangani data suara dari API ini.