36 lines
1.3 KiB
HTML
36 lines
1.3 KiB
HTML
{% load static %}
|
|
<link rel="stylesheet" href="{% static 'css/player.css' %}">
|
|
|
|
<div class="player-container" id="playerContainer" hidden>
|
|
<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>
|
|
|
|
<input
|
|
type="range"
|
|
id="volumeControl"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value="1"
|
|
title="Громкость"
|
|
>
|
|
</div>
|
|
</div>
|
|
<audio id="audioPlayer" class="audio-player" preload="metadata">
|
|
Ваш браузер не поддерживает аудио.
|
|
</audio>
|
|
|
|
</div>
|
|
|
|
<script src="{% static 'js/player.js' %}"></script> |