🛠️ Moonlight Developer Docs

Integruj nasze odtwarzacze muzyczne z własną stroną

🚀 Quick Start 📖 Przykłady

🚀 Quick Start Guide

1. Podstawowa integracja

Dodaj nasze pliki do swojej strony i stwórz odtwarzacz w kilku linijkach: 

<!-- Dodaj style CSS -->
<link rel="stylesheet" href="https://moonlight.app/css/moonlight-music-player-light.css">

<!-- Kontener dla playera -->
<div id="music-player"></div>

<!-- Dodaj skrypt -->
<script src="https://moonlight.app/js/MoonlightMusicPlayerLight.js"></script>

<script>
// Utwórz odtwarzacz
const player = new MoonlightMusicPlayerLight('#music-player', {
    height: 120,
    showDownload: true,
    showShare: true
});

// Załaduj utwór
player.loadTrack({
    id: 123,
    title: "Nazwa utworu",
    artist: "Nazwa artysty", 
    audioUrl: "https://moonlight.app/api/music/tracks/123/stream",
    waveform: [0.2, 0.5, 0.8, 0.3, 0.7, ...], // opcjonalne
    moonlightUrl: "https://moonlight.app/music/tracks/123" // link powrotu
});
</script>

✅ Gotowe! Twoja strona ma teraz pełnofunkcjonalny odtwarzacz muzyczny z Moonlight.

🎵 Moonlight Music Player Light

🎬 Live Demo

⚙️ Opcje konfiguracji

Opcja Typ Domyślna Opis
height number 120 Wysokość playera w pikselach
showDownload boolean true Pokazuj przycisk pobierania
showShare boolean true Pokazuj przycisk udostępniania
showVolumeControl boolean true Pokazuj kontrolę głośności
compactMode boolean false Tryb kompaktowy dla małych przestrzeni
autoPlay boolean false Automatyczne odtwaranie po załadowaniu

📋 Format danych utworu

const trackData = {
    id: 123,                    // ID utworu (wymagane)
    title: "Nazwa utworu",     // Tytuł (wymagane)
    artist: "Nazwa artysty",   // Artysta (wymagane)
    audioUrl: "https://...",   // URL do pliku audio (wymagane)
    
    // Opcjonalne:
    waveform: [0.2, 0.5, ...], // Dane waveform (array liczb 0-1)
    duration: 180,              // Długość w sekundach
    coverUrl: "https://...",    // URL okładki
    moonlightUrl: "https://...", // Link do strony na Moonlight
    genre: "Electronic",        // Gatunek muzyczny
    description: "Opis..."      // Opis utworu
};

🔗 System Embedowania

🌍 Cross-Origin Setup

Nasz system embedowania działa z dowolnych domen dzięki prawidłowej konfiguracji CORS:

✅ Dozwolone:

  • • Wszystkie domeny i subdomeny
  • • HTTP i HTTPS
  • • Localhost (development)
  • • IP addresses
  • • Publiczne treści - bez ograniczeń
  • • Prywatne treści - z kluczem dostępu

🔧 Nagłówki CORS:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: *

💡 Tip: Player automatycznie dodaje przycisk "🌙 Visit on Moonlight" który przekierowuje na oryginalną stronę utworu na naszej platformie.

🔒 System Uprawnień Embedowania

  • • Publiczne - każdy może embedować bez klucza
  • • Prywatne - wymagany klucz dostępu od autora
  • • Wyłączone - embedowanie niemożliwe
  • • Klucze dostępu są 32-znakowe i widoczne tylko dla autorów

🎯 Generator Kodu Embed

🔌 API Endpoints

GET Pobierz dane utworu

GET https://moonlight.app/api/embed/music/tracks/{id}/player-data

Zwraca wszystkie dane potrzebne do załadowania utworu w playerze. 

{
  "track": {
    "id": 123,
    "title": "Nazwa utworu",
    "artist": "Nazwa artysty",
    "audioUrl": "https://moonlight.app/storage/music/track-123.mp3",
    "waveform": [0.2, 0.5, 0.8, ...],
    "duration": 180,
    "coverUrl": "https://moonlight.app/storage/covers/123.jpg",
    "moonlightUrl": "https://moonlight.app/music/tracks/123"
  }
}

GET Stream audio

GET https://moonlight.app/api/embed/music/tracks/{id}/stream

Bezpośredni stream pliku audio z odpowiednimi nagłówkami CORS.

✅ Automatycznie obsługiwane: Range requests, cache headers, CORS, content-type detection

📖 Przykłady użycia

🌐 WordPress Plugin

// functions.php
function moonlight_music_player_shortcode($atts) {
    $atts = shortcode_atts([
        'track_id' => '',
        'height' => '120'
    ], $atts);
    
    return '
    <div id="moonlight-' . $atts['track_id'] . '"></div>
    <script>
    new MoonlightMusicPlayerLight("#moonlight-' . $atts['track_id'] . '", {
        height: ' . $atts['height'] . '
    }).loadTrackById(' . $atts['track_id'] . ');
    </script>';
}
add_shortcode('moonlight_music', 'moonlight_music_player_shortcode');

Użycie: [moonlight_music track_id="123" height="120"]

⚛️ React Component

import { useEffect, useRef } from 'react';

function MoonlightPlayer({ trackId, height = 120 }) {
    const playerRef = useRef();
    
    useEffect(() => {
        const player = new MoonlightMusicPlayerLight(
            playerRef.current,
            { height }
        );
        
        player.loadTrackById(trackId);
        
        return () => player.destroy();
    }, [trackId]);
    
    return <div ref={playerRef} />;
}

📚 Książki i Komiksy z Płatnościami

💰 System Płatności dla Embedded Content

Moonlight obsługuje premium rozdziały które wymagają zapłaty w wewnętrznej walucie (monety). Stworzyliśmy dedykowany flow dla embedded content z automatycznym powrotem na Twoją stronę.

🎯 Jak to działa:

  1. User klika premium rozdział na Twojej stronie
  2. Przekierowanie na Moonlight z context preservation
  3. Automatyczny flow: login → kup monety → odblokuj
  4. Powrót na Twoją stronę z access tokenem

💎 System Monet:

  • • 10 monet = 1 PLN
  • • Płatności przez Stripe
  • • Automatyczne odliczanie z balansu
  • • Jednorazowa płatność = dozgonny dostęp

⚡ Streamlined User Experience

Nasz system zachowuje kontekst przez cały proces płatności. User nie gubi się w przekierowaniach i automatycznie wraca na Twoją stronę po zakończeniu transakcji.

🔗 Embedding Premium Content

📖 Rozdział Książki

<!-- Link do premium rozdziału -->
<a href="https://moonlight.app/embed/purchase/book_chapter/123?return_to=https%3A%2F%2Ftwoja-strona.pl%2Fksiazka%2Frozdzia%C5%82-5&embed_key=optional_private_key"
   class="premium-chapter-link">
   🔐 Przeczytaj Rozdział 5 (Premium)
</a>

<!-- Lub jako button -->
<button onclick="window.location.href='https://moonlight.app/embed/purchase/book_chapter/123?return_to=...'">
   Odblokuj za 50 monet
</button>

🎨 Rozdział Komiksu

<!-- Link do premium rozdziału komiksu -->
<a href="https://moonlight.app/embed/purchase/comic_chapter/456?return_to=https%3A%2F%2Ftwoja-strona.pl%2Fkomiks%2Frozdzia%C5%82-10"
   class="premium-chapter-link">
   🔐 Przeczytaj Rozdział 10 (Premium)
</a>

🔄 Obsługa Powrotu

// JavaScript - obsługa powrotu po zakupie
const urlParams = new URLSearchParams(window.location.search);

if (urlParams.get('access_granted') === '1') {
    const chapterId = urlParams.get('chapter_id');
    const moonlightToken = urlParams.get('moonlight_token');
    
    // User pomyślnie odblokował rozdział
    showChapterContent(chapterId);
    
    // Opcjonalnie: zapisz token dla przyszłych requestów
    localStorage.setItem(`chapter_${chapterId}_token`, moonlightToken);
}

Potrzebujesz pomocy? 🤝

Nasz zespół pomoże Ci z integracją i odpowie na wszystkie pytania

💬 Forum Techniczne 📧 Email Support