Yeni JavaScript Web Speech API'si, web sayfalarınıza konuşma tanıma eklemenizi kolaylaştırır. Bu API, Chrome 25 ve sonraki sürümlerindeki konuşma tanıma özellikleri üzerinde hassas denetim ve esneklik sağlar. Tanınan metnin konuşurken neredeyse anında göründüğü bir örneği aşağıda bulabilirsiniz.
Neler olduğunu görelim. Öncelikle, webkitSpeechRecognition nesnesinin mevcut olup olmadığını kontrol ederek tarayıcının Web Speech API'yi destekleyip desteklemediğini kontrol ederiz. Aksi takdirde, kullanıcıya tarayıcısını yükseltmesini öneririz. (API hâlâ deneme aşamasında olduğu için şu anda tedarikçi firma ön ekine sahiptir.) Son olarak, konuşma arayüzünü sağlayan webkitSpeechRecognition nesnesini oluşturup bu nesnenin bazı özelliklerini ve etkinlik işleyicilerini ayarlarız.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
continuous için varsayılan değer false (yanlış) şeklindedir. Yani, kullanıcı konuşmayı bıraktığında konuşma tanıma da sona erer. Bu mod, kısa giriş alanları gibi basit metinler için idealdir. Bu demoda, kullanıcı konuşurken duraklasa bile tanımanın devam etmesi için bunu true olarak ayarladık.
interimResults için varsayılan değer false (yanlış) şeklindedir. Diğer bir deyişle, tanıyıcı tarafından döndürülen sonuçlar yalnızca nihaidir ve değişmez. Demo, durumu doğru olarak belirlediği için değişebilecek geçici sonuçları erkenden elde ederiz. Demoyu dikkatli bir şekilde izleyin. Gri metin, geçici olup bazen değişebilirken siyah metin ise tanıyıcı tarafından son olarak işaretlenmiş ve değişmeyecek olan yanıtlardır.
Başlamak için kullanıcı mikrofon düğmesini tıklar ve şu kod tetiklenir:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Konuşma tanıyıcı "lang"ın konuşma dilini, kullanıcının seçim açılır listesi aracılığıyla seçtiği BCP-47 değerine ayarlarız (örneğin, İngilizce-ABD için "en-US"). Bu ayar belirtilmezse varsayılan olarak HTML dokümanı kök öğesinin ve hiyerarşinin dili kullanılır. Chrome konuşma tanıma özelliği, çok sayıda dili (demo kaynağındaki "langs" tablosuna bakın) ve bu demoda yer almayan bazı sağdan sola dilleri (ör. he-IL ve ar-EG) destekler.
Dili ayarladıktan sonra, konuşma tanıyıcıyı etkinleştirmek için recognition.start() çağırırız. Ses yakalamaya başladıktan sonra onstart etkinlik işleyicisini, ardından her yeni sonuç grubu için onresult etkinlik işleyicisini çağırır.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Bu işleyici, şu ana kadar alınan tüm sonuçları iki dizede birleştirir: final_transcript ve interim_transcript. Sonuçta ortaya çıkan dizeler "\n" içerebilir (kullanıcı "yeni paragraf" söylediğinde olduğu gibi). Bu nedenle bunları <br> veya <p> HTML etiketlerine dönüştürmek için linebreak işlevini kullanırız. Son olarak, bu dizeleri karşılık gelen <span> öğelerinin innerHTML öğesi olarak ayarlar: Stili siyah metinle belirlenmiş final_span ve gri metinle stilize edilmiş interim_span.
interim_transcript, yerel bir değişkendir ve son onresult etkinliğinden bu yana tüm ara sonuçlar değişmiş olabileceğinden bu etkinlik her çağrıldığında tamamen yeniden oluşturulur. Aynı işlemi, for döngüsünü 0'dan başlatarak final_transcript için de yapabiliriz. Ancak son metin hiçbir zaman değişmediğinden, final_transcript öğesini küresel bir hale getirerek buradaki kodu biraz daha verimli hale getirdik. Böylece bu etkinlik, event.resultIndex itibarıyla for döngüsünü başlatabilir ve sadece yeni nihai metin ekleyebilir.
Hepsi bu kadar! Kodun geri kalanı, yalnızca her şeyin güzel görünmesini sağlamak için kullanılır. Durumu korur, kullanıcıya bazı bilgilendirici mesajlar gösterir ve mikrofon düğmesindeki GIF resmini statik mikrofon, eğik çizgi resmi ve mikrofon animasyonu arasında yanıp sönen kırmızı noktayla değiştirir.
recognition.start() çağrıldığında mikrofona eğik çizgi resmi gösterilir. Ardından onstart etkinleştiğinde mikrofon animasyonu ile değiştirilir. Genellikle bu işlem o kadar hızlı gerçekleşir ki eğik çizgi fark edilmez, ancak konuşma tanıma özelliği ilk kez kullanıldığında Chrome'un kullanıcıdan mikrofonu kullanma izni istemesi gerekir. Bu durumda onstart yalnızca kullanıcı izin verdiğinde ve izin verirse etkinleşir. HTTPS'de barındırılan sayfaların tekrar tekrar izin istemesine gerek yoktur. HTTP tarafından barındırılan sayfalar ise izin istemektedir.
Öyleyse kullanıcılarınızı dinlemelerini sağlayarak web sayfalarınıza hayat verin!
Görüşlerinizi öğrenmek isteriz...
- W3C Web Speech API spesifikasyonundaki yorumlar için: e-posta, posta arşivi, topluluk grubu
- Chrome'un bu spesifikasyonu uygulamasıyla ilgili yorumlar için: e-posta, posta arşivi
Google'ın bu API'den alınan ses verilerini nasıl işlediğini öğrenmek için Chrome Gizlilik Raporu'na bakın.