🔧 HLS Audio Race Condition Fix

🔍 Sorun Neydi?

Kullanıcılar şarkı değiştirirken bazen konsolda hata mesajları görüyordu: HLS audio element not found

Bu hata görünürde bir sorun yaratmıyordu ama sistemde bir şeylerin yolunda gitmediğini gösteriyordu. Özellikle hızlı şarkı değişimlerinde (skip) daha sık ortaya çıkıyordu.

❓ Neden Oluyordu?

Müzik oynatıcı, şarkılar arası geçişi hızlandırmak için iki ayrı ses oynatıcı elementi kullanıyor. Bir şarkı çalarken diğeri arka planda hazırlanıyor (preload). Bu sayede şarkı değişimi anında oluyor.

Sorun şuydu: Kod, kullanılmayan oynatıcıyı "temizlerken" onu bellekten tamamen siliyordu. Ama hemen ardından başka bir kod parçası aynı oynatıcıyı kullanmaya çalışıyordu. Bu iki işlem aynı anda gerçekleşince "yarış durumu" (race condition) oluşuyordu.

✅ Nasıl Çözüldü?

Audio Pool Pattern adı verilen bir tasarım deseni uygulandı.

Artık iki ses oynatıcı elementi sürekli hazır durumda tutuluyor. Kullanılmadıklarında tamamen silinmiyorlar, sadece içleri temizlenip boşaltılıyor. Böylece her an kullanıma hazırlar ve "bulunamadı" hatası ortadan kalkıyor.

🎯 Sonuç

• Konsol hataları ortadan kalktı
• Şarkı değişimleri daha stabil hale geldi
• Bellek kullanımı aynı kaldı (sadece yöntem değişti)
• Hızlı skip işlemlerinde sorun çıkmıyor

Race Condition Analizi

// Satır 4544: "otherAudio"yu temizle
const currentActiveId = this.activeHlsAudioId || 'hlsAudio';
const otherAudioId = currentActiveId === 'hlsAudio' ? 'hlsAudioNext' : 'hlsAudio';
const otherAudio = document.getElementById(otherAudioId);
if (otherAudio && otherAudio.paused) {
    safeAudioCleanup(otherAudio, true); // ← DOM'dan SİLİYOR!
}

// Satır 4558: Hemen ardından SABİT ID ile arıyor
const audio = document.getElementById('hlsAudio'); // ← Az önce silinmiş olabilir!

if (!audio) {
    console.error('HLS audio element not found'); // ← HATA!
}

Önerilen Çözümler

Uygulama Detayları

function safeAudioCleanup(audio, removeFromDom = false) {
    if (!audio) return;
    try {
        // Event handler'ları temizle
        audio.onerror = null;
        audio.onended = null;
        // ... (diğer handler'lar)
        audio.pause();
        audio.removeAttribute('src');
        audio.load(); // MediaSource buffer'ı serbest bırak

        // Pool elementlerini (hlsAudio/hlsAudioNext) DOM'dan ASLA silme!
        const isPoolElement = audio.id === 'hlsAudio' || audio.id === 'hlsAudioNext';

        if (removeFromDom && audio.parentNode && !isPoolElement) {
            // Sadece geçici elementleri sil (spotAudio gibi)
            audio.parentNode.removeChild(audio);
            console.log('🧹 Geçici audio element DOM\'dan kaldırıldı:', audio.id);
        } else if (isPoolElement) {
            console.log('🧹 Pool audio element temizlendi (DOM\'da kalıyor):', audio.id);
        }
    } catch (e) {
        console.warn('safeAudioCleanup error:', e);
    }
}

const audio = document.getElementById('hlsAudio'); // ← SABİT ID!

// Aktif element ID'sini kullan (dinamik)
const currentActiveId = this.activeHlsAudioId || 'hlsAudio';
const audio = document.getElementById(currentActiveId); // ← DİNAMİK ID!

Değiştirilen Dosyalar

Git Commit Geçmişi

Beklenen Sonuçlar:

• Konsol hatası HLS audio element not found artık görünmeyecek
• Hızlı şarkı değişimlerinde (skip) sorun çıkmayacak
• Debug panelde sürekli 2 audio elementi görünecek
• Bellek kullanımı değişmeyecek (elementler zaten vardı)

Test Senaryosu:

1. Siteyi aç, müzik çalmaya başla
2. 5-10 şarkıyı hızlıca skip et (Next butonu)
3. Console'u aç, hata mesajı kontrolü yap
4. Debug paneli aç (?debug=1)
5. Audio Elements kısmında 2 element olduğunu doğrula
6. Birkaç saat kullanımda bellek sızıntısı olmadığını kontrol et