Javascript İle Tarayıcı Tabanlı Bir Sesli Komut Algılayıcı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için ekstra bir kütüphane kurulumuna ihtiyacınız yoktur. Web Speech API, modern tarayıcıların (Chrome, Edge ve Opera) büyük çoğunluğunda yerleşik olarak gelir. Ancak, yerel dosya sisteminden (file://) çalıştırdığınızda tarayıcılar güvenlik nedeniyle mikrofon erişimini engelleyebilir. Bu nedenle bir yerel geliştirme sunucusu kullanmanız şarttır.

• Modern bir web tarayıcısı (Chrome veya Edge önerilir).
• VS Code veya benzeri bir kod düzenleyici.
• Live Server eklentisi veya basit bir HTTP sunucusu (Node.js http-server gibi).
• Mikrofon erişimi olan bir bilgisayar.

Güvenlik Uyarısı: Tarayıcı tabanlı ses işleme, kullanıcının mikrofon iznini gerektirir. Bu izin sadece HTTPS protokolü üzerinden veya 'localhost' üzerinde verilmelidir. Üretim ortamında (production) mutlaka SSL sertifikası kullanmalısınız.

Web Speech API ile Ses Tanıma Motorunu Başlatma

Ses tanıma sisteminin ilk adımı, tarayıcının sunduğu SpeechRecognition nesnesini oluşturmaktır. Tarayıcılar arası uyumluluk için satıcı ön eklerini (vendor prefixes) kontrol etmemiz gerekir.

// Ses tanıma motorunu başlatma
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognition) {
    console.error("Tarayıcınız Web Speech API desteklemiyor.");
} else {
    const recognition = new SpeechRecognition();
    recognition.lang = 'tr-TR'; // Türkçe dil desteği
    recognition.interimResults = false; // Sadece kesinleşmiş sonuçları al
    console.log("Ses tanıma motoru hazır.");
}

Burada lang özelliğini 'tr-TR' yaparak motorun Türkçe konuşmaları tanımasını sağlıyoruz. interimResults değerini false yaparak, motorun sadece cümle bittiğinde sonuç döndürmesini sağlıyoruz; bu, komut algılama için daha temiz bir veri akışı sağlar.

Sesli Komutları Dinleme ve İşleme

Motoru başlattıktan sonra, kullanıcının ne söylediğini yakalamak için olay dinleyicilerini (event listeners) bağlamamız gerekir. onresult olayı, ses metne dönüştürüldüğünde tetiklenir.

recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript.toLowerCase();
    console.log("Algılanan komut: " + transcript);
    
    if (transcript.includes("arka planı değiştir")) {
        document.body.style.backgroundColor = "lightblue";
    }
};

// Dinlemeyi başlatma fonksiyonu
function baslat() {
    recognition.start();
}

Bu kod bloğunda, transcript değişkeni ile kullanıcının söylediği ifadeyi metin formatında alıyoruz. toLowerCase() metodu ile komutu küçük harfe çevirerek eşleştirme hatalarını minimize ediyoruz.

Hata Yönetimi ve Kullanıcı Deneyimi

Sesli komutlar her zaman kusursuz çalışmaz. Arka plan gürültüsü veya mikrofonun kapalı olması gibi durumları yönetmek için onerror olayını kullanmalıyız.

recognition.onerror = (event) => {
    console.error("Ses tanıma hatası: " + event.error);
    if (event.error === 'not-allowed') {
        alert("Lütfen mikrofon erişimine izin verin.");
    }
};

recognition.onend = () => {
    console.log("Dinleme durduruldu. Tekrar başlatmak için butona tıklayın.");
};

onend olayı, motorun dinlemeyi bıraktığı anı yakalar. Kullanıcının sürekli komut verebilmesi için bu olay tetiklendiğinde bir "Tekrar Dinle" butonu göstermek veya otomatik olarak tekrar başlatmak (sürekli dinleme modu) iyi bir pratik olabilir.

Sesli Komut Algılama Yöntemlerinin Karşılaştırılması

Web tabanlı ses işleme yöntemlerini aşağıda karşılaştırmalı olarak inceleyebilirsiniz:

Gelişmiş Komut Yapısı ve Güvenlik

Basit bir if bloğu yerine, komutları bir nesne yapısında tutmak kodun sürdürülebilirliğini artırır. Ayrıca, kullanıcıdan gelen girdiyi doğrudan DOM'a yazarken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız.

const komutlar = {
    "kırmızı yap": () => document.body.style.backgroundColor = "red",
    "mavi yap": () => document.body.style.backgroundColor = "blue",
    "sıfırla": () => document.body.style.backgroundColor = "white"
};

function komutuIsle(metin) {
    // XSS Koruması: Metni doğrudan HTML olarak eklemeyin
    const temizMetin = metin.replace(//g, ">");
    
    for (let komut in komutlar) {
        if (temizMetin.includes(komut)) {
            komutlar[komut]();
        }
    }
}

Burada temizMetin değişkeni ile gelen veriyi temizliyoruz. Kullanıcı girdisini doğrudan innerHTML içine yerleştirmek yerine, textContent kullanmak her zaman daha güvenlidir.

Sorumluluk Reddi: Bu rehberde sağlanan kod örnekleri eğitim amaçlıdır. Sesli komut sistemlerini kritik güvenlik işlemlerinde (örneğin kullanıcı girişi veya yetkilendirme) tek başına kullanmayınız. Ses verisi işleme süreçlerinde KVKK ve GDPR uyumluluğunu göz önünde bulundurunuz.

Sıkça Sorulan Sorular

Web Speech API tüm tarayıcılarda çalışır mı?

Chrome, Edge ve Opera'da tam desteklenir. Safari'de sınırlı destek varken, Firefox'ta henüz standart olarak desteklenmemektedir.

Sesli komutları sürekli dinleme modunda nasıl tutarım?

recognition.continuous = true; özelliğini aktif ederek motorun sürekli dinlemesini sağlayabilirsiniz. Ancak bu, pil tüketimini artırabilir ve kullanıcı gizliliği açısından dikkatli yönetilmelidir.

İnternet bağlantısı zorunlu mu?

Evet, Web Speech API çoğu tarayıcıda ses verisini sunucuya gönderip metne çeviren bulut tabanlı bir motor kullandığı için aktif internet bağlantısı gerektirir.

Kendi özel komutlarımı nasıl eklerim?

Kod içindeki komutlar nesnesine yeni anahtar-değer çiftleri ekleyerek istediğiniz fonksiyonu tetikleyebilirsiniz.

Arka plan gürültüsünü nasıl azaltırım?

Web Speech API'nin kendi gürültü engelleme özelliği yoktur. Ancak mikrofonu getUserMedia ile alırken noiseSuppression: true parametresini kullanarak tarayıcıdan gürültü engelleme isteyebilirsiniz.

Uygulamanıza Sesli Geri Bildirim Kazandırma: SpeechSynthesis API Entegrasyonu

Kullanıcı sesli bir komut verdiğinde sistemin bunu anlaması kadar, kullanıcıya bir onay mekanizması sunması da önemlidir. Web Speech API'nin bir parçası olan SpeechSynthesis arayüzü, tarayıcının metinleri seslendirmesini sağlar. Bu, uygulamanızın "konuşan bir arayüz" haline gelmesine olanak tanır.

Aşağıdaki örnekte, algılanan komutun başarıyla işlendiğini kullanıcıya sesli olarak bildiren bir fonksiyon yapısını inceleyelim:

function sesliYanitVer(metin) {
  const msg = new SpeechSynthesisUtterance();
  msg.text = metin;
  msg.lang = 'tr-TR';
  msg.rate = 1; // Konuşma hızı
  window.speechSynthesis.speak(msg);
}

// Kullanımı:
// recognition.onresult = (event) => {
//   const komut = event.results[0][0].transcript;
//   sesliYanitVer("Anlaşıldı, " + komut + " komutu işleniyor.");
// };

Performans ve Kaynak Yönetimi İçin İleri İpuçları

Sesli komut algılama sistemleri, özellikle sürekli dinleme modunda çalıştırıldığında tarayıcı kaynaklarını yoğun tüketebilir. Uygulamanızın performansını optimize etmek için şu stratejileri izlemelisiniz:

• Dinamik Başlatma/Durdurma: Kullanıcı uygulamayı kullanmadığı anlarda recognition.stop() metodunu çağırarak mikrofon erişimini ve CPU kullanımını serbest bırakın.
• Debounce Mekanizması: Kullanıcı arka arkaya komut verdiğinde sistemin çakışmaması için basit bir zamanlayıcı (timer) kullanarak komut işleme süreçlerini sıraya alın.
• Düşük Bant Genişliği: Web Speech API, ses verisini işlemek için sunucuya gönderir. Bu nedenle zayıf internet bağlantılarında gecikme (latency) yaşanabilir. Komutlarınızı kısa ve net tutarak bu gecikmeyi minimize edin.

Hata Ayıklama (Debugging) Stratejileri

Ses tanıma süreçlerinde en sık karşılaşılan sorunlar genellikle izinler veya tarayıcı uyumluluğu ile ilgilidir. Hata ayıklama sürecini hızlandırmak için şu tabloyu referans alabilirsiniz:

Geliştirme aşamasında tarayıcı konsolunu (F12) açık tutarak recognition.onerror olayını izlemek, sistemin hangi aşamada tıkandığını anlamanız için en hızlı yoldur. Ayrıca, uygulamanızın canlı ortama (deployment) alınması durumunda mutlaka HTTPS protokolü kullanmanız gerektiğini unutmayın; çünkü Web Speech API, güvenlik politikaları gereği güvensiz (HTTP) bağlantılarda çalıştırılamaz.

Sonuç

Javascript ile tarayıcı tabanlı sesli komut algılayıcı yapmak, Web Speech API sayesinde oldukça erişilebilir bir süreçtir. Bu rehberde temel bir yapıyı kurmayı, komutları işlemeyi ve güvenlik önlemlerini almayı öğrendiniz. Bir sonraki adım olarak, bu sistemi SpeechSynthesis API ile birleştirerek tarayıcınızın size sesli geri bildirim vermesini sağlayabilir, yani uygulamanıza "konuşma" yeteneği kazandırabilirsiniz.