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

Eric Bidelman

Web Speech API, JavaScript'e ses tanıma (konuşma metni) ve konuşma sentezi (metin okuma) ekler. API kısa süre önce Chrome 33'te (mobil ve masaüstü) kullanıma sunulduğundan bu gönderide kısaca değineceğiz. Konuşma tanıma özelliğiyle ilgileniyorsanız Glen Shires, bir süre önce "Voice Driven Web Apps: Entry to the Web Speech API'" adlı ses tanıma özelliğiyle ilgili harika bir yazı hazırladı.

Temel seviye

synthesis API'nin en temel kullanımı, speechSynthesis.speak() öğesini ve ifadeyi geçirmektir:

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

Bununla birlikte, parametreleri, ses düzeyini, konuşma hızını, perdesini, sesi ve dili değiştirmek için 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 sesin bir listesini almanıza da olanak tanır:

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

Ardından, telaffuz nesnesinde .voice değerini 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 konuşmamda, "Diğer Harika Web: Her zaman istediğiniz özellikler" (www.moreawesomeweb.com), Google Çeviri API'sı ile Web Speech API'nin SpeechRecognition hizmetini kullanarak mikrofon girişini başka bir dile otomatik olarak çevirmek için Google Now/Siri benzeri bir demo gösterdim:

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

Ne yazık ki konuşma sentezini gerçekleştirmek için belgelenmemiş (ve resmi olmayan bir API) kullandı. Artık çeviriyi doğru okuyabilmeniz için tam Web Speech API'miz var. Demoyu synthesis API'yi kullanacak şekilde güncelledim.

Tarayıcı Desteği

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

Özellik algılama

Tarayıcılar Web Speech API'nin her bölümünü ayrı olarak destekleyebileceği için (ör. Chromium'da) 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!
}