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 membahasnya secara singkat, karena API ini baru-baru ini diluncurkan di Chrome 33 (perangkat seluler dan desktop). Jika Anda tertarik dengan pengenalan ucapan, Glen Shires memiliki artikel bagus tentang fitur pengenalan ucapan, "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 bicara, 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);

Menetapkan 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 :'');
});

Kemudian, tetapkan suara yang berbeda, dengan menetapkan .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 presentasi saya di Google I/O 2013, "More Awesome Web: fitur yang selalu Anda inginkan" (www.moreawesomeweb.com), saya menunjukkan demo seperti Google Now/Siri tentang penggunaan layanan SpeechRecognition Web Speech API dengan Google Translate API untuk menerjemahkan input mikrofon secara otomatis ke dalam bahasa lain:

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

Sayangnya, aplikasi ini menggunakan API yang tidak terdokumentasi (dan tidak resmi) untuk melakukan sintesis ucapan. Sekarang kita memiliki Web Speech API lengkap untuk mengucapkan kembali terjemahan. 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 (misalnya, kasus dengan Chromium), sebaiknya Anda 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!
}