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

Web Speech API, JavaScript'e ses tanıma (sesle yazma) ve ses sentezi (metinle okuma) özelliklerini ekler. API kısa süre önce Chrome 33'e (mobil ve masaüstü) eklendiğinden bu makalede ikincisi kısaca ele alınmaktadır. Ses tanıma ile ilgileniyorsanız Glen Shires'ın bir süre önce ses tanıma özelliğiyle ilgili yazdığı "Sesle Çalışan Web Uygulamaları: Web Speech API'ye Giriş" başlıklı makaleyi inceleyebilirsiniz.

Temel seviye

Sentez API'sinin en temel kullanımı, speechSynthesis.speak() ve ifadeyi iletmektir:

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

Ancak ses düzeyini, konuşma hızını, perdeyi, sesi ve dili etkileyecek 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 almanıza da olanak tanır:

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

Ardından, ifade nesnesinde .voice 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 "Daha Muhteşem Web: Her zaman istediğiniz özellikler" (www.moreawesomeweb.com) konulu konuşmamda, mikrofon girişini başka bir dile otomatik olarak çevirmek için Web Speech API'nin SpeechRecognition hizmetini Google Translate API ile birlikte kullanmaya yönelik Google Now/Siri benzeri bir demo gösterdim:

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

Maalesef konuşma sentezleme işlemini gerçekleştirmek için dokümanları olmayan (ve resmi olmayan bir API) kullanıldı. Artık çeviriyi sesli olarak okumak için tam Web Speech API'ye sahibiz. Demoyu sentez API'sini kullanacak şekilde güncelledim.

Tarayıcı desteği

Chrome 33, Web Speech API için tam destek sunarken iOS7 için Safari kısmi destek sunar.

Özellik algılama

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

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

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