Aplikasi web berbasis suara - Pengantar Web Speech API

Web Speech API JavaScript baru memudahkan penambahan pengenalan ucapan ke halaman web Anda. API ini memungkinkan kontrol dan fleksibilitas yang lebih baik atas kemampuan pengenalan ucapan di Chrome versi 25 dan yang lebih baru. Berikut adalah contoh dengan teks yang dikenali muncul hampir seketika saat berbicara.

Demo Web Speech API

DEMO / SUMBER

Mari kita lihat prosesnya. Pertama, kita periksa apakah browser mendukung Web Speech API dengan memeriksa apakah objek webkitSpeechRecognition ada. Jika tidak, sebaiknya pengguna mengupgrade browsernya. (Karena API masih bersifat eksperimental, API saat ini memiliki awalan vendor.) Terakhir, kita membuat objek webkitSpeechRecognition yang menyediakan antarmuka ucapan, dan menetapkan beberapa atribut serta 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, kami menyetelnya ke benar (true), sehingga pengenalan akan berlanjut meskipun pengguna menjeda saat berbicara.

Nilai default untuk interimResults adalah salah (false), yang berarti bahwa satu-satunya hasil yang ditampilkan oleh pengenal adalah hasil akhir dan tidak akan berubah. Demo menyetelnya ke benar sehingga kita mendapatkan hasil sementara awal yang mungkin berubah. Tonton demo dengan cermat, teks abu-abu adalah teks sementara yang 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();

Kita 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, bahasa ini akan ditetapkan secara default ke lang elemen dan hierarki elemen root dokumen HTML. Pengenalan ucapan Chrome mendukung banyak bahasa (lihat tabel “langs” di sumber demo), serta beberapa bahasa kanan-ke-kiri yang tidak disertakan dalam demo ini, seperti he-IL dan ar-EG.

Setelah menyetel bahasa, kita memanggil recognition.start() untuk mengaktifkan pengenal ucapan. Setelah mulai merekam audio, aplikasi akan memanggil pengendali peristiwa onstart, lalu untuk setiap kumpulan hasil baru, aplikasi 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);
    };
}

Handler ini menggabungkan semua hasil yang diterima sejauh ini menjadi 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, tetapkan 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 dibangun 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 pada 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 untuk membuat semuanya terlihat bagus. Komponen ini mempertahankan status, menampilkan beberapa pesan informatif kepada pengguna, dan menukar gambar GIF pada tombol mikrofon antara mikrofon statis, gambar mikrofon yang dicoret, dan mikrofon yang beranimasi dengan titik merah yang berdenyut.

Gambar mic-slash ditampilkan saat recognition.start() dipanggil, lalu diganti dengan mic-animate saat onstart diaktifkan. Biasanya, hal ini terjadi begitu cepat sehingga garis miring tidak terlihat, tetapi saat pengenalan ucapan digunakan untuk pertama kalinya, Chrome perlu meminta izin pengguna untuk menggunakan mikrofon. Dalam hal ini, onstart hanya diaktifkan jika dan saat pengguna memberikan izin. Halaman yang dihosting di HTTPS tidak perlu meminta izin berulang kali, sedangkan halaman yang dihosting di HTTP perlu.

Jadi, buat halaman web Anda menjadi lebih menarik dengan mengaktifkannya untuk mendengarkan pengguna Anda.

Kami ingin mendengar masukan Anda...

Lihat Memahami privasi di Chrome untuk mengetahui kebijakan privasi kami (Diperbarui: 16 Juni 2026).