Aplikasi web yang berbicara - Pengantar API Sintesis Ucapan

Web Speech API menambahkan pengenalan suara (speech to text) dan sintesis ucapan (text to speech) ke JavaScript. Postingan ini secara singkat membahas yang terakhir, karena API baru-baru ini hadir di Chrome 33 (seluler dan desktop). Jika Anda tertarik dengan pengenalan ucapan, Glen Shires pernah menulis bagus beberapa waktu lalu tentang fitur pengenalan suara, "Voice driven Web Apps: Introduction to the Web Speech API".

Dasar-dasar

Penggunaan API sintesis yang paling dasar adalah meneruskan speechSynthesis.speak() dan ucapan:

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

Namun, Anda juga dapat mengubah parameter untuk memengaruhi volume, kecepatan ucapan, nada, suara, dan bahasa:

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);

Menyetel suara

API ini juga memungkinkan Anda mendapatkan daftar suara yang didukung mesin:

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

Lalu setel suara yang berbeda, dengan menyetel .voice pada objek ucapan:

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

Demo

Dalam diskusi Google I/O 2013 saya, "More Awesome Web: features you've always want" (www.moreawesomeweb.com), saya memperlihatkan demo mirip Google Now/Siri mengenai penggunaan layanan SpeechRecognition Web Speech API dengan Google Translate API untuk menerjemahkan input mikrofon secara otomatis ke bahasa lain:

DEMO: http://www.moreawesomeweb.com/demos/speech_translate.html

Sayangnya, ia menggunakan API yang tidak terdokumentasi (dan tidak resmi) untuk melakukan sintesis ucapan. Sekarang kami memiliki Web Speech API lengkap untuk mendukung terjemahannya. Saya telah memperbarui demo untuk menggunakan API sintesis.

Dukungan Browser

Chrome 33 memiliki dukungan penuh untuk Web Speech API, sedangkan Safari untuk iOS7 memiliki dukungan sebagian.

Deteksi fitur

Karena browser dapat mendukung setiap bagian Web Speech API secara terpisah (mis. dalam kasus Chromium), Anda mungkin ingin mendeteksi setiap fitur secara terpisah:

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

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