React İle Web Uygulamalarında Ses Kaydı Alan Bir Medya Bileşeni Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Ses kaydı alabilmek için öncelikle tarayıcı izinlerine ve modern bir geliştirme ortamına ihtiyacınız vardır. Tarayıcılar, güvenlik gereği mikrofon erişimini yalnızca HTTPS (veya localhost) üzerinden yapmanıza izin verir.

• Node.js v20 veya üzeri bir sürüm.
• React projesi (Vite veya Next.js önerilir).
• Modern bir tarayıcı (Chrome, Firefox veya Edge).
• Temel React Hooks (useState, useRef, useEffect) bilgisi.

Projenizde herhangi bir harici kütüphane kullanmadan, doğrudan tarayıcının yerel MediaRecorder sınıfını kullanacağız. Bu, uygulamanızın boyutunu küçültür ve bağımlılık yönetimini kolaylaştırır.

MediaRecorder API ile Ses Akışını Başlatma

Ses kaydı almanın ilk adımı, kullanıcının mikrofonuna erişim izni istemek ve bu akışı bir MediaStream nesnesi olarak yakalamaktır. Bunun için navigator.mediaDevices.getUserMedia metodunu kullanacağız.

// Mikrofon erişimi için temel fonksiyon
const getAudioStream = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    return stream;
  } catch (err) {
    console.error("Mikrofon erişimi reddedildi veya hata oluştu:", err);
  }
};

Bu fonksiyon, kullanıcıdan mikrofon izni ister. Eğer kullanıcı "İzin Ver" derse, ses verilerini içeren bir akış nesnesi döner. Hata durumunda ise kullanıcıya uygun bir geri bildirim vermeniz önemlidir.

React Bileşeni İçerisinde Ses Kayıt Durum Yönetimi

React bileşenimizde kaydın başlayıp başlamadığını, kayıt süresini ve elde edilen ses verisini tutacak bir yapı kurmalıyız. useRef kullanarak MediaRecorder nesnesini bileşen yaşam döngüsü boyunca saklayacağız.

import { useState, useRef } from 'react';

const AudioRecorder = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [audioURL, setAudioURL] = useState(null);
  const mediaRecorderRef = useRef(null);
  const audioChunksRef = useRef([]);

  // Kayıt işlemleri burada tanımlanacak
};

Burada audioChunksRef kullanımı kritiktir; çünkü kayıt sırasında gelen ses parçalarını bir dizide biriktirmemiz gerekiyor. useState yerine useRef kullanmamızın sebebi, bu dizinin değişmesinin bileşeni yeniden render etmesine gerek olmamasıdır.

Adım Adım Ses Kaydı Başlatma ve Durdurma

Kayıt sürecini yönetmek için startRecording ve stopRecording fonksiyonlarını oluşturmalıyız. MediaRecorder nesnesi, verileri parça parça (chunk) bize iletir.

const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorderRef.current = new MediaRecorder(stream);
  audioChunksRef.current = [];

  mediaRecorderRef.current.ondataavailable = (event) => {
    audioChunksRef.current.push(event.data);
  };

  mediaRecorderRef.current.onstop = () => {
    const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' });
    const url = URL.createObjectURL(audioBlob);
    setAudioURL(url);
  };

  mediaRecorderRef.current.start();
  setIsRecording(true);
};

const stopRecording = () => {
  mediaRecorderRef.current.stop();
  setIsRecording(false);
};

Bu kod bloğunda, ondataavailable olayı her veri parçası geldiğinde tetiklenir. Kayıt durduğunda ise Blob nesnesi oluşturularak bu veri bir URL'ye dönüştürülür ve tarayıcıda çalınabilir hale getirilir.

Medya Bileşenleri Karşılaştırması

Ses kaydı alırken izlenebilecek farklı yaklaşımların avantaj ve dezavantajlarını aşağıda görebilirsiniz.

Güvenlik ve Kullanıcı Deneyimi Uyarıları

Kritik Güvenlik Uyarısı: Kullanıcıdan alınan medya verileri her zaman hassas veri olarak kabul edilmelidir. Ses verilerini sunucuya gönderirken mutlaka TLS/SSL şifrelemesi kullanın. Ayrıca, tarayıcı izinlerinin sadece kullanıcı aksiyonuyla (buton tıklaması gibi) tetiklendiğinden emin olun.

Kullanıcı deneyimi açısından, kayıt sırasında bir "kayıt yapılıyor" göstergesi eklemek ve mikrofon izni verilmediğinde kullanıcıyı bilgilendiren bir hata mesajı kutusu oluşturmak profesyonel bir yaklaşımdır.

Sıkça Sorulan Sorular

Ses kaydı formatını nasıl değiştirebilirim?

new MediaRecorder(stream, { mimeType: 'audio/webm' }) şeklinde tanımlayarak desteklenen mime-type değerlerini kullanabilirsiniz. Tarayıcınızın desteklediği formatları MediaRecorder.isTypeSupported() ile kontrol edebilirsiniz.

Kayıt süresini nasıl sınırlarım?

setTimeout kullanarak belirli bir süre sonra stopRecording fonksiyonunu otomatik olarak tetikleyebilirsiniz.

Sunucuya bu sesi nasıl yüklerim?

Oluşturulan Blob nesnesini FormData içerisine ekleyerek fetch veya axios ile POST isteği atarak sunucuya gönderebilirsiniz.

Mobil cihazlarda çalışır mı?

Evet, modern mobil tarayıcıların çoğu MediaRecorder API'sini destekler ancak mikrofon izinleri mobil işletim sistemlerinde daha katı kurallara tabidir.

Kayıt sırasında ses seviyesini nasıl ölçerim?

Web Audio API kullanarak AnalyserNode ile ses verisini analiz edebilir ve bir görselleştirme (visualizer) oluşturabilirsiniz.

Web Audio API ile Gerçek Zamanlı Ses Görselleştirme

Ses kaydı sırasında kullanıcıya bir geri bildirim sunmak, uygulama deneyimini profesyonel bir seviyeye taşır. AnalyserNode kullanarak ses dalgalarını görselleştirmek, kullanıcının mikrofonunun aktif olduğunu ve sesin algılandığını anlamasını sağlar. Aşağıdaki örnek, requestAnimationFrame kullanarak bir canvas üzerinde basit bir ses dalgası çizmeyi göstermektedir.

const visualize = (stream, canvasRef) => {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioContext.createMediaStreamSource(stream);
  const analyser = audioContext.createAnalyser();
  analyser.fftSize = 2048;
  source.connect(analyser);

  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  const canvas = canvasRef.current;
  const ctx = canvas.getContext('2d');

  const draw = () => {
    requestAnimationFrame(draw);
    analyser.getByteTimeDomainData(dataArray);
    ctx.fillStyle = 'rgb(200, 200, 200)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.beginPath();

    let sliceWidth = canvas.width * 1.0 / bufferLength;
    let x = 0;

    for (let i = 0; i < bufferLength; i++) {
      let v = dataArray[i] / 128.0;
      let y = v * canvas.height / 2;
      if (i === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
      x += sliceWidth;
    }
    ctx.lineTo(canvas.width, canvas.height / 2);
    ctx.stroke();
  };
  draw();
};

Ses Kayıt Uygulamalarında Performans Optimizasyonu

Büyük ses dosyalarıyla çalışırken tarayıcı belleğini (RAM) verimli kullanmak kritik öneme sahiptir. Özellikle uzun süreli kayıtlarda Blob nesnelerini doğrudan bellekte tutmak yerine, belirli aralıklarla veriyi işlemek veya IndexedDB gibi istemci tarafı depolama çözümlerine yönelmek gerekebilir.

Bellek Yönetimi İçin İpuçları

• Blob URL'lerini Temizleyin: URL.createObjectURL() ile oluşturulan referansları, işiniz bittiğinde URL.revokeObjectURL() ile serbest bırakın.
• Chunk Boyutlarını Ayarlayın: mediaRecorder.start(timeslice) metodunda bir timeslice değeri belirleyerek verinin küçük parçalar halinde gelmesini sağlayın. Bu, ana iş parçacığının (main thread) kilitlenmesini önler.
• Web Workers Kullanımı: Ses verisinin işlenmesi veya sunucuya gönderilmek üzere dönüştürülmesi (örneğin WAV formatına çevirme) gibi ağır işlemleri Web Worker içerisinde gerçekleştirerek UI donmalarını engelleyin.

Hata Ayıklama (Debugging) Stratejileri

Kayıt süreçlerinde en sık karşılaşılan hatalar genellikle izin reddi veya desteklenmeyen MIME tipleridir. Hataları yakalamak için aşağıdaki yapıyı kullanabilirsiniz:

mediaRecorder.onerror = (event) => {
  console.error('Kayıt hatası oluştu:', event.error);
  if (event.error.name === 'NotAllowedError') {
    alert('Mikrofon erişimi reddedildi. Lütfen tarayıcı ayarlarını kontrol edin.');
  } else if (event.error.name === 'InvalidStateError') {
    console.warn('Medya durumu geçersiz, kayıt başlatılamadı.');
  }
};

Geliştirme aşamasında tarayıcınızın "Console" sekmesini izlemenin yanı sıra, "Network" sekmesinden blob verilerinin boyutunu ve Application" sekmesinden ise IndexedDB içeriğini inceleyerek verinin doğruluğunu teyit edebilirsiniz.