Javascript İle Tarayıcı Tabanlı Bir Sesli Not Kaydedici Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için herhangi bir kütüphaneye veya karmaşık bir derleme aracına ihtiyacınız yoktur. Saf (Vanilla) JavaScript, modern tarayıcıların sunduğu yetenekleri kullanmak için yeterlidir. Ancak, geliştirme sürecinde aşağıdaki gereksinimleri göz önünde bulundurmalısınız:

• Modern Bir Tarayıcı: Chrome, Firefox, Edge veya Safari'nin en güncel sürümleri.
• HTTPS Protokolü: Tarayıcılar, güvenlik politikaları gereği (Secure Context) mikrofon erişimine sadece HTTPS üzerinden veya localhost geliştirme ortamlarında izin verir.
• Temel HTML/CSS Bilgisi: Kayıt butonlarını ve görsel geri bildirimleri yönetmek için gereklidir.

Adım Adım Ses Kaydı İçin HTML Arayüzü Oluşturma

Kullanıcının etkileşime gireceği temel arayüzü oluşturarak başlıyoruz. Kayıt başlatma, durdurma ve kaydedilen sesi oynatma kontrollerine ihtiyacımız var.

    Kaydı Başlat
    Kaydı Durdur
    
    Kaydı İndir

Burada baslatBtn ve durdurBtn butonları, kayıt sürecini kontrol ederken, audio etiketi kaydedilen sesin önizlenmesini sağlar.

JavaScript ile Mikrofon İzinlerini Yönetme

Kullanıcının mikrofonuna erişmek için navigator.mediaDevices.getUserMedia metodunu kullanırız. Bu işlem, tarayıcının kullanıcıdan izin istemesini tetikleyen asenkron bir süreçtir.

async function mikrofonErisimiAl() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        return stream;
    } catch (hata) {
        console.error("Mikrofon erişimi reddedildi:", hata);
        alert("Ses kaydı yapabilmek için mikrofon izni vermelisiniz.");
    }
}

Bu fonksiyon, başarılı olduğunda bir MediaStream nesnesi döndürür. Hata durumunda (kullanıcı reddederse) kullanıcıya bilgilendirme yapmak, iyi bir kullanıcı deneyimi için kritiktir.

MediaRecorder API ile Ses Verisini İşleme

Ses verisini kaydetmek için MediaRecorder sınıfını kullanıyoruz. Bu sınıf, mikrofon akışını alır ve belirli aralıklarla veri parçaları (chunks) halinde biriktirir.

let medyaKaydedici;
let sesParcalari = [];

function kaydiBaslat(stream) {
    sesParcalari = [];
    medyaKaydedici = new MediaRecorder(stream);
    
    medyaKaydedici.ondataavailable = (event) => {
        if (event.data.size > 0) {
            sesParcalari.push(event.data);
        }
    };
    
    medyaKaydedici.start();
}

ondataavailable olay dinleyicisi, kaydedilen ses verisi kullanılabilir olduğunda tetiklenir ve bu parçaları bir dizi içinde saklarız.

Kaydı Durdurma ve Blob Oluşturma

Kayıt bittiğinde, biriktirdiğimiz veri parçalarını birleştirerek bir Blob (Binary Large Object) nesnesine dönüştürmemiz gerekir. Bu nesne, tarayıcıda bir ses dosyası gibi davranır.

function kaydiDurdur() {
    medyaKaydedici.stop();
    medyaKaydedici.onstop = () => {
        const sesBlob = new Blob(sesParcalari, { type: 'audio/webm' });
        const sesURL = URL.createObjectURL(sesBlob);
        
        const oynatici = document.getElementById('sesOynatici');
        oynatici.src = sesURL;
        
        const indirBtn = document.getElementById('indirBtn');
        indirBtn.href = sesURL;
        indirBtn.download = "sesli-not.webm";
        indirBtn.style.display = "block";
    };
}

URL.createObjectURL metodu, bellekteki ses verisine tarayıcı üzerinden erişilebilecek geçici bir URL atar.

Ses Kayıt Yöntemlerinin Karşılaştırılması

Güvenlik Uyarısı: Kullanıcıdan alınan ses verileri doğrudan sunucuya gönderilecekse, mutlaka dosya boyutu ve MIME tipi kontrolü yapılmalıdır. İstemci tarafında yapılan doğrulamalar tek başına yeterli değildir; sunucuda da güvenlik filtreleri uygulanmalıdır.

Sıkça Sorulan Sorular

Tarayıcıda kayıt yaparken neden hata alıyorum?

Genellikle bu durum, sayfanın HTTPS üzerinden sunulmamasından veya kullanıcının mikrofon iznini tarayıcı ayarlarından engellemiş olmasından kaynaklanır.

Kaydedilen dosya formatını değiştirebilir miyim?

Evet, MediaRecorder oluştururken mimeType parametresi ile 'audio/ogg' veya 'audio/mp4' gibi formatları destekleyen tarayıcılarda farklı formatlar kullanabilirsiniz.

Bu uygulama mobil tarayıcılarda çalışır mı?

Evet, modern mobil tarayıcılar (Chrome Android, Safari iOS) MediaRecorder API'sini desteklemektedir.

Ses verisini sunucuya nasıl gönderirim?

Oluşturulan Blob nesnesini FormData içerisine ekleyerek fetch API ile bir POST isteği üzerinden sunucuya iletebilirsiniz.

Kayıt süresi sınırı var mı?

Tarayıcı tarafında teknik bir sınır yoktur ancak tarayıcının bellek yönetimi (RAM) çok uzun süreli kayıtlarda performans sorunlarına yol açabilir.

Web Audio API ile Ses Görselleştirme (Visualization)

Kullanıcıların ses kaydı yaparken ses seviyelerini canlı olarak görmeleri, uygulamanın kullanıcı deneyimini (UX) önemli ölçüde artırır. Web Audio API, AnalyserNode arayüzü sayesinde ses verisini gerçek zamanlı olarak analiz etmemize olanak tanır. Aşağıdaki kod bloğu, bir canvas elementi üzerinde ses dalgalarını nasıl çizebileceğinizi gösterir.

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function draw() {
    requestAnimationFrame(draw);
    analyser.getByteTimeDomainData(dataArray);
    
    // Canvas çizim mantığı burada yer alır
    // ctx.clearRect(0, 0, canvas.width, canvas.height);
    // ... çizim işlemleri
}
draw();

Uygulama Performansını Optimize Etme

Ses kayıt uygulamaları, özellikle uzun süreli işlemlerde tarayıcı belleğini yoğun bir şekilde kullanabilir. Performansı korumak ve uygulamanın çökmesini engellemek için şu stratejileri izlemelisiniz:

• Blob Parçalama (Chunking): Kaydı tek bir büyük Blob nesnesi yerine, ondataavailable olayında gelen küçük parçalar halinde işleyin.
• Bellek Yönetimi: Kayıt bittikten sonra artık ihtiyacınız olmayan MediaStreamTrack nesnelerini track.stop() komutu ile serbest bırakın.
• Web Workers Kullanımı: Ses verisinin sunucuya gönderilmesi veya işlenmesi gibi ağır işlemleri ana iş parçacığından (main thread) ayırarak arayüzün donmasını engelleyin.

Hata Ayıklama (Debugging) İpuçları

Geliştirme aşamasında karşılaşılan en yaygın sorunlar genellikle izinler ve MIME tipi uyumsuzluklarıdır. Tarayıcı konsolunu kullanarak MediaRecorder.isTypeSupported() metodunu mutlaka kontrol edin.

Profesyonel İpucu: Kullanıcıya kayıt sırasında "sessizlik" uyarısı vermek istiyorsanız, AnalyserNode üzerinden gelen verilerin ortalamasını alarak belirli bir eşik değerin altında kalıp kalmadığını kontrol eden bir mantık kurabilirsiniz.

Deployment ve Güvenlik Önlemleri

Sesli not uygulamanızı canlıya alırken dikkat etmeniz gereken en kritik nokta, tarayıcıların güvenlik politikalarıdır. Mikrofon erişimi yalnızca güvenli bağlantılar (HTTPS) üzerinden sağlanabilir. Yerel ağda test yaparken http://localhost kullanabilirsiniz ancak canlı ortamda mutlaka geçerli bir SSL sertifikası yapılandırılmalıdır.

Ayrıca, kullanıcı gizliliğini korumak adına kayıt bittikten sonra ses verisinin sunucuda geçici olarak tutulması ve işlendikten sonra silinmesi (GDPR uyumluluğu için) en iyi uygulama yöntemidir.

Sonuç

JavaScript ile tarayıcı tabanlı bir sesli not kaydedici oluşturmak, günümüz web standartları sayesinde oldukça erişilebilir hale gelmiştir. Bu rehberde öğrendiğiniz temel yapıları kullanarak, kendi sesli not uygulamanızı geliştirebilir, üzerine ses görselleştirme (audio visualization) veya bulut depolama entegrasyonları ekleyebilirsiniz. Bir sonraki adım olarak, Web Audio API kullanarak kaydedilen sese gürültü azaltma filtreleri uygulamayı deneyebilirsiniz.