Web Speech API 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 tốt và tính linh hoạt đố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. Sau đây là một ví dụ cho thấy văn bản mà hệ thống nhận dạng được xuất hiện gần như ngay lập tức trong khi bạn nói.
Hãy cùng tìm hiểu nâng cao. Trước tiên, chúng ta sẽ kiểm tra xem trình duyệt có hỗ trợ Web Speech API 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âng cấp trình duyệt của họ. (Vì API này vẫn đang trong quá trình thử nghiệm nên hiện có tiền tố là 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 phù hợp với văn bản đơn giản như các trường nhập dữ liệu ngắn. Trong bản minh hoạ này, chúng ta đặt chính sách này thành true để quá trình 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 do 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 (đúng) nên chúng tôi sẽ sớm nhận được kết quả tạm thời và có thể sẽ 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âu trả lờ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ã sau:
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 giọng nói "lang" thành giá trị BCP-47 mà người dùng đã chọn qua danh sách lựa chọn thả xuống, ví dụ: "en-US" cho tiếng Anh-Mỹ. Nếu bạn không đặt thuộc tính này, thì chế độ mặc định sẽ là ngôn ngữ của hệ phân cấp và thành phần gốc 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 minh hoạ), cũng như một số ngôn ngữ viết 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 ta sẽ gọi recognition.start() để kích hoạt trình nhận dạng giọng nói. Sau khi bắt đầu ghi lại âm thanh, nó sẽ gọi onstart trình xử lý sự kiện, sau đó đối với mỗi tập hợp kết quả mới, nó sẽ gọi onresult trình xử lý sự kiện.
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 thời điểm này thành 2 chuỗi: final_transcript và interim_transcript. Các chuỗi kết quả có thể chứa "\n", chẳng hạn như khi người dùng nói "đoạ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 phần tử bên trong 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à 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ó thể làm tương tự cho final_transcript bằng cách bắt đầu vòng lặp for tại 0. Tuy nhiên, do văn bản cuối cùng không bao giờ thay đổi, nên chúng ta đã cải thiện mã ở đây hiệu quả hơn một chút bằng cách đặt final_transcript thành một toàn bộ để 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. Tính năng này duy trì trạng thái, hiển thị cho người dùng một số thông báo và hoán đổi hình ảnh GIF trên nút micrô giữa micrô tĩnh, hình ảnh dấu gạch chéo micrô và hiệu ứng động từ micrô bằng dấu chấm đỏ nhấp nháy.
Hình ảnh đường gạch chéo chữ hiển thị khi recognition.start() được gọi, sau đó được thay thế bằng micrô-animate khi onstart kích hoạt. Thông thường, điều này xảy ra nhanh đến mức dấu gạch chéo là không thể nhìn thấy. Tuy nhiên, trong lần đầu tiên tính năng nhận dạng lời nói được sử dụng, Chrome cần phải yêu cầu người dùng cấp quyền sử dụng micrô. Trong trường hợp đó, onstart chỉ kích hoạt khi người dùng cho phép và khi người dùng cho phép. Các trang được lưu trữ trên HTTPS không cần phải xin cấp quyền nhiều lần, trong khi các trang được lưu trữ HTTP thì có.
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 chúng lắng nghe ý kiến của người dùng!
Chúng tôi muốn nghe ý kiến phản hồi của bạn...
- Đối với các nhận xét về quy cách API Web Speech của W3C: email, bản lưu trữ gửi thư, nhóm cộng đồng
- Đối với các nhận xét về việc triển khai quy cách này của Chrome: email, gửi bản lưu trữ qua thư
Tham khảo Sách trắng về quyền riêng tư của Chrome để tìm hiểu cách Google xử lý dữ liệu thoại từ API này.