Ứng dụng web điều khiển bằng giọng nói – Giới thiệu về Web Speech API

API Web Speech JavaScript mới giúp bạn dễ dàng thêm tính năng nhận dạng lời nói vào các trang web. API này cho phép bạn kiểm soát và linh hoạt các tính năng nhận dạng lời nói trong Chrome phiên bản 25 trở lên. Dưới đây là một ví dụ về văn bản được nhận dạng xuất hiện gần như ngay lập tức trong khi bạn nói.

Bản minh hoạ Web Speech API

DEMO / NGUỒN

Hãy cùng xem chi tiết. Trước tiên, chúng tôi sẽ kiểm tra xem trình duyệt có hỗ trợ API Web Speech hay không bằng cách kiểm tra xem đối tượng webkitSpeechRecognition có tồn tại hay không. Nếu không, chúng tôi khuyên người dùng nên nâng cấp trình duyệt. (Vì API vẫn đang trong giai đoạn thử nghiệm, nên hiện tại, API này được gắn tiền tố của nhà cung cấp.) Cuối cùng, chúng tôi tạo đối tượng webkitSpeechRecognition cung cấp giao diện lời nói và đặt một số thuộc tính cũng như trình xử lý sự kiện của đối tượng này.

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() { ... }
    ...

Giá trị mặc định của continuous là false, nghĩa là khi người dùng ngừng nói, tính năng nhận dạng lời nói sẽ kết thúc. Chế độ này rất phù hợp với văn bản đơn giản như các trường nhập ngắn. Trong bản minh hoạ này, chúng tôi đặt giá trị này thành true để tính năng nhận dạng sẽ tiếp tục ngay cả khi người dùng tạm dừng trong khi nói.

Giá trị mặc định của interimResults là false, nghĩa là kết quả duy nhất mà trình nhận dạng trả về là kết quả cuối cùng và sẽ không thay đổi. Bản minh hoạ đặt giá trị này thành true để chúng tôi nhận được kết quả sớm và tạm thời có thể thay đổi. Hãy xem kỹ bản minh hoạ. Văn bản màu xám là văn bản tạm thời và đôi khi thay đổi, trong khi văn bản màu đen là các câu trả lời của trình nhận dạng được đánh dấu là cuối cùng và sẽ không thay đổi.

Để bắt đầu, người dùng nhấp vào nút micrô để kích hoạt mã này:

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

Chúng tôi đặt ngôn ngữ nói cho trình nhận dạng lời nói "lang" thành giá trị BCP-47 mà người dùng đã chọn thông qua danh sách thả xuống lựa chọn, ví dụ: "en-US" cho tiếng Anh (Hoa Kỳ). Nếu bạn không đặt giá trị này, thì giá trị mặc định sẽ là ngôn ngữ của phần tử gốc và hệ phân cấp của tài liệu HTML. Tính năng nhận dạng lời nói của Chrome hỗ trợ nhiều ngôn ngữ (xem bảng "langs" trong nguồn bản minh hoạ), cũng như một số ngôn ngữ từ phải sang trái không có trong bản minh hoạ này, chẳng hạn như he-IL và ar-EG.

Sau khi đặt ngôn ngữ, chúng tôi sẽ gọi recognition.start() để kích hoạt trình nhận dạng lời nói. Sau khi bắt đầu thu âm thanh, trình nhận dạng sẽ gọi trình xử lý sự kiện onstart, sau đó, đối với mỗi nhóm kết quả mới, trình nhận dạng sẽ gọi trình xử lý sự kiện 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);
    };
}

Trình xử lý này nối tất cả kết quả nhận được cho đến nay thành hai chuỗi: final_transcript và interim_transcript. Các chuỗi kết quả có thể bao gồm "\n", chẳng hạn như khi người dùng nói "new paragraph" (đoạn văn mới), vì vậy, chúng tôi sử dụng hàm linebreak để chuyển đổi các chuỗi này thành thẻ HTML <br> hoặc <p>. Cuối cùng, hàm này sẽ đặt các chuỗi này làm innerHTML của các phần tử <span> tương ứng: final_span được tạo kiểu bằng văn bản màu đen và interim_span được tạo kiểu bằng văn bản màu xám.

interim_transcript là một biến cục bộ và được xây dựng lại hoàn toàn mỗi khi sự kiện này được gọi vì có thể tất cả kết quả tạm thời đã thay đổi kể từ sự kiện onresult cuối cùng. Chúng ta có thể làm tương tự đối với final_transcript bằng cách chỉ cần bắt đầu vòng lặp for ở 0. Tuy nhiên, vì văn bản cuối cùng không bao giờ thay đổi, nên chúng tôi đã làm cho mã ở đây hiệu quả hơn một chút bằng cách tạo final_transcript thành một biến toàn cục để sự kiện này có thể bắt đầu vòng lặp for tại event.resultIndex và chỉ nối thêm văn bản cuối cùng mới.

Vậy là xong! Phần còn lại của mã chỉ dùng để làm cho mọi thứ trông đẹp mắt. Mã này duy trì trạng thái, cho người dùng thấy một số thông báo hữu ích và hoán đổi hình ảnh GIF trên nút micrô giữa micrô tĩnh, hình ảnh micrô bị gạch chéo và micrô động với dấu chấm màu đỏ nhấp nháy.

Hình ảnh micrô bị gạch chéo sẽ xuất hiện khi recognition.start() được gọi, sau đó được thay thế bằng micrô động khi onstart kích hoạt. Thông thường, điều này xảy ra rất nhanh nên bạn không nhận thấy dấu gạch chéo. Tuy nhiên, lần đầu tiên sử dụng tính năng nhận dạng lời nói, Chrome cần hỏi người dùng xem họ có cho phép sử dụng micrô hay không. Trong trường hợp đó, onstart chỉ kích hoạt khi và nếu người dùng cho phép. Các trang được lưu trữ trên HTTPS không cần hỏi lại nhiều lần về quyền, trong khi các trang được lưu trữ trên HTTP thì cần.

Vì vậy, hãy làm cho các trang web của bạn trở nên sống động bằng cách cho phép các trang này nghe người dùng của bạn!

Chúng tôi rất mong nhận được ý kiến phản hồi của bạn...

Hãy tham khảo bài viết Tìm hiểu về quyền riêng tư trong Chrome để xem chính sách quyền riêng tư của chúng tôi (Cập nhật: ngày 16 tháng 6 năm 2026).