Môj syn, má rad niekoľko playlistov, ktoré rád počúva pri uspávaní. Tak som sa rozhodol, nepoužívať youtube, ale vyskúšam urobiť vlastný MP3 prehrávač, ktorý by fungoval online. Zvolil so na to Docker a zadanie bolo následovné:

Sprístupniť niekoľko playlistov
pozadie, aby sa menilo každých 5 minút
playlisty, aby sa dali meniť
Hudba aby sa dala stišovať, zosiľňovať
Playlist, aby sa dal zastaviť a znova spustiť.
Chcel som, aby docker bežal na porte 3030

Postup:

Vytvoril som jeden priečinok pomenovaný matej.

Do neho som vložil 2 priečinky

Do jpg som nahodil obrázky a do MP3 playlisty, ktoré chcem aby sa dali spúšťať.

Vytvoril som súbory:

docker-compose.yaml
index.html
script.js
style.css

docker-compose.yaml

version: '3'
services:
  mato-player:
    image: nginx:alpine
    container_name: mato_container
    ports:
      - "3030:80"
    volumes:
      - ./mato:/usr/share/nginx/html
    restart: always

index.html

<!DOCTYPE html>
<html lang="sk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mato Player</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>🎵 Maťkov playlist</h1>

        <div class="controls-group">
            <label for="music-select">Vyber si zvuk/skladbu:</label>
            <select id="music-select">
                <option value="mp3/Brahms.mp3">Brahms - Uspávanka</option>
                <option value="mp3/mozart.mp3">Mozart - Klasika</option>
                <option value="mp3/voda.mp3">Šum vody</option>
                <option value="mp3/metal.mp3">Metal</option>
                <option value="mp3/vysavac.mp3">Biely šum (Vysávač)</option>
            </select>
        </div>

        <button id="music-btn" class="btn-paused" onclick="toggleMusic()">🎶 Spustiť</button>

        <div class="volume-container">
            <label for="volume-control">Hlasitosť</label>
            <input type="range" id="volume-control" min="0" max="1" step="0.1" value="0.5">
        </div>
    </div>

    <audio id="bg-music" loop>
        <source src="mp3/Brahms.mp3" type="audio/mpeg">
    </audio>

    <script src="script.js"></script>
</body>
</html>

script.js

document.addEventListener('DOMContentLoaded', () => {
    const audio = document.getElementById("bg-music");
    const volumeControl = document.getElementById("volume-control");
    const musicSelect = document.getElementById("music-select");
    const musicBtn = document.getElementById("music-btn");

    // --- 1. ROTÁCIA OBRÁZKOV (každých 5 minút) ---
    const images = [
        'astrobot.jpg', 'astrobot2.jpg', 'gumkaci.jpg', 'gumkaci2.jpg',
        'hlada_sa_nemo.jpg', 'macko_pu.jpg', 'paw_patrol.jpg', 
        'paw-patrol2.jpg', 'smolkovia.jpg'
    ];
    
    let currentImgIndex = Math.floor(Math.random() * images.length);

    const changeBg = () => {
        const imgName = images[currentImgIndex];
        document.body.style.backgroundImage = `url('jpg/${imgName}')`;
        console.log("Pozadie zmenené na: " + imgName);
        currentImgIndex = (currentImgIndex + 1) % images.length;
    };

    changeBg(); // Spustiť hneď
    setInterval(changeBg, 300000); // 300 000 ms = 5 minút


    // --- 2. OVLÁDANIE HUDBY ---
    if (audio && volumeControl) {
        audio.volume = 0.5;
        volumeControl.addEventListener('input', (e) => {
            audio.volume = e.target.value;
        });
    }

    if (musicSelect && audio) {
        musicSelect.addEventListener('change', () => {
            const isPlaying = !audio.paused;
            audio.src = musicSelect.value;
            if (isPlaying) {
                audio.play().catch(e => console.log("Čakám na interakciu..."));
            }
            // Reset tlačidla ak sa zmení skladba počas pauzy
            if (audio.paused) {
                musicBtn.innerText = "🎶 Spustiť: " + musicSelect.options[musicSelect.selectedIndex].text;
            }
        });
    }
});

function toggleMusic() {
    const audio = document.getElementById("bg-music");
    const btn = document.getElementById("music-btn");

    if (audio.paused) {
        audio.play().then(() => {
            btn.innerText = "⏸ Pozastaviť";
            btn.className = "btn-playing";
        }).catch(err => alert("Najprv kliknite niekde na stránku pre povolenie zvuku."));
    } else {
        audio.pause();
        btn.innerText = "🎶 Pokračovať";
        btn.className = "btn-paused";
    }
}

style.css

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    background-size: cover;
    background-position: center;
    transition: background-image 1.5s ease-in-out; /* Plynulá zmena obrázka */
}

.container {
    background: rgba(0, 0, 0, 0.6);
    padding: 30px;
    border-radius: 20px;
    color: white;
    text-align: center;
    width: 300px;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.controls-group { margin: 20px 0; }

select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background: #444;
    color: white;
    border: none;
}

#music-btn {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    color: white;
    font-size: 1rem;
}

.btn-paused { background-color: #d62828; }
.btn-playing { background-color: #28a745; }

.volume-container { margin-top: 20px; }

input[type="range"] { width: 100%; cursor: pointer; }

Spustil som docker

sudo docker-compose up -d

Prípadne, ak je potrebné urobiť zmeny tak je nutné docker zastaviť a znovu spustiť

sudo docker-compose down
sudo docker-compose up -d

Vytvorenie Docker MP3 prehrávača online.

Postup:

docker-compose.yaml

index.html

script.js

style.css