Sayfa 136 / 161

Player Özellikleri

Player Mimarisi

Müzik çaların teknik altyapısı ve modüler yapısı

Biz Ne Yaptık?

Sizin için 13 ayrı modülden oluşan, profesyonel düzeyde bir müzik çalar geliştirdik. Her modül bağımsız çalışır ve birbirleriyle mükemmel uyum içinde iletişim kurar.

Eski Yöntem

Tek dosyada tüm kod (spagetti kod)
Bir yeri değiştirince başka yer bozulur
Test etmesi zor, hata bulmak imkansız

Modern Mimari

IIFE Pattern: Her modül izole
Event sistemi: Modüller arası iletişim
HLS.js: Endüstri standardı streaming

13 Player Modülü

Core

Ana çalma motoru

Controls

Play/Pause/Seek

Queue

Sıra yönetimi

Favorites

Beğeni sistemi

Volume

Ses kontrolü

Shuffle

Karıştırma modu

Repeat

Tekrar modları

Progress

İlerleme çubuğu

HLS

Streaming motoru

Context Menu

Sağ tık menüsü

Keyboard

Kısayol tuşları

History

Dinleme geçmişi

Analytics

İstatistik toplama

Nasıl Çalışır?

Kullanıcı Şarkıya Tıklar

Albüm, playlist veya arama sonuçlarından bir şarkı seçilir.

Core Modül Devreye Girer

HLS.js kütüphanesi şifreli ses dosyasını çözümlemeye başlar.

Modüller Senkronize Olur

Queue, Controls, Progress modülleri bilgilendirilir ve UI güncellenir.

Müzik Akmaya Başlar

Kullanıcı kesintisiz müzik dinler, tüm kontroller aktif olur.

Bu Sayfanın Anahtar Terimleri

IIFE Pattern

(Immediately Invoked Function Expression)

Kodun hemen çalışan, izole fonksiyonlar halinde yazılması.

Daire kapısı gibi: İçeri sadece izinli kişi girer

HLS.js

(HTTP Live Streaming JavaScript)

Web tarayıcılarında canlı ve kayıtlı video/ses akışı sağlayan kütüphane.

Netflix'in müzik versiyonu gibi

Arkaplanda Neler Çalışıyor?

Kullanıcı bir şarkıya tıkladığında player mimarisinde şu işlemler gerçekleşir:

1. Core Modül Başlatma

PlayerCore IIFE modülü şarkı bilgilerini alır ve HLS.js kütüphanesini başlatır. Audio element oluşturulur ve HLS manifest URL'si yüklenir. Tüm diğer modüller bu çekirdek üzerine kuruludur.

public/themes/muzibu/js/player/core.js - PlayerCore.init(songData)

2. HLS Streaming Başlatma

HLS.js manifest dosyasını (.m3u8) indirir ve parçalara (segments) ayırır. İnternet hızına göre kalite seviyesi otomatik seçilir. Şifreli içerikler için key sunucusundan lisans alınır.

hls.loadSource(manifestUrl); hls.attachMedia(audioElement)

3. Modül Koordinasyonu

13 bağımsız modül (Controls, Queue, Favorites, Volume, Progress vb.) CustomEvent sistemi ile haberleşir. Bir modül "şarkı değişti" eventi fırlatır, diğerleri dinler ve kendini günceller.

document.dispatchEvent(new CustomEvent('player:songChanged', {detail: song}))

4. Queue Yönetimi

Çalma sırası Queue modülünde tutulur. Shuffle aktifse Fisher-Yates algoritması ile karıştırılır. Repeat modu (tek/liste/kapalı) sıradaki şarkı seçimini etkiler.

public/themes/muzibu/js/player/features/queue.js

5. Progress ve Analytics

Progress modülü ilerleme çubuğunu günceller. Analytics modülü dinleme süresini takip eder ve %30 dinleme eşiğinde sunucuya play kaydı gönderir.

if (playedPercent > 30) { fetch('/api/plays', {method: 'POST', body: songId}) }

6. State Persistence

Ses seviyesi, shuffle/repeat durumu localStorage'da saklanır. Sayfa yenilendiğinde bu ayarlar geri yüklenir. Kullanıcı her seferinde aynı ayarlarla devam eder.

localStorage.setItem('player_volume', volume); localStorage.setItem('player_shuffle', true)