Yeni JavaScript Web Speech API, web sayfalarınıza konuşma tanıma eklemeyi kolaylaştırır. Bu API, Chrome'un 25 ve sonraki sürümlerindeki konuşma tanıma özellikleri üzerinde hassas kontrol ve esneklik sağlar. Tanınan metnin, konuşma sırasında neredeyse anında göründüğü bir örneği burada bulabilirsiniz.
Şimdi işin arka planına göz atalım. Ö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ının tarayıcısını yükseltmesini öneririz. (API hâlâ deneysel olduğundan, şu anda tedarikçi firma ön eki olarak kullanılmaktadır.) Son olarak, konuşma arayüzünü sağlayan webkitSpeechRecognition nesnesini oluşturup bunun 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'tur. Bu, kullanıcı konuşmayı bıraktığında konuşma tanımanın sona ereceği anlamına gelir. Bu mod, kısa giriş alanları gibi basit metinler için idealdir. Bu demoda değeri true olarak ayarladık. Böylece kullanıcı konuşurken dursa bile tanıma devam eder.
interimResults için varsayılan değer false'tur. Diğer bir deyişle, tanıyıcı tarafından döndürülen sadece nihai sonuçlar nihaidir ve değişmez. Demoda doğru olduğu için erken ve ara sonuçlar değişebilir. Demoyu dikkatlice izleyin. Gri metin geçicidir ve bazen değişirken, siyah metin son olarak işaretlenmiş ve değişmeyecek olan tanıyıcıdan gelen 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" için konuşma dilini ayarlarız kullanıcının seçim açılır listesinden seçtiği BCP-47 değerine ekleyin (örneğin, İngilizce-Amerika Birleşik Devletleri için "en-US"). Bu ayar belirtilmezse varsayılan olarak HTML belgesi kök öğesinin ve hiyerarşisinin 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ı dilleri (ör. he-IL ve ar-EG) destekler.
Dili ayarladıktan sonra, konuşma tanıyıcıyı etkinleştirmek için recognition.start() yöntemini çağırırız. Ses yakalamaya başladıktan sonra onstart etkinlik işleyicisini ve 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, şimdiye kadar alınan tüm sonuçları iki dizede birleştirir: final_transcript ve interim_transcript. Sonuçta elde edilen dizelerde "\n" bulunabilir (ör. kullanıcı "yeni paragraf" dediğinde), bu dizeleri <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'si olarak ayarlar: Siyah metinle stilize edilen final_span ve gri metinle stilize edilen 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ısını final_transcript için de for döngüsünü 0'dan başlatarak yapabiliriz. Bununla birlikte, son metin hiç değişmediğinden, final_transcript öğesini genel hale getirerek buradaki kodu biraz daha verimli hale getirdik. Böylece bu etkinlik, for döngüsü event.resultIndex olduğunda başlayabilir ve yalnızca yeni son metin eklenebilir.
Hepsi bu kadar! Kodun geri kalanı yalnızca her şeyin güzel görünmesini sağlamak için bulunuyor. Durumu korur, kullanıcıya bilgilendirici mesajlar gösterir ve mikrofon düğmesindeki GIF resmini statik mikrofon ile eğik çizgi resmi arasında değiştirir ve mikrofon animasyonunda yanıp sönen kırmızı noktayla değiştirir.
recognition.start() çağrıldığında mikrofonlu eğik çizgi resmi gösterilir ve onstart etkinleştiğinde mic-animate ile değiştirilir. Bu genellikle eğik çizgi fark edilmeyecek kadar hızlı gerçekleşir, ancak konuşma tanıma ilk kez kullanıldığında Chrome'un kullanıcıdan mikrofonu kullanmak için izin istemesi gerekir. Bu durumda onstart yalnızca kullanıcı izin verdiğinde ve izin verdiği takdirde etkinleşir. HTTPS'de barındırılan sayfaların tekrar tekrar izin istemesi gerekmezken HTTP tarafından barındırılan sayfalar bunu gerektirir.
Öyleyse web sayfalarınızın kullanıcılarınızı dinlemesini sağlayarak onlara hayat verin!
Geri bildiriminizi duymak isteriz...
- W3C Web Speech API spesifikasyonundaki yorumlar için: e-posta, posta arşivi, topluluk grubu
- Chrome'un bu spesifikasyonun uygulanmasıyla ilgili yorumlar için: e-posta, posta arşivi
Google'ın bu API'den alınan ses verilerini nasıl kullandığını öğrenmek için Chrome Gizlilik Raporu'na bakın.