Немножко разбросал track_list.html по шаблонам

music_storage/static/css/main.css

@@ -25,7 +25,7 @@ header {
     color: white;
     border-radius: 10px;
     margin-bottom: 30px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
 h1 {
@@ -59,7 +59,7 @@ h1 {
     background: rgba(255, 255, 255, 0.15);
     border-radius: 8px;
     transition: background 0.3s ease, transform 0.2s ease;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
 .nav-link:hover {
@@ -69,4 +69,10 @@ h1 {
 
 .nav-link:active {
     transform: translateY(0);
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
 }

music_storage/static/css/player.css

@@ -0,0 +1,141 @@
+.player-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 75%);
+    color: white;
+    padding: 15px 20px;
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+.player-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.current-track {
+    font-weight: 600;
+    font-size: 1.1rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.current-artist {
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+
+.audio-player {
+    width: 100%;
+    margin: 0;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.player-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.player-time {
+    font-size: 0.85rem;
+    opacity: 0.9;
+    min-width: 60px;
+}
+
+.player-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+.control-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    color: white;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.control-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+}
+
+
+@media (max-width: 768px) {
+    .player-container {
+        padding: 12px 15px;
+    }
+}
+
+.player-controls {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.player-buttons {
+    display: flex;
+    gap: 15px;
+}
+
+.control-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    color: white;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    font-size: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all .2s ease;
+}
+
+.control-btn:hover {
+    background: rgba(255, 255, 255, 0.35);
+    transform: scale(1.15);
+}
+
+.player-header {
+    text-align: center;
+    margin-bottom: 5px;
+}
+
+.player-header .current-track {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.player-header .current-artist {
+    opacity: .9;
+}
+
+@media (max-width: 768px) {
+    .player-header .current-track {
+        font-size: 1.1rem;
+    }
+
+    .player-header .current-artist {
+        font-size: 0.9rem;
+    }
+}

music_storage/static/css/track_list.css

@@ -0,0 +1,89 @@
+.track-list {
+    list-style: none;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+    margin-bottom: 30px;
+}
+
+.track-item {
+    padding: 20px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.track-item:last-child {
+    border-bottom: none;
+}
+
+.track-item:hover {
+    background-color: #f8f9fa;
+    transform: translateX(5px);
+}
+
+.track-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 100%);
+}
+
+.track-item.playing {
+    background-color: #e3f2fd;
+}
+
+.track-item.playing .track-title {
+    color: #667eea;
+}
+
+.track-info {
+    flex: 1;
+}
+
+.track-title {
+    font-weight: 600;
+    color: #2c3e50;
+    margin-bottom: 5px;
+    font-size: 1.1rem;
+}
+
+.track-artist {
+    color: #7f8c8d;
+    font-size: 0.95rem;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 50px 20px;
+    color: #7f8c8d;
+}
+
+.empty-state i {
+    font-size: 3rem;
+    margin-bottom: 15px;
+    color: #bdc3c7;
+}
+
+.empty-state p {
+    font-size: 1.1rem;
+    margin-top: 10px;
+}
+
+@media (max-width: 768px) {
+    .track-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+        padding: 15px;
+    }
+}

music_storage/static/js/player.js

@@ -0,0 +1,156 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const audioPlayer = document.getElementById('audioPlayer');
+    const trackItems = document.querySelectorAll('.track-item');
+    const currentTrack = document.getElementById('currentTrack');
+    const currentArtist = document.getElementById('currentArtist');
+    const playerContainer = document.getElementById('playerContainer');
+
+    const playPauseBtn = document.getElementById('playPauseBtn');
+    const nextBtn = document.getElementById('nextBtn');
+    const prevBtn = document.getElementById('prevBtn');
+
+    const progressBar = document.getElementById('audioProgress');
+    const currentTimeElem = document.getElementById('currentTime');
+    const durationElem = document.getElementById('durationTime');
+
+    let currentIndex = -1;
+
+    function updateUI(title, artist) {
+        currentTrack.textContent = title;
+        currentArtist.textContent = 'Исполнитель: ' + artist;
+    }
+
+    function formatTime(seconds) {
+        const m = Math.floor(seconds / 60);
+        const s = Math.floor(seconds % 60);
+        return `${m}:${s < 10 ? '0' : ''}${s}`;
+    }
+
+    function updateProgressUI(current, duration) {
+        if (!progressBar) return;
+        progressBar.max = duration || 0;
+        progressBar.value = current || 0;
+
+        if (currentTimeElem) currentTimeElem.textContent = formatTime(current || 0);
+        if (durationElem) durationElem.textContent = formatTime(duration || 0);
+    }
+
+    // Обновление прогресса при воспроизведении
+    audioPlayer.addEventListener('timeupdate', () => {
+        updateProgressUI(audioPlayer.currentTime, audioPlayer.duration);
+    });
+
+    // Перемотка через прогресс-бар
+    if (progressBar) {
+        progressBar.addEventListener('input', () => {
+            audioPlayer.currentTime = progressBar.value;
+            updateProgressUI(audioPlayer.currentTime, audioPlayer.duration);
+        });
+    }
+
+    // Обновление UI после загрузки метаданных
+    audioPlayer.addEventListener('loadedmetadata', () => {
+        updateProgressUI(0, audioPlayer.duration);
+    });
+
+    function updateMediaSession(title, artist) {
+        if (!('mediaSession' in navigator)) return;
+
+        navigator.mediaSession.metadata = new MediaMetadata({
+            title: title,
+            artist: artist,
+            artwork: [
+                { src: '/static/default_cover.png', sizes: '512x512', type: 'image/png' }
+            ]
+        });
+
+        navigator.mediaSession.setActionHandler('play', () => audioPlayer.play());
+        navigator.mediaSession.setActionHandler('pause', () => audioPlayer.pause());
+        navigator.mediaSession.setActionHandler('previoustrack', () => playTrack(currentIndex - 1));
+        navigator.mediaSession.setActionHandler('nexttrack', () => playTrack(currentIndex + 1));
+    }
+    // ---------------------------
+
+    // Сброс активного трека
+    function resetActiveTrack() {
+        trackItems.forEach(item => {
+            item.classList.remove('active');
+        });
+    }
+
+    function playTrack(index) {
+        if (index < 0 || index >= trackItems.length) return;
+
+        currentIndex = index;
+        const item = trackItems[index];
+
+        const src = item.dataset.trackSrc;
+        const title = item.querySelector('.track-title').textContent;
+        const artist = item.querySelector('.track-artist').textContent.split(': ')[1];
+
+        resetActiveTrack();
+        item.classList.add('active');
+        updateUI(title, artist);
+
+        // ---------------------------
+        // ВЫЗОВ Media Session API
+        // ---------------------------
+        updateMediaSession(title, artist);
+        // ---------------------------
+
+        audioPlayer.src = src;
+        audioPlayer.title = artist + ' - ' + title;
+        audioPlayer.play().catch(err => console.log(err));
+
+        updatePlayButton(true);
+    }
+
+    // Клик по треку
+    trackItems.forEach((item, i) => {
+        item.addEventListener('click', () => playTrack(i));
+    });
+
+    // Auto-next on end
+    audioPlayer.addEventListener('ended', () => {
+        playTrack(currentIndex + 1);
+    });
+
+    // Автоматически скрыть плеер при прокрутке
+    let scrollTimer;
+    window.addEventListener('scroll', function () {
+        clearTimeout(scrollTimer);
+        playerContainer.style.opacity = '0.75';
+
+        scrollTimer = setTimeout(() => {
+            playerContainer.style.opacity = '1';
+        }, 200);
+    });
+
+    function updatePlayButton(isPlaying) {
+        playPauseBtn.innerHTML = isPlaying
+            ? '<i class="fas fa-pause"></i>'
+            : '<i class="fas fa-play"></i>';
+    }
+
+    playPauseBtn.addEventListener('click', () => {
+        if (!audioPlayer.src) return;
+        if (audioPlayer.paused) {
+            audioPlayer.play();
+        } else {
+            audioPlayer.pause();
+        }
+    });
+
+    audioPlayer.addEventListener('play', () => updatePlayButton(true));
+    audioPlayer.addEventListener('pause', () => updatePlayButton(false));
+
+    // Next track
+    nextBtn.addEventListener('click', () => {
+        if (currentIndex !== -1) playTrack(currentIndex + 1);
+    });
+
+    // Previous track
+    prevBtn.addEventListener('click', () => {
+        if (currentIndex !== -1) playTrack(currentIndex - 1);
+    });
+});

music_storage/templates/music/track_list.html

@@ -1,492 +1,29 @@
-<!-- templates/music_library.html -->
+{% extends 'base.html' %}
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Музыкальный сервис</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
 
-        body {
+{% load static %}
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+{% block head_extra %}
-            background-color: #f5f7fa;
+<link rel="stylesheet" href="{% static 'css/track_list.css' %}">
-            color: #333;
+{% endblock head_extra %}
-            line-height: 1.6;
-            padding-bottom: 100px;
-        }
 
-        .container {
+{% block content %}
-            max-width: 1200px;
+<div class="container">
-            margin: 0 auto;
+    <ul class="track-list">
-            padding: 20px;
+        {% if tracks %}
-        }
+            {% for track in tracks %}
-
+            <li class="track-item" data-track-id="{{ track.id }}" data-track-src="{{ track.file.url }}">
-        header {
+                <div class="track-info">
-            text-align: center;
+                    <h3 class="track-title">{{ track.title }}</h3>
-            padding: 30px 0;
+                    <p class="track-artist">Исполнитель: {{ track.album.artist }}</p>
-            background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 100%);
-            color: white;
-            border-radius: 10px;
-            margin-bottom: 30px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-        }
-
-        h1 {
-            font-weight: 600;
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-        }
-
-        .subtitle {
-            font-size: 1.1rem;
-            opacity: 0.9;
-        }
-
-        .track-list {
-            list-style: none;
-            background: white;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-            overflow: hidden;
-            margin-bottom: 30px;
-        }
-
-        .track-item {
-            padding: 20px;
-            border-bottom: 1px solid #eee;
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .track-item:last-child {
-            border-bottom: none;
-        }
-
-        .track-item:hover {
-            background-color: #f8f9fa;
-            transform: translateX(5px);
-        }
-
-        .track-item.active::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 4px;
-            background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 100%);
-        }
-
-        .track-info {
-            flex: 1;
-        }
-
-        .track-title {
-            font-weight: 600;
-            color: #2c3e50;
-            margin-bottom: 5px;
-            font-size: 1.1rem;
-        }
-
-        .track-artist {
-            color: #7f8c8d;
-            font-size: 0.95rem;
-        }
-
-        .player-container {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 75%);
-            color: white;
-            padding: 15px 20px;
-            box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
-            z-index: 1000;
-            transition: all 0.3s ease;
-        }
-
-        .player-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-
-        .current-track {
-            font-weight: 600;
-            font-size: 1.1rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .current-artist {
-            font-size: 0.9rem;
-            opacity: 0.9;
-        }
-
-        .audio-player {
-            width: 100%;
-            margin: 0;
-            border-radius: 4px;
-            background-color: rgba(255,255,255,0.2);
-            border: 1px solid rgba(255,255,255,0.3);
-        }
-
-        .player-controls {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 0;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-
-        .player-time {
-            font-size: 0.85rem;
-            opacity: 0.9;
-            min-width: 60px;
-        }
-
-        .player-buttons {
-            display: flex;
-            gap: 10px;
-        }
-
-        .control-btn {
-            background: rgba(255,255,255,0.2);
-            border: none;
-            color: white;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .control-btn:hover {
-            background: rgba(255,255,255,0.3);
-            transform: scale(1.1);
-        }
-
-        .empty-state {
-            text-align: center;
-            padding: 50px 20px;
-            color: #7f8c8d;
-        }
-
-        .empty-state i {
-            font-size: 3rem;
-            margin-bottom: 15px;
-            color: #bdc3c7;
-        }
-
-        .empty-state p {
-            font-size: 1.1rem;
-            margin-top: 10px;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                padding: 15px;
-            }
-            
-            .track-item {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 10px;
-                padding: 15px;
-            }
-            
-            .player-container {
-                padding: 12px 15px;
-            }
-        }
-
-        .track-item.playing {
-            background-color: #e3f2fd;
-        }
-
-        .track-item.playing .track-title {
-            color: #667eea;
-        }
-
-        .player-controls {
-            display: flex;
-            justify-content: center;
-            margin-top: 10px;
-        }
-
-        .player-buttons {
-            display: flex;
-            gap: 15px;
-        }
-
-        .control-btn {
-            background: rgba(255,255,255,0.2);
-            border: none;
-            color: white;
-            width: 42px;
-            height: 42px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all .2s ease;
-        }
-
-        .control-btn:hover {
-            background: rgba(255,255,255,0.35);
-            transform: scale(1.15);
-        }
-
-        .player-header {
-            text-align: center;
-            margin-bottom: 5px;
-        }
-
-        .player-header .current-track {
-            font-size: 1.2rem;
-            font-weight: bold;
-        }
-
-        .player-header .current-artist {
-            opacity: .9;
-        }
-
-        @media (max-width: 768px) {
-            .player-header .current-track {
-                font-size: 1.1rem;
-            }
-            .player-header .current-artist {
-                font-size: 0.9rem;
-            }
-        }
-
-    </style>
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>🎵 Музыкальный сервис</h1>
-            <p class="subtitle">Ваша коллекция треков</p>
-        </header>
-
-        <ul class="track-list">
-            {% if tracks %}
-                {% for track in tracks %}
-                <li class="track-item" data-track-id="{{ track.id }}" data-track-src="{{ track.file.url }}">
-                    <div class="track-info">
-                        <h3 class="track-title">{{ track.title }}</h3>
-                        <p class="track-artist">Исполнитель: {{ track.album.artist }}</p>
-                    </div>
-                </li>
-                {% endfor %}
-            {% else %}
-                <div class="empty-state">
-                    <i class="fas fa-music"></i>
-                    <p>Нет добавленных треков</p>
                 </div>
-            {% endif %}
+            </li>
-        </ul>
+            {% endfor %}
-    </div>
+        {% else %}
-
+            <div class="empty-state">
-    <div class="player-container" id="playerContainer">
+                <i class="fas fa-music"></i>
-        <div class="player-header">
+                <p>Нет добавленных треков</p>
-            <div class="current-track" id="currentTrack">Выберите трек для воспроизведения</div>
-            <div class="current-artist" id="currentArtist"></div>
-        </div>
-        <div class="player-controls">
-            <span id="currentTime">0:00</span>
-            <input type="range" id="audioProgress" value="0" step="0.1">
-            <span id="durationTime">0:00</span>
-
-            <div class="player-buttons">
-                <button class="control-btn" id="prevBtn"><i class="fas fa-backward"></i></button>
-                <button class="control-btn" id="playPauseBtn"><i class="fas fa-play"></i></button>
-                <button class="control-btn" id="nextBtn"><i class="fas fa-forward"></i></button>
             </div>
-        </div>
+        {% endif %}
-        <audio id="audioPlayer" class="audio-player" preload="metadata">
+    </ul>
-            Ваш браузер не поддерживает аудио.
+</div>
-        </audio>
+{% include 'player.html' %}
-        
+{% endblock %}
-    </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const audioPlayer = document.getElementById('audioPlayer');
-            const trackItems = document.querySelectorAll('.track-item');
-            const currentTrack = document.getElementById('currentTrack');
-            const currentArtist = document.getElementById('currentArtist');
-            const playerContainer = document.getElementById('playerContainer');
-
-            const playPauseBtn = document.getElementById('playPauseBtn');
-            const nextBtn = document.getElementById('nextBtn');
-            const prevBtn = document.getElementById('prevBtn');
-
-            const progressBar = document.getElementById('audioProgress');
-            const currentTimeElem = document.getElementById('currentTime');
-            const durationElem = document.getElementById('durationTime');
-
-            let currentIndex = -1;
-
-            function updateUI(title, artist) {
-                currentTrack.textContent = title;
-                currentArtist.textContent = 'Исполнитель: ' + artist;
-            }
-
-            function formatTime(seconds) {
-                const m = Math.floor(seconds / 60);
-                const s = Math.floor(seconds % 60);
-                return `${m}:${s < 10 ? '0' : ''}${s}`;
-            }
-
-            function updateProgressUI(current, duration) {
-                if (!progressBar) return;
-                progressBar.max = duration || 0;
-                progressBar.value = current || 0;
-
-                if (currentTimeElem) currentTimeElem.textContent = formatTime(current || 0);
-                if (durationElem) durationElem.textContent = formatTime(duration || 0);
-            }
-
-            // Обновление прогресса при воспроизведении
-            audioPlayer.addEventListener('timeupdate', () => {
-                updateProgressUI(audioPlayer.currentTime, audioPlayer.duration);
-            });
-
-            // Перемотка через прогресс-бар
-            if (progressBar) {
-                progressBar.addEventListener('input', () => {
-                    audioPlayer.currentTime = progressBar.value;
-                    updateProgressUI(audioPlayer.currentTime, audioPlayer.duration);
-                });
-            }
-
-            // Обновление UI после загрузки метаданных
-            audioPlayer.addEventListener('loadedmetadata', () => {
-                updateProgressUI(0, audioPlayer.duration);
-            });
-
-            function updateMediaSession(title, artist) {
-                if (!('mediaSession' in navigator)) return;
-
-                navigator.mediaSession.metadata = new MediaMetadata({
-                    title: title,
-                    artist: artist,
-                    artwork: [
-                        { src: '/static/default_cover.png', sizes: '512x512', type: 'image/png' }
-                    ]
-                });
-
-                navigator.mediaSession.setActionHandler('play', () => audioPlayer.play());
-                navigator.mediaSession.setActionHandler('pause', () => audioPlayer.pause());
-                navigator.mediaSession.setActionHandler('previoustrack', () => playTrack(currentIndex - 1));
-                navigator.mediaSession.setActionHandler('nexttrack', () => playTrack(currentIndex + 1));
-            }
-            // ---------------------------
-
-            // Сброс активного трека
-            function resetActiveTrack() {
-                trackItems.forEach(item => {
-                    item.classList.remove('active');
-                });
-            }
-
-            function playTrack(index) {
-                if (index < 0 || index >= trackItems.length) return;
-
-                currentIndex = index;
-                const item = trackItems[index];
-
-                const src = item.dataset.trackSrc;
-                const title = item.querySelector('.track-title').textContent;
-                const artist = item.querySelector('.track-artist').textContent.split(': ')[1];
-
-                resetActiveTrack();
-                item.classList.add('active');
-                updateUI(title, artist);
-
-                // ---------------------------
-                // ВЫЗОВ Media Session API
-                // ---------------------------
-                updateMediaSession(title, artist);
-                // ---------------------------
-
-                audioPlayer.src = src;
-                audioPlayer.title = artist + ' - ' + title;
-                audioPlayer.play().catch(err => console.log(err));
-
-                updatePlayButton(true);
-            }
-
-            // Клик по треку
-            trackItems.forEach((item, i) => {
-                item.addEventListener('click', () => playTrack(i));
-            });
-
-            // Auto-next on end
-            audioPlayer.addEventListener('ended', () => {
-                playTrack(currentIndex + 1);
-            });
-
-            // Автоматически скрыть плеер при прокрутке
-            let scrollTimer;
-            window.addEventListener('scroll', function() {
-                clearTimeout(scrollTimer);
-                playerContainer.style.opacity = '0.75';
-                
-                scrollTimer = setTimeout(() => {
-                    playerContainer.style.opacity = '1';
-                }, 200);
-            });
-
-            function updatePlayButton(isPlaying) {
-                playPauseBtn.innerHTML = isPlaying
-                    ? '<i class="fas fa-pause"></i>'
-                    : '<i class="fas fa-play"></i>';
-            }
-
-            playPauseBtn.addEventListener('click', () => {
-                if (!audioPlayer.src) return;
-                if (audioPlayer.paused) {
-                    audioPlayer.play();
-                } else {
-                    audioPlayer.pause();
-                }
-            });
-
-            audioPlayer.addEventListener('play', () => updatePlayButton(true));
-            audioPlayer.addEventListener('pause', () => updatePlayButton(false));
-
-            // Next track
-            nextBtn.addEventListener('click', () => {
-                if (currentIndex !== -1) playTrack(currentIndex + 1);
-            });
-
-            // Previous track
-            prevBtn.addEventListener('click', () => {
-                if (currentIndex !== -1) playTrack(currentIndex - 1);
-            });
-        });
-    </script>
-</body>
-</html>

music_storage/templates/player.html

@@ -0,0 +1,26 @@
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/player.css' %}">
+
+<div class="player-container" id="playerContainer">
+    <div class="player-header">
+        <div class="current-track" id="currentTrack">Выберите трек для воспроизведения</div>
+        <div class="current-artist" id="currentArtist"></div>
+    </div>
+    <div class="player-controls">
+        <span id="currentTime">0:00</span>
+        <input type="range" id="audioProgress" value="0" step="0.1">
+        <span id="durationTime">0:00</span>
+
+        <div class="player-buttons">
+            <button class="control-btn" id="prevBtn"><i class="fas fa-backward"></i></button>
+            <button class="control-btn" id="playPauseBtn"><i class="fas fa-play"></i></button>
+            <button class="control-btn" id="nextBtn"><i class="fas fa-forward"></i></button>
+        </div>
+    </div>
+    <audio id="audioPlayer" class="audio-player" preload="metadata">
+        Ваш браузер не поддерживает аудио.
+    </audio>
+    
+</div>
+
+<script src="{% static 'js/player.js' %}"></script>