Muzibu Mobil Uygulama Analizi

Kapsamlı Teknik Doküman & Teknoloji Seçimi

17 Mart 2026
v1.0

Yönetici Özeti

Basit Anlatım

Muzibu, işletmelere (kafeler, restoranlar, ofisler) kesintisiz müzik yayını yapan bir B2B platformdur. Kullanıcılar sabah siteyi açar, müziği başlatır ve gün boyu (10-15 saat) aynı sekmede müzik dinler. Mobil uygulama da aynı deneyimi sunmalı: sabah aç, akşama kadar sorunsuz çalsın.

30.000+
Şarkı
125.000+
Playlist
10-15 saat
Günlük Oturum

Teknik Özet

Backend: Laravel 11, Multi-tenant, Livewire 3
Frontend: Alpine.js, Tailwind CSS, HLS.js
Streaming: HLS Adaptive (32k-Original), MP3 Fallback
API: REST, Sanctum Auth, Rate Limited
Teknoloji Önerisi: Flutter - Native performans, tek codebase, güçlü audio desteği

1. Site Yapısı & Amacı

Muzibu Nedir?

  • B2B SaaS: Bireysel değil, işletmelere yönelik müzik platformu
  • Uzun Oturum: Sabah aç, akşama kadar çalsın (10-15 saat)
  • Zayıf Bağlantı: Kötü internet, eski cihazlar desteklenmeli
  • Corporate Spot: Şarkılar arasına anons/reklam ekleme

Kullanıcı Profili

Özellik Durum Mobil Etkisi
Cihaz Yaşı 5-7 yıllık iPad/Android Düşük RAM optimizasyonu şart
İnternet Yavaş/düzensiz bağlantı Adaptive bitrate kritik
Teknik Bilgi Düşük Tek tıkla çalış UX
Oturum Süresi 10-15 saat Memory leak = felaket

Modül Yapısı

Modules/Muzibu/
├── App/
│   ├── Models/           # 19 model (Song, Album, Artist...)
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Api/      # 13 API controller
│   │   │   ├── Admin/    # 17 admin controller
│   │   │   └── Front/    # 13 frontend controller
│   │   └── Livewire/     # 33 Livewire component
│   ├── Services/         # Business logic
│   └── Repositories/     # Data access
├── routes/
│   ├── api.php           # REST API endpoints
│   ├── web.php           # Web routes
│   └── admin.php         # Admin panel
└── resources/views/      # Blade templates

2. Player Sistemi

Basit Anlatım

Player, şarkıları internet hızına göre otomatik kalite ayarlı (HLS) çalar. Bağlantı kötüleşirse kaliteyi düşürür, tamamen kesilirse MP3'e geçer. Şarkı bittiğinde boşluk olmadan sonrakine geçer (gapless).

Ses Format Zinciri

HLS ABR (Auto) HLS 128k HLS 64k MP3 128k MP3 64k Sonraki Şarkı

HLS timeout: 6 saniye. Başarısız olursa MP3'e düşer.

Player Mimarisi

┌─────────────────────────────────────────────┐
│  ALPINE.JS STORE (Global State)             │
│  - currentSong, queue, queueIndex           │
│  - isPlaying, volume, repeatMode            │
└──────────┬──────────────────────────────────┘
           │
┌──────────▼──────────────────────────────────┐
│  PLAYER CORE (player-core.js - 9419 satır)  │
│  ├─ Queue Management                        │
│  ├─ Playback Control                        │
│  ├─ Preload System                          │
│  ├─ Format Resolution                       │
│  └─ Tracking & Analytics                    │
└──────────┬──────────────────────────────────┘
           │
┌──────────▼──────────────────────────────────┐
│  HLS POOL MANAGER                           │
│  - 3 instance havuzu                        │
│  - Memory leak önleme                       │
│  - acquire() / release()                    │
└──────────┬──────────────────────────────────┘
           │
     ┌─────┴─────┐
     ▼           ▼
┌─────────┐ ┌─────────┐
│ HLS.js  │ │Howler.js│
│ (ABR)   │ │ (MP3)   │
└─────────┘ └─────────┘

Gapless Playback

Şarkı bitişinde boşluk olmadan sonrakine geçiş. Preload sistemi ile önceden yükleme.

Queue Management

Sonsuz kuyruk, shuffle, repeat modları. Emergency fallback sistemi.

Hover Preload

Mouse ile şarkı üzerine gelince ön yükleme başlar (~687ms hızlanma).

Concurrent Guard

500ms throttle + 3s timeout ile race condition önleme.

Mobil Uygulama İçin Gereksinimler

  • HLS adaptive streaming desteği
  • Background playback (uygulama kapalıyken)
  • Lock screen kontrolleri
  • Gapless playback
  • Offline cache (optional)
  • Corporate spot entegrasyonu

3. API Yapısı

Basit Anlatım

Mobil uygulama, mevcut REST API'yi kullanacak. Giriş yapma, şarkı listesi alma, şarkı çalma gibi tüm işlemler için API endpoint'leri hazır. Sanctum token sistemi ile güvenli iletişim.

Kritik Endpoint'ler

Authentication
POST /api/auth/login Giriş yap
POST /api/auth/logout Çıkış yap
GET /api/auth/me Kullanıcı bilgisi
Songs & Streaming
GET /api/muzibu/songs/{id}/stream Stream URL al
GET /api/muzibu/songs/popular Popüler şarkılar
POST /api/muzibu/songs/{id}/track-start Çalma başladı
POST /api/muzibu/songs/{id}/track-end Çalma bitti
Queue & Playlists
GET /api/muzibu/queue/initial Başlangıç kuyruğu
POST /api/muzibu/queue/refill Kuyruk doldur
GET /api/muzibu/playlists Playlist listesi
GET /api/muzibu/playlists/my-playlists Kullanıcı playlistleri
Content (Albums, Artists, Genres)
GET /api/muzibu/albums Albümler
GET /api/muzibu/artists Sanatçılar
GET /api/muzibu/genres Türler
GET /api/muzibu/sectors Sektörler
GET /api/muzibu/radios Radyolar

Stream Response Formatı

{
  "status": "success",
  "song": {
    "id": 1,
    "title": "Şarkı Adı",
    "duration": 180,
    "color_hash": "#ff6b6b,#4ecdc4,#45b7d1"
  },
  "stream": {
    "format": "hls_128",
    "url": "/stream/play/{hash}/playlist.m3u8",
    "encryption_key": "/hls-key/...",
    "has_encryption": true
  },
  "subscription": {
    "is_premium": true,
    "expires_at": "2026-12-31T..."
  }
}

4. Tasarım Dili

Renk Paleti

Primary (Coral)
#f97316
Background
#121212
Text
#ffffff
Secondary
#b3b3b3

Layout Yapısı

MOBILE (<768px):
┌─────────────────┐
│     Header      │ (56px)
├─────────────────┤
│                 │
│  MAIN CONTENT   │
│                 │
├─────────────────┤
│   PLAYER BAR    │ (auto)
└─────────────────┘

DESKTOP (1024px+):
┌──────────────────────────────────────────┐
│              Header (56px)               │
├─────────┬──────────────────┬─────────────┤
│ SIDEBAR │                  │   RIGHT     │
│  220px  │   MAIN CONTENT   │  SIDEBAR    │
│         │                  │   280px     │
├─────────┴──────────────────┴─────────────┤
│            PLAYER BAR (auto)             │
└──────────────────────────────────────────┘

UI Component'leri

Buttons

Cards

Rounded corners, subtle border, hover effect

Icons

Font Awesome Pro 7.1.0

Typography

Figtree Bold
Figtree Regular
Secondary text

5. Veri Modeli

Entity İlişkileri

Artist
  └── hasMany: Album
        └── hasMany: Song
              ├── belongsTo: Genre
              ├── belongsToMany: Playlist
              └── hasMany: SongPlay

Playlist
  ├── belongsToMany: Song
  ├── morphedByMany: Sector
  ├── morphedByMany: Radio
  ├── morphedByMany: Genre
  └── morphedByMany: CorporateAccount

Radio
  └── belongsToMany: Sector

CorporateAccount (Hierarchical)
  ├── hasMany: CorporateSpot
  └── hasMany: branches

Ana Modeller

Song

  • • song_id, title, slug, lyrics
  • • duration, file_path, hls_path
  • • encryption_key, encryption_iv
  • • color_hash, play_count

Playlist

  • • playlist_id, title, slug
  • • is_system, is_public, is_radio
  • • Polymorphic distribution
  • • Songs with position

SongPlay

  • • song_id, user_id, device_profile_id
  • • listened_duration, was_skipped
  • • stop_reason, source_type
  • • device_type, browser, platform

CorporateAccount

  • • Hierarchical (parent → branches)
  • • spot_enabled, spot_songs_between
  • • Corporate spot rotation
  • • Playlist distribution

6. Mobil Uygulama Gereksinimleri

Zorunlu Özellikler

  • HLS Adaptive Streaming
  • Background Playback
  • Lock Screen Controls
  • Gapless Playback
  • Queue Management
  • Shuffle & Repeat
  • Corporate Spot Desteği
  • Play Analytics Tracking

İstenen Özellikler

  • Offline Mode (Cache)
  • Push Notifications
  • CarPlay / Android Auto
  • Chromecast Desteği
  • Equalizer
  • Sleep Timer
  • Widget Desteği
  • Lyrics Display

Kritik Kısıtlamalar

Uzun Oturum:

10-15 saat kesintisiz çalışma. Memory leak = uygulama çökmesi

Eski Cihazlar:

iOS 12+, Android 6+ desteklenmeli. Düşük RAM optimizasyonu şart

Zayıf Bağlantı:

Adaptive bitrate + aggressive buffering + graceful degradation

Batarya:

Background'da minimum CPU/network kullanımı

7. React Native vs Flutter Karşılaştırma

Kriter React Native Flutter Kazanan
Audio/HLS Desteği react-native-track-player
Olgun, HLS destekler		 just_audio + audio_service
Güçlü, tam kontrol		 Flutter
Background Playback Destekler
Extra setup gerekli		 audio_service
Native entegrasyon		 Flutter
Performans İyi
JS Bridge overhead		 Mükemmel
Native compile		 Flutter
Memory Management Orta
GC unpredictable		 İyi
Dart VM optimize		 Flutter
UI Consistency Platform-specific
iOS/Android farklı		 Pixel-perfect
Her yerde aynı		 Flutter
Eski Cihaz Desteği iOS 12+, Android 5+ iOS 12+, Android 5+ (API 21) Eşit
Hot Reload Fast Refresh
İyi		 Hot Reload
Daha hızlı		 Flutter
Web'den Tanıdıklık JS/TS
React ecosystem		 Dart
Yeni dil		 React Native
Build Size ~15-25 MB ~10-15 MB Flutter
Topluluk & Paketler Çok büyük
npm ecosystem		 Büyüyor
pub.dev		 React Native

Audio Kütüphane Karşılaştırması

React Native: react-native-track-player

  • ✓ Background playback
  • ✓ Lock screen controls
  • ✓ HLS streaming
  • ✓ Queue management
  • ⚠ Gapless limited
  • ⚠ Memory management manual

Flutter: just_audio + audio_service

  • ✓ Background playback (native isolate)
  • ✓ Lock screen controls
  • ✓ HLS streaming
  • ✓ Queue with ConcatenatingAudioSource
  • ✓ Native gapless playback
  • ✓ Automatic memory management

Puan Özeti

3
React Native Kazandığı
7
Flutter Kazandığı

8. Öneri: Flutter

Önerilen

Neden Flutter?

Audio & Streaming

just_audio paketi HLS adaptive streaming, gapless playback, ve background playback için en güçlü çözümü sunar.

Performans

Native ARM compile ile 60fps UI. 10-15 saatlik oturumlarda bile akıcı performans.

Memory Management

Dart VM optimize garbage collection. Uzun oturumlarda memory leak riski düşük.

Pixel-Perfect UI

iOS ve Android'de tamamen aynı görünüm. Muzibu tasarım dili 1:1 uygulanabilir.

Kullanılacak Paketler

# pubspec.yaml
dependencies:
  just_audio: ^0.9.36          # Audio playback + HLS
  audio_service: ^0.18.12      # Background playback
  audio_session: ^0.1.18       # Audio focus management
  dio: ^5.4.0                   # HTTP client
  flutter_secure_storage:     # Token storage
  provider: ^6.1.1              # State management
  cached_network_image:        # Image caching
  hive: ^2.2.3                  # Local database
  connectivity_plus:           # Network status
  flutter_local_notifications: # Notifications

Örnek Audio Service

class MuzibuAudioHandler extends BaseAudioHandler {
  final _player = AudioPlayer();
  final _playlist = ConcatenatingAudioSource(children: []);

  // HLS Adaptive Streaming
  Future<void> playFromUrl(String hlsUrl) async {
    await _player.setAudioSource(
      HlsAudioSource(Uri.parse(hlsUrl)),
      preload: true,
    );
    await _player.play();
  }

  // Gapless Queue
  Future<void> addToQueue(List<Song> songs) async {
    _playlist.addAll(
      songs.map((s) => AudioSource.uri(Uri.parse(s.streamUrl))).toList(),
    );
  }

  // Background Notification
  @override
  Future<void> play() async {
    mediaItem.add(MediaItem(
      id: currentSong.id,
      title: currentSong.title,
      artist: currentSong.artist,
      artUri: Uri.parse(currentSong.coverUrl),
    ));
    await _player.play();
  }
}

9. Uygulama Mimarisi

Mimari Diyagram

┌───────────────────────────────────────────────────────────┐
│                    FLUTTER APP                            │
├───────────────────────────────────────────────────────────┤
│                                                           │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐       │
│  │   UI Layer  │  │   UI Layer  │  │   UI Layer  │       │
│  │   (Screens) │  │  (Widgets)  │  │   (Player)  │       │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘       │
│         │                │                │               │
│  ┌──────▼────────────────▼────────────────▼──────┐       │
│  │              STATE MANAGEMENT                  │       │
│  │         (Provider / Riverpod / Bloc)           │       │
│  └──────────────────────┬────────────────────────┘       │
│                         │                                 │
│  ┌──────────────────────▼────────────────────────┐       │
│  │               SERVICE LAYER                    │       │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐    │       │
│  │  │  Auth    │  │  Music   │  │  Player  │    │       │
│  │  │ Service  │  │ Service  │  │ Service  │    │       │
│  │  └──────────┘  └──────────┘  └──────────┘    │       │
│  └──────────────────────┬────────────────────────┘       │
│                         │                                 │
│  ┌──────────────────────▼────────────────────────┐       │
│  │              REPOSITORY LAYER                  │       │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐    │       │
│  │  │  Remote  │  │  Local   │  │  Cache   │    │       │
│  │  │   API    │  │  (Hive)  │  │ Manager  │    │       │
│  │  └──────────┘  └──────────┘  └──────────┘    │       │
│  └───────────────────────────────────────────────┘       │
│                                                           │
├───────────────────────────────────────────────────────────┤
│                   AUDIO SERVICE (Isolate)                 │
│  ┌─────────────────────────────────────────────────┐     │
│  │  just_audio + audio_service + audio_session     │     │
│  │  - HLS Adaptive Streaming                       │     │
│  │  - Gapless Queue (ConcatenatingAudioSource)     │     │
│  │  - Background Playback                          │     │
│  │  - Lock Screen Controls                         │     │
│  │  - Corporate Spot Integration                   │     │
│  └─────────────────────────────────────────────────┘     │
│                                                           │
└───────────────────────────────────────────────────────────┘
                         │
                         ▼
┌───────────────────────────────────────────────────────────┐
│                    MUZIBU REST API                        │
│  - /api/auth/*          (Authentication)                  │
│  - /api/muzibu/songs/*  (Streaming, Tracking)             │
│  - /api/muzibu/queue/*  (Queue Management)                │
│  - /api/muzibu/playlists/* (Content)                      │
└───────────────────────────────────────────────────────────┘

Klasör Yapısı

lib/
├── main.dart
├── app/
│   ├── app.dart              # MaterialApp setup
│   └── routes.dart           # Navigation
├── core/
│   ├── api/                  # Dio client, interceptors
│   ├── theme/                # Colors, typography
│   ├── constants/            # API endpoints, keys
│   └── utils/                # Helpers
├── features/
│   ├── auth/                 # Login, register
│   ├── home/                 # Dashboard
│   ├── player/               # Audio player
│   ├── playlists/            # Playlist management
│   ├── search/               # Search
│   ├── library/              # My library
│   └── settings/             # User settings
├── services/
│   ├── audio_handler.dart    # Audio service
│   ├── api_service.dart      # REST client
│   ├── storage_service.dart  # Secure storage
│   └── analytics_service.dart # Play tracking
├── models/                   # Data models
├── providers/                # State providers
└── widgets/                  # Reusable components

Ekranlar

Login
Home
Search
Library
Album Detail
Playlist Detail
Now Playing
Settings

10. Geliştirme Yol Haritası

1

Faz 1: Temel Altyapı

  • ✓ Flutter proje kurulumu
  • ✓ Tema ve tasarım sistemi
  • ✓ API client (Dio + interceptors)
  • ✓ Authentication flow
  • ✓ Basic navigation
2

Faz 2: Audio Player

  • ✓ just_audio + audio_service entegrasyonu
  • ✓ HLS adaptive streaming
  • ✓ Background playback
  • ✓ Lock screen controls
  • ✓ Gapless queue
  • ✓ Play tracking (start/hit/end)
3

Faz 3: İçerik & UI

  • ✓ Home screen (genres, playlists, radios)
  • ✓ Search functionality
  • ✓ Playlist management
  • ✓ Favorites
  • ✓ Now Playing screen
  • ✓ Queue management UI
4

Faz 4: Corporate & Advanced

  • ✓ Corporate spot entegrasyonu
  • ✓ Sector/Radio seçimi
  • ✓ Offline cache (optional)
  • ✓ Push notifications
  • ✓ Analytics dashboard
5

Faz 5: Polish & Release

  • ✓ Performance optimization
  • ✓ Memory leak testing (15h session)
  • ✓ Eski cihaz testleri
  • ✓ App Store / Play Store hazırlık
  • ✓ Beta testing
  • ✓ Production release

Sonuç

Muzibu mobil uygulaması için Flutter önerilmektedir. Native performans, güçlü audio kütüphaneleri, ve tek codebase ile hem iOS hem Android'de aynı deneyimi sunacaktır. Mevcut REST API'yi kullanarak hızlı geliştirme mümkündür.

Flutter 3.x
just_audio
iOS 12+ / Android 6+