Ses temelli web uygulamaları - Web Speech API'ye Giriş

Yeni JavaScript Web Speech API, web sayfalarınıza konuşma tanıma özelliği 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. Konuşurken tanınan metnin neredeyse anında göründüğü bir örneği aşağıda bulabilirsiniz.

Web Speech API tanıtımı

DEMO / KAYNAK

Şimdi işin iç yüzüne bakalım. Ö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ğundan şu anda satıcı önekli.) Son olarak, konuşma arayüzünü sağlayan webkitSpeechRecognition nesnesini oluştururuz ve 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'tur. Bu, kullanıcı konuşmayı bıraktığında konuşma tanıma işleminin sona ereceği anlamına gelir. Bu mod, kısa giriş alanları gibi basit metinler için idealdir. Bu demoda, kullanıcı konuşurken duraklasa bile tanıma işleminin devam etmesi için değeri doğru olarak ayarladık.

interimResults için varsayılan değer false'tur. Bu, tanıyıcı tarafından döndürülen tek sonuçların nihai olduğu ve değişmeyeceği anlamına gelir. Demo, bu değeri doğru olarak ayarlar. Böylece, değişebilecek erken ve ara sonuçlar elde ederiz. Demoyu dikkatlice izleyin. Gri metin, geçici olan ve bazen değişen metindir. Siyah metin ise tanıyıcının nihai olarak işaretlenmiş ve değişmeyecek yanıtlarıdır.

Başlamak için kullanıcı mikrofon düğmesini tıkladığında şu kod tetiklenir:

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

Konuşma tanıyıcının "lang" konuşma dilini, kullanıcının seçim açılır listesinden seçtiği BCP-47 değerine (ör. İngilizce-ABD için "en-US") ayarlıyoruz. Bu ayarlanmamışsa HTML belgesi kök öğesinin ve hiyerarşisinin diline varsayılan olarak ayarlanır. Chrome konuşma tanıma, çok sayıda dili (demo kaynağındaki "langs" tablosuna bakın) ve bu demoya dahil edilmeyen bazı sağdan sola dilleri (ör. he-IL ve ar-EG) destekler.

Dili ayarladıktan sonra konuşma tanıma özelliğini etkinleştirmek için recognition.start() işlevini çağırırız. 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, şimdiye kadar alınan tüm sonuçları iki dizede birleştirir: final_transcript ve interim_transcript. Kullanıcı "yeni paragraf" dediğinde sonuçta elde edilen dizeler "\n" içerebilir. Bu nedenle, bunları HTML etiketlerine linebreak veya <p> dönüştürmek için linebreak işlevini kullanırız.<br> Son olarak bu dizeleri, ilgili <span> öğelerinin innerHTML'si olarak ayarlar: final_span (siyah metinle stilize edilmiş) ve interim_span (gri metinle stilize edilmiş).

interim_transcript, yerel bir değişkendir ve son onresult etkinliğinden bu yana tüm ara sonuçların değişmiş olması ihtimaline karşı bu etkinlik her çağrıldığında tamamen yeniden oluşturulur. for döngüsünü 0'dan başlatarak final_transcript için de aynısını yapabiliriz. Ancak nihai metin hiçbir zaman değişmediği için final_transcript değişkenini global yaparak buradaki kodu biraz daha verimli hale getirdik. Böylece bu etkinlik, for döngüsünü event.resultIndex konumunda başlatabilir ve yalnızca yeni nihai metinleri ekleyebilir.

Hepsi bu kadar! Kodun geri kalanı yalnızca her şeyin güzel görünmesi için eklenmiştir. Durumu korur, kullanıcıya bazı bilgilendirici mesajlar gösterir ve mikrofon düğmesindeki GIF resmini statik mikrofon, mikrofon çizgi resmi ve titreşen kırmızı nokta ile animasyonlu mikrofon arasında değiştirir.

recognition.start() çağrıldığında mikrofon/resmi gösterilir ve ardından onstart tetiklendiğinde mikrofon animasyonuyla 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 ilk kez kullanıldığında Chrome'un kullanıcıdan mikrofonu kullanma izni istemesi gerekir. Bu durumda onstart yalnızca kullanıcı izin verirse tetiklenir. HTTPS'de barındırılan sayfaların tekrar tekrar izin istemesi gerekmezken HTTP'de barındırılan sayfaların tekrar tekrar izin istemesi gerekir.

Bu nedenle, kullanıcılarınızı dinlemelerini sağlayarak web sayfalarınızı canlandırın.

Geri bildiriminizi almak isteriz...

Gizlilik politikamız için Chrome'daki gizliliği anlama başlıklı makaleyi inceleyin (Güncellendi: 16 Haziran 2026).