Konuşan web uygulamaları - Speech Synthesis API'ye Giriş

Web Speech API, JavaScript'e ses tanıma (konuşma okuma) ve konuşma sentezi (metin okuma) ekler. Kısa bir süre önce Chrome 33'te (mobil ve masaüstü) kullanıma sunulan API'den bu gönderide kısaca değiniliyor. Konuşma tanıma ile ilgileniyorsanız, Glen Shires bir süre önce ses tanıma özelliği hakkında harika bir yazı yazmış: "Voice Driven Web Apps: Introduction to Web Speech API".

Temel seviye

synthesis API'nin en temel kullanımı, speechSynthesis.speak() ve söyleneni iletmektir:

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

Bununla birlikte, ses düzeyini, konuşma hızını, perdesini, sesi ve dili etkilemek için parametreleri de değiştirebilirsiniz:

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

Ses ayarlama

API, motorun desteklediği seslerin listesini de almanıza olanak tanır:

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

Ardından, söylenen nesnede .voice parametresini ayarlayarak farklı bir ses ayarlayın:

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

Demo

Google I/O 2013'teki konuşmamda, "More Awesome Web: features you'beHer zaman istediğiniz özellikler" (www.moreawesomeweb.com), mikrofon girişini otomatik olarak başka bir dile çevirmek için Web Speech API'nin SpeechRecognition hizmetini Google Çeviri API'siyle birlikte kullanmanın Google Now/Siri benzeri bir demosunu gösterdim:

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

Ancak maalesef konuşma sentezini gerçekleştirmek için belgelenmemiş (ve resmi olmayan bir API) kullanılmış. Şimdi ise çeviriyi size söyleyecek tam Web Speech API'ye sahibiz. synthesis API'yi kullanacak şekilde demoyu güncelledim.

Tarayıcı Desteği

Chrome 33, Web Speech API'yi tam olarak desteklerken iOS7 için Safari'de kısmi destek sunulur.

Özellik algılama

Tarayıcılar Web Speech API'nin her bölümünü ayrı ayrı destekleyebildiğinden (ör. Chromium'da olduğu gibi), her özelliği ayrı ayrı algılama özelliğini kullanmak isteyebilirsiniz:

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

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