Yeni JavaScript Web Speech API, web sayfalarınıza konuşma tanıma özelliğini eklemeyi kolaylaştırır. Bu API, Chrome 25 ve sonraki sürümlerdeki konuşma tanıma özellikleri üzerinde hassas kontrol ve esneklik sağlar. Aşağıda, tanınan metnin konuşurken neredeyse anında göründüğü bir örnek verilmiştir.
Şimdi işin mutfağını inceleyelim. Öncelikle, webkitSpeechRecognition nesnesinin var 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ğu için şu anda tedarikçi firma ön eklidir.) Son olarak, konuşma arayüzünü sağlayan webkitSpeechRecognition nesnesini oluşturup 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'tır. 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 demo'da, kullanıcı konuşurken duraklatsa bile tanıma işleminin devam etmesi için bu ayarı doğru olarak belirledik.
interimResults için varsayılan değer yanlıştır. Bu, tanımlayıcı tarafından döndürülen tek sonuçların nihai olduğu ve değişmeyeceği anlamına gelir. Demoda bu değer doğru olarak ayarlanır. Böylece, değişebilecek erken dönem ara sonuçlar elde ederiz. Demoyu dikkatlice izleyin. Gri metin, geçici olan ve bazen değişen metindir. Siyah metin ise tanımlayıcıdan gelen, nihai olarak işaretlenmiş ve değişmeyecek yanıtlardır.
Kullanıcı, mikrofon düğmesini tıklayarak aşağıdaki kodu tetikler:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Konuşma tanımlayıcı "lang" için konuşulan dili, kullanıcının seçim açılır listesi aracılığıyla seçtiği BCP-47 değerine (ör. ABD İngilizcesi için "en-US") ayarlarız. Bu ayarlanmazsa varsayılan olarak HTML dokümanı kök öğesinin ve hiyerarşisinin lang değeri kullanılır. Chrome konuşma tanıma, birçok dili (demo kaynağındaki "langs" tablosuna bakın) ve bu demoya dahil edilmeyen bazı sağdan sola yazılan dilleri (ör. he-IL ve ar-EG) destekler.
Dili ayarladıktan sonra konuşma tanımayı etkinleştirmek için recognition.start() çağrılır. Ses yakalamaya başladığında 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 dize halinde birleştirir: final_transcript ve interim_transcript. Elde edilen dizeler "\n" içerebilir (ör. kullanıcı "yeni paragraf" dediğinde). Bu nedenle, bunları HTML etiketleri <br> veya <p>'ye dönüştürmek için linebreak işlevini kullanırız. Son olarak bu dizeleri, karşılık gelen <span> öğelerinin innerHTML olarak ayarlar: final_span siyah metinle, interim_span ise gri metinle biçimlendirilir.
interim_transcript yerel bir değişkendir ve son onresult etkinliğinden bu yana tüm ara sonuçların değişmiş olması mümkün olduğundan bu etkinlik her çağrıldığında tamamen yeniden oluşturulur. Aynısını final_transcript için de yapabiliriz. Bunun için for döngüsünü 0'dan başlatmamız yeterlidir. Ancak nihai metin hiçbir zaman değişmediğinden, final_transcript değerini global yaparak buradaki kodu biraz daha verimli hale getirdik. Böylece bu etkinlik, for döngüsünü event.resultIndex değerinde başlatabilir ve yalnızca yeni nihai metni ekler.
Hepsi bu kadar! Kodun geri kalanı, her şeyin güzel görünmesi içindir. Durumu korur, kullanıcıya bazı bilgilendirici mesajlar gösterir ve mikrofon düğmesindeki GIF resmini statik mikrofon, mikrofon-eğik çizgi resmi ve mikrofon-animasyonlu titreşen kırmızı nokta arasında değiştirir.
recognition.start() çağrıldığında mikrofon eğik çizgi resmi gösterilir ve ardından onstart tetiklendiğinde mikrofon animasyonu resmiyle değiştirilir. Bu işlem genellikle 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 mikrofonu kullanmak için kullanıcıdan izin alması gerekir. Bu durumda onstart yalnızca kullanıcı izin verdiğinde tetiklenir. HTTPS'de barındırılan sayfaların tekrar tekrar izin istemesi gerekmez. HTTP'de barındırılan sayfaların ise tekrar tekrar izin istemesi gerekir.
Bu nedenle, web sayfalarınızın kullanıcılarınızı dinlemesini sağlayarak canlanmasını sağlayın.
Geri bildiriminizi öğrenmekten memnuniyet duyarız...
- W3C Web Speech API spesifikasyonuyla ilgili 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 gelen ses verilerini nasıl işlediğini öğrenmek için Chrome Gizlilik Raporu'na bakın.