Javascript İle Tarayıcı Tabanlı Bir Ses Kayıt Arayüzü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Ses kaydı yapabilmek için modern bir tarayıcıya (Chrome, Firefox, Edge veya Safari) ve yerel bir geliştirme ortamına ihtiyacınız vardır. Tarayıcılar, güvenlik politikaları gereği mikrofon erişimini yalnızca güvenli ortamlarda (HTTPS veya localhost) izin verir.

• Tarayıcı Desteği: MediaRecorder API tüm modern tarayıcılarda desteklenmektedir.
• Güvenlik Protokolü: Mikrofon erişimi için sayfanızın https:// üzerinden sunulması veya localhost üzerinde çalışması zorunludur.
• Kod Editörü: VS Code gibi bir editör ve tarayıcı konsolu hata ayıklama için yeterlidir.

Adım 1: Kullanıcıdan Mikrofon İzni Alma

Ses kaydına başlamadan önce kullanıcının mikrofonuna erişim izni almamız gerekir. Bunun için navigator.mediaDevices.getUserMedia() metodunu kullanırız. Bu metot, bir Promise (asenkron işlem sonucu) döndürür ve başarılı olursa bir ses akışı sağlar.

async function mikrofonErisimiAl() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    console.log("Mikrofon erişimi sağlandı:", stream);
    return stream;
  } catch (hata) {
    console.error("Mikrofon erişimi reddedildi:", hata);
  }
}

Bu kod bloğu, tarayıcının kullanıcıya "Mikrofon kullanılsın mı?" uyarısını göstermesini sağlar. Kullanıcı onay verirse, ses verilerini içeren bir stream nesnesi elde ederiz.

Adım 2: MediaRecorder API ile Ses Kaydı Başlatma

Mikrofon erişimini aldıktan sonra, bu akışı MediaRecorder sınıfına aktararak kaydı başlatabiliriz. MediaRecorder, ham ses verisini belirli bir formatta (genellikle WebM veya Ogg) sıkıştırarak kaydetmemizi sağlar.

let mediaRecorder;
let sesParcalari = [];

function kaydiBaslat(stream) {
  mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
      sesParcalari.push(event.data);
    }
  };

  mediaRecorder.start();
  console.log("Kayıt başladı...");
}

Burada ondataavailable olayı, ses verisi kaydedildikçe tetiklenir ve bu parçaları sesParcalari dizisinde biriktiririz. Kayıt durdurulana kadar bu işlem devam eder.

Adım 3: Kaydı Durdurma ve Blob Oluşturma

Kullanıcı kaydı bitirdiğinde, biriktirdiğimiz tüm parçaları birleştirerek bir Blob (Binary Large Object) nesnesine dönüştürmemiz gerekir. Bu nesne, artık tarayıcıda bir dosya gibi işlenebilir.

function kaydiDurdur() {
  mediaRecorder.stop();
  mediaRecorder.onstop = () => {
    const sesBlob = new Blob(sesParcalari, { type: 'audio/webm' });
    const sesUrl = URL.createObjectURL(sesBlob);
    console.log("Kayıt oluşturuldu:", sesUrl);
    sesParcalari = []; // Bir sonraki kayıt için temizle
  };
}

URL.createObjectURL metodu, oluşturduğumuz blob için tarayıcı belleğinde geçici bir URL adresi üretir. Bu URL'yi bir audio etiketinin src özelliğine atayarak dinleyebiliriz.

Adım 4: Kaydedilen Sesi İndirilebilir Dosya Yapma

Kullanıcının kaydettiği sesi bilgisayarına indirmesini sağlamak için gizli bir a etiketi oluşturup download niteliğini kullanırız. Bu, modern web arayüzlerinde dosya indirme işlemleri için standart bir yöntemdir.

function sesiIndir(url) {
  const link = document.createElement('a');
  link.href = url;
  link.download = 'kayit.webm';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

Bu işlem, tarayıcının indirme yöneticisini tetikleyerek kullanıcının dosyayı kaydetmesini sağlar. download niteliği, dosyanın tarayıcıda açılmak yerine doğrudan indirilmesini zorunlu kılar.

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

Kritik Güvenlik ve Performans Uyarıları

Güvenlik Uyarısı: Mikrofon verisi hassas bir kişisel veridir. Kullanıcıdan izin alırken şeffaf olun ve bu veriyi sunucuya gönderiyorsanız mutlaka şifreli (HTTPS) bağlantı kullanın. Ayrıca, kullanıcı kaydı durdurduğunda mikrofon akışını (stream) stream.getTracks().forEach(track => track.stop()) komutuyla sonlandırmayı unutmayın; aksi takdirde tarayıcıda mikrofon ışığı yanmaya devam eder.

Sıkça Sorulan Sorular

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

Chrome, Firefox, Edge ve Opera gibi modern tarayıcıların güncel sürümlerinde tam desteklenmektedir. Safari'de ise son sürümlerde destek gelmiş olsa da, bazen format uyumluluğu (codec) kontrolü gerekebilir.

Neden kayıtlarım bazen boş görünüyor?

Genellikle mediaRecorder.stop() komutundan hemen önce verilerin işlenmesi için yeterli zaman tanınmamasından kaynaklanır. onstop olay dinleyicisini doğru kullandığınızdan emin olun.

Kayıt formatını değiştirebilir miyim?

Evet, new MediaRecorder(stream, { mimeType: 'audio/mp4' }) şeklinde parametre vererek desteklenen formatları deneyebilirsiniz. Ancak her tarayıcı her formatı desteklemez.

Sunucuya ses dosyası nasıl gönderilir?

Oluşturduğunuz Blob nesnesini bir FormData içerisine ekleyerek fetch veya XMLHttpRequest ile bir POST isteği üzerinden sunucunuza gönderebilirsiniz.

Mobil cihazlarda çalışır mı?

Evet, mobil tarayıcılarda da mikrofon erişimi mevcuttur. Ancak mobil cihazlarda mikrofonu açtığınızda tarayıcı, kullanıcının gizlilik ayarlarını daha sıkı denetleyebilir.

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

Kullanıcı ses kaydı yaparken, arayüzünüzün canlı bir tepki vermesi kullanıcı deneyimini (UX) ciddi oranda artırır. AnalyserNode arayüzünü kullanarak ses verilerini gerçek zamanlı olarak analiz edebilir ve bir canvas üzerinde dalga formlarını çizebilirsiniz.

Canlı Dalga Formu Çizimi

Aşağıdaki örnek, mikrofon akışını bir AnalyserNode üzerinden geçirerek canvas üzerinde basit bir görselleştirme sağlar:

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);
    // Burada canvas context'i ile çizim işlemlerini gerçekleştirebilirsiniz
    // ctx.lineTo(x, y) kullanarak dalgaları render edin
}
draw();

Kayıt Sürecinde Hata Ayıklama ve İzleme

Ses kayıt projelerinde en sık karşılaşılan sorunlar, tarayıcı izinlerinin reddedilmesi veya donanım erişim hatalarıdır. Uygulamanızın daha kararlı çalışması için MediaRecorder durumlarını dikkatle izlemelisiniz.

Yaygın Hata Kodları ve Çözümleri

Ayrıca, mediaRecorder.onerror olayını dinleyerek beklenmedik donanım kopmalarını yakalayabilirsiniz:

mediaRecorder.onerror = (event) => {
    console.error("Kayıt hatası oluştu:", event.error.name);
    if (event.error.name === 'SecurityError') {
        alert("Güvenlik kısıtlaması nedeniyle kayıt yapılamıyor.");
    }
};

Üretim Ortamı (Deployment) İçin İleri İpuçları

Uygulamanızı canlıya alırken dikkat etmeniz gereken en kritik nokta HTTPS zorunluluğudur. Modern tarayıcılar, güvenlik protokolleri gereği getUserMedia API'sine yalnızca güvenli (HTTPS) bağlantılar üzerinden veya localhost üzerinde izin verir.

• SSL Sertifikası: Uygulamanızın mutlaka geçerli bir SSL sertifikasına sahip olduğundan emin olun.
• İzin Politikaları (Permissions Policy): Eğer uygulamanız bir iframe içerisinde çalışacaksa, allow="microphone" özelliğini eklemeyi unutmayın.
• Bellek Yönetimi: Çok uzun süreli kayıtlarda Blob nesneleri RAM'i tüketebilir. Eğer kayıt süresi 10 dakikayı aşacaksa, verileri parça parça (chunk) sunucuya iletmeyi veya IndexedDB üzerinde saklamayı düşünün.

Sonuç

JavaScript ile tarayıcı tabanlı bir ses kayıt arayüzü oluşturmak, modern tarayıcıların sunduğu API'ler sayesinde oldukça erişilebilir bir süreçtir. Bu makalede mikrofon izni almayı, sesi kaydetmeyi, durdurmayı ve dosyayı indirmeyi öğrendiniz. Bir sonraki adım olarak, Web Audio API kullanarak ses görselleştirme (visualizer) ekleyebilir veya kaydedilen sesin dalga formlarını (waveform) çizebilirsiniz. Başarılı bir geliştirme süreci dilerim.