📊 Analiz 🎙️ Spot Player

Spot Preload Mekanizması & MP3 vs HLS Karşılaştırması

6 Ocak 2026 - Muzibu Player Analizi

📋 İçindekiler

1️⃣ Spot Preload Mekanizması

• Nasıl çalışıyor?
• Ne zaman tetikleniyor?
• Teknik detaylar

2️⃣ MP3 vs HLS Karşılaştırması

• Avantaj & Dezavantajlar
• Performans karşılaştırması
• Öneri (Spot için en iyi seçim)

1️⃣ Spot Preload Mekanizması

📝 Basit Anlatım (Herkes İçin)

Evet, spotlar preload ediliyor! ✅

Sistem şöyle çalışıyor: Müzik çalarken, şarkının %70'ine geldiğinde sistem "bir sonraki spot" dosyasını arka planda indirmeye başlıyor. Böylece şarkı bitip spot çalma zamanı geldiğinde, spot dosyası zaten hazır olduğu için kesintisiz (gapless) bir geçiş oluyor.

Örnek: 3 dakikalık şarkı çalıyorsun → 2. dakikada (%70) spot dosyası arka planda indiriliyor → Şarkı bitiyor → Spot anında çalmaya başlıyor (bekleme yok!).

💡 Neden Önemli?

✓ Kullanıcı kesintisiz dinleme deneyimi yaşar
✓ Spot çalarken "yükleniyor" beklemesi olmaz
✓ Müzik → Spot geçişi akıcı olur

🔧 Teknik Detaylar (Geliştiriciler İçin)

📁 İlgili Dosyalar:

public/themes/muzibu/js/player/features/spot-player.js
→ preloadSpot() fonksiyonu (satır 274-322)
→ shouldPreloadSpot() kontrolü

⚙️ Nasıl Çalışıyor:

1.
Tetikleme: player-core.js içinde şarkının %70'inde preloadSpot() çağrılır
2.
API Çağrısı: GET /api/spot/next
- • Kullanıcının corporate hesabını kontrol eder
- • Bir sonraki spotu seçer (rotation algoritması)
- • Spot bilgilerini döndürür (id, title, duration, audio_url)

Audio Element Oluştur:

const audio = new Audio();
audio.preload = 'auto';
audio.src = data.spot.audio_url;

4.
Bekleme: oncanplaythrough event'i ile dosya yüklenene kadar bekler (max 3 saniye timeout)
5.
Saklama: state.preloadedAudio değişkeninde tutuluyor
6.
Kullanım: Şarkı bittiğinde preload edilmiş audio element direkt play() ile çalıyor (gapless)

🎯 Backend Endpoint:

Route: /api/spot/next
Controller: CorporateFrontController::apiNextSpot()
Model: CorporateSpot::getAudioUrl()

Response Format:

{
  "success": true,
  "spot": {
    "id": 123,
    "title": "İxtif Reklam",
    "duration": 30,
    "audio_url": "https://muzibu.com/storage/tenant1001/2182/ixtif.mp3"
  }
}

2️⃣ MP3 vs HLS Karşılaştırması

📝 Basit Anlatım (Herkes İçin)

MP3: Klasik ses dosyası formatı. Bir dosya, tek parça, direkt indirip çal. Basit ve hızlı.

HLS: Profesyonel streaming formatı. Ses dosyasını küçük parçalara (segment) böler, farklı kalitelerde sunar. İnternet hızına göre kalite değiştirir.

🎵 MP3 Avantajları

✓ Çok hızlı başlatma (anında çalar)
✓ Basit yapı (teknik sorun olmaz)
✓ Küçük dosyalar için ideal
✓ Preload çok kolay

🎬 HLS Avantajları

✓ İnternet hızına göre kalite ayarlar
✓ Büyük dosyalar için profesyonel
✓ Yavaş internetlerde kesintisiz çalar
✓ Şarkılar için ideal (3-5 dakika)

🎯 Spotlar İçin Öneri:

✅ MP3 Kullanın!

Neden? Spotlar kısa (15-60 saniye), HLS'in sunduğu "adaptif kalite" özelliği bu kadar kısa sürede gereksiz. MP3 daha hızlı başlar, daha basittir ve küçük dosyalar için idealdir.

🔧 Teknik Detaylar (Geliştiriciler İçin)

📊 Performans Karşılaştırması (30 saniyelik spot)

Metrik	MP3	HLS	Kazanan
Başlatma Süresi	~50ms	~200-500ms	MP3 ✓
Dosya Sayısı	1 dosya	6-10 segment + 1 playlist	MP3 ✓
HTTP İstek Sayısı	1 request	7-11 request	MP3 ✓
Preload Kolaylığı	Çok kolay	Karmaşık (HLS.js gerekli)	MP3 ✓
Adaptif Bitrate	Yok	Var ✓	HLS ✓
Network Değişimlerine Uyum	Yok	Var ✓	HLS ✓
Kısa Dosyalar İçin (<60s)	Mükemmel ✓	Overhead var	MP3 ✓
Uzun Dosyalar İçin (>3dk)	Sorun olabilir	İdeal ✓	HLS ✓

💻 Kod Karşılaştırması

MP3 - Basit & Hızlı

// Preload (Şu anki sistem)
const audio = new Audio();
audio.preload = 'auto';
audio.src = 'spot.mp3';

await new Promise((resolve) => {
    audio.oncanplaythrough = resolve;
    setTimeout(resolve, 3000);
});

// Çal
audio.play();

// ✅ 3-5 satır kod
// ✅ Anında başlatma
// ✅ Ekstra kütüphane yok

HLS - Karmaşık

// Preload
const audio = new Audio();
const hls = new Hls();

hls.loadSource('spot.m3u8');
hls.attachMedia(audio);

await new Promise((resolve) => {
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
        audio.oncanplaythrough = resolve;
    });
});

// Çal
audio.play();

// ⚠️ 10+ satır kod
// ⚠️ HLS.js kütüphanesi gerekli (100KB+)
// ⚠️ Başlatma gecikmesi var

📁 Dosya Yapısı (30 saniyelik spot)

MP3 - Tek Dosya

storage/tenant1001/2182/
└── ixtif-spot.mp3       (480 KB)

✅ 1 dosya
✅ 1 HTTP request
✅ Hızlı upload/backup

HLS - Çoklu Dosya

storage/tenant1001/2182/
├── ixtif-spot.m3u8      (playlist)
├── segment-0.ts         (60 KB)
├── segment-1.ts         (60 KB)
├── segment-2.ts         (60 KB)
├── segment-3.ts         (60 KB)
├── segment-4.ts         (60 KB)
├── segment-5.ts         (60 KB)
└── segment-6.ts         (60 KB)

⚠️ 8 dosya
⚠️ 8 HTTP request
⚠️ Yavaş upload/backup

🌐 Network Overhead (30 saniyelik spot)

MP3: 1 request × 480 KB = 480 KB

HLS: 8 request × ~60 KB = ~500 KB + segment overhead

✓ MP3 daha az request, daha az overhead, daha hızlı başlatma!

🎯 Sonuç & Öneri

✅ Şu Anki Durum (MP3)

✓ Spotlar MP3 formatında saklanıyor
✓ Preload mekanizması mükemmel çalışıyor
✓ Gapless (kesintisiz) geçiş sağlanıyor
✓ Hızlı başlatma ve basit yapı

🎯 Öneri

✅ Spotlar için MP3 formatını kullanmaya devam edin!

1. Kısa süreli içerik: Spotlar 15-60 saniye arası kısa dosyalar. HLS'in adaptif bitrate özelliği bu kadar kısa sürede etkisiz.

2. Hızlı başlatma: MP3 anında çalar, HLS 200-500ms gecikmeli. Gapless geçiş için MP3 ideal.

3. Basit yapı: Ekstra kütüphane (HLS.js) gerekmez, bakım maliyeti düşük.

4. Mevcut sistem mükemmel: Preload zaten çalışıyor, değişiklik gereksiz.

💡 HLS Ne Zaman Kullanılmalı?

• Şarkılar için: 3-5 dakikalık içerikler HLS ile daha iyi çalışır (adaptif kalite, network değişimlerine uyum)
• Canlı yayınlar: Radyo, podcast gibi canlı streaming için HLS şart
• Uzun içerikler: >10 dakika içerikler için HLS daha verimli