Web Speech API 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 trang web. API này cho phép kiểm soát và linh hoạt hơn đối với 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à 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 nói.
Hãy cùng xem xét kỹ hơn. Trước tiên, chúng ta 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, người dùng nên nâng cấp trình duyệt. (Vì API này vẫn đang trong giai đoạn thử nghiệm nên hiện có tiền tố của nhà cung cấp.) Cuối cùng, chúng ta tạo đối tượng webkitSpeechRecognition cung cấp giao diện lời nói, đồng thời đặt một số thuộc tính và trình xử lý sự kiện của đối tượng đó.
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 ta đặt giá trị này thành true để quá trình nhận dạng tiếp tục ngay cả khi người dùng tạm dừng trong khi nói.
Giá trị mặc định cho interimResults là sai, 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 ta có được kết quả sớm, 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à phản hồi từ 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 "lang" của trình nhận dạng lời nói thành giá trị BCP-47 mà người dùng đã chọn thông qua danh sách thả xuống, ví dụ: "en-US" cho tiếng Anh-Hoa Kỳ. Nếu bạn không đặt thuộc tính này, thì thuộc tính này sẽ mặc định là lang của phần tử gốc và hệ phân cấp 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 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 thiết lập ngôn ngữ, chúng ta gọi recognition.start() để kích hoạt trình nhận dạng lời nói. Sau khi bắt đầu ghi âm, ứng dụng sẽ gọi trình xử lý sự kiện onstart, sau đó cho mỗi nhóm kết quả mới, ứng 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. Chuỗi kết quả có thể bao gồm "\n", chẳng hạn như khi người dùng nói "đoạn văn mới", vì vậy, chúng ta 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 đặ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 tạo 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 gần đây nhất. Chúng ta cũng có thể làm tương tự cho final_transcript bằng cách 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 final_transcript thành 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ỉ thêm bất kỳ văn bản cuối cùng mới nào.
Vậy là xong! Phần còn lại của mã chỉ để làm cho mọi thứ trông đẹp mắt. Lớp này duy trì trạng thái, hiển thị cho người dùng 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ô gạch chéo và micrô động với dấu chấm màu đỏ nhấp nháy.
Hình ảnh mic-slash sẽ xuất hiện khi recognition.start() được gọi, sau đó được thay thế bằng mic-animate khi onstart kích hoạt. Thông thường, việc này diễn ra nhanh đến mức bạn không nhận thấy dấu gạch chéo, nhưng trong lần đầu tiên sử dụng tính năng nhận dạng lời nói, Chrome cần người dùng cấp quyền sử dụng micrô. Trong trường hợp này, onstart chỉ kích hoạt khi người dùng cho phép. Các trang được lưu trữ trên HTTPS không cần phải liên tục yêu cầu cấp 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 trang web của bạn trở nên sống động bằng cách cho phép trang web nghe người dùng!
Chúng tôi rất mong nhận được ý kiến phản hồi của bạn...
- Để nhận xét về quy cách API Web Speech của W3C: email, bản lưu trữ thư, nhóm cộng đồng
- Để nhận xét về cách triển khai thông số kỹ thuật này của Chrome: email, tài liệu lưu trữ thư
Hãy tham khảo Báo cáo chính thức về quyền riêng tư của Chrome để tìm hiểu cách Google xử lý dữ liệu giọng nói từ API này.