Các ứng dụng web trò chuyện – Giới thiệu về API Tổng hợp giọng nói

Eric Bidelman
Twitter GitHub Trang chủ

Web Speech API thêm tính năng nhận dạng giọng nói (chuyển lời nói thành văn bản) và tổng hợp lời nói (chuyển văn bản sang lời nói) vào JavaScript. Bài đăng này trình bày ngắn gọn về phiên bản thứ hai, vì API này gần đây đã có trong Chrome 33 (thiết bị di động và máy tính). Nếu bạn quan tâm đến nhận dạng giọng nói thì cách đây không lâu, Glen Shires đã có một bài viết tuyệt vời về tính năng nhận dạng giọng nói, "Ứng dụng web điều hướng bằng giọng nói: Giới thiệu về API giọng nói trên web".

Thông tin cơ bản

Cách sử dụng cơ bản nhất của API tổng hợp là truyền speechSynthesis.speak() và câu nói:

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

Tuy nhiên, bạn cũng có thể thay đổi các tham số để tác động đến âm lượng, tốc độ nói, cao độ, giọng nói và ngôn ngữ:

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(e) {
    console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

Thiết lập giọng nói

API này cũng cho phép bạn nhận danh sách giọng nói mà công cụ hỗ trợ:

speechSynthesis.getVoices().forEach(function(voice) {
    console.log(voice.name, voice.default ? voice.default :'');
});

Sau đó, hãy đặt một giọng nói khác bằng cách đặt .voice trên đối tượng giọng nói:

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

Bản minh hoạ

Trong buổi nói chuyện tại Google I/O năm 2013, "More Awesome Web: features you’ve already want" (www.moreawesomeweb.com), tôi đã trình bày một bản minh hoạ giống với Google Now/Siri về việc sử dụng dịch vụ SpeechRecognition của Web Speech API với API Google Dịch để tự động dịch dữ liệu đầu vào của micrô sang ngôn ngữ khác:

BẢN TRÌNH DIỄN: http://www.moreawesomeweb.com/demos/speech_translate.html

Rất tiếc là ứng dụng này đã sử dụng một API không được ghi nhận (và không chính thức) để tổng hợp giọng nói. Giờ đây, chúng tôi đã có API Web Speech đầy đủ để đọc lại bản dịch! Tôi đã cập nhật bản minh hoạ để sử dụng API tổng hợp.

Hỗ trợ trình duyệt

Chrome 33 có hỗ trợ đầy đủ cho Web Speech API trong khi Safari dành cho iOS7 hỗ trợ một phần.

Phát hiện tính năng

Vì các trình duyệt có thể hỗ trợ riêng từng phần của Web Speech API (ví dụ: trường hợp với Chromium) nên bạn có thể cần phát hiện từng tính năng một cách riêng biệt:

if ('speechSynthesis' in window) {
    // Synthesis support. Make your web apps talk!
}

if ('SpeechRecognition' in window) {
    // Speech recognition support. Talk to your apps!
}