{% 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>