<!-- Первая часть кода (Плейлист) -->
<audio id="audioPlayer" style="display: none;" controls></audio>

<ul id="playlist" style="display: none;">
  <li><a href="ссылка на аудиофайл"></a></li>
  <li><a href="ссылка на аудиофайл"></a></li>
  <li><a href="ссылка на аудиофайл"></a></li>
</ul>


<!-- Вторая часть кода (Длительность трека) -->
<style>
     #duration {
      color: white; /* Цвет текста */
      user-select: none;
  }
</style>
<div id="duration"></div>


<!-- Третья часть кода (Шкала громкости) -->
<style>
.styled-slider {
  -webkit-appearance: none;
  -moz-apperance: none;
  appearance: none;
  height: 5px; /* Высота шкалы громкости */
  border-radius: 5px; /* Радиус скругления углов */
  background: white; /* Фоновый цвет шкалы громкости */
  outline: none;
}

.styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; /* Ширина ползунка громкости */
  height: 10px; /* Высота ползунка громкости */
  border-radius: 50%; /* Радиус скругления углов */
  background: black; /* Цвет ползунка громкости */
  cursor: pointer;
}


.styled-slider::-moz-range-thumb {
  width: 10px; /* Ширина ползунка громкости */
  height: 10px; /* Высота ползунка громкости */
  border: none;
  border-radius: 50%;  /* Радиус скругления углов */
  background: black; /* Цвет ползунка громкости */
  cursor: pointer;
}

.styled-slider::-ms-thumb {
  width: 10px; /* Ширина ползунка громкости */
  height: 10px; /* Высота ползунка громкости */
  border: none;
  border-radius: 50%; /* Радиус скругления углов */
  background: black; /* Цвет ползунка громкости */
  cursor: pointer;
}
</style>
<input type="range" class='styled-slider' style='width: 100%;' id="volumeSlider" min="0" max="1" step="0.1" value="1">


<!-- Четвертая часть кода (Прогресс бар) -->
<style>
    .progress-bar {
    width: 100%;
    height: 5px; /* Высота прогресс бара */
    background-color: white; /* Фоновый цвет прогресс бара */
    border-radius: 5px; /* Радиус скругления углов */
    position: relative;
    margin: 0 auto;
    cursor: pointer;
  }
  .progress {
    height: 100%;
    background-color: black; /* Цвет заполнения прогресс бара */
    border-radius: 5px; /* Радиус скругления углов */
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
<div class="progress-bar" id="progressBar">
  <div class="progress" id="progress"></div>
</div>


<!-- Пятая часть кода (Модификация) -->
<style>
 .playbut, .pausebut, .nextbut, .prevbut {
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease-in-out;
  }
  .playbut:hover, .pausebut:hover, .nextbut:hover, .prevbut:hover {
    transform: scale(0.95);
  }
  .t-track {
      cursor: pointer;
      user-select: none;
  }
  .pausebut {
      display: none;
  }
</style>
<script>
const audioPlayer = document.getElementById('audioPlayer');const prevButton = document.querySelector('.prevbut');const playButton = document.querySelector('.playbut');const pauseButton = document.querySelector('.pausebut');const nextButton = document.querySelector('.nextbut');const progressBar = document.getElementById('progressBar');const progress = document.getElementById('progress');const volumeSlider = document.getElementById('volumeSlider');const durationDisplay = document.getElementById('duration');const tracks = document.querySelectorAll('.t-track');let isPlaying = false;let currentTrackIndex = 0;let isDragging = false;function togglePlayPause() {if (isPlaying) {audioPlayer.pause();playButton.style.display = 'inline-block';pauseButton.style.display = 'none';} else {if (audioPlayer.src) {audioPlayer.play();playButton.style.display = 'none';pauseButton.style.display = 'inline-block';} else {playTrack(currentTrackIndex);}}isPlaying = !isPlaying;}playButton.addEventListener('click', togglePlayPause);pauseButton.addEventListener('click', togglePlayPause);prevButton.addEventListener('click', function() {currentTrackIndex = (currentTrackIndex - 1 + playlist.querySelectorAll('li').length) % playlist.querySelectorAll('li').length;playTrack(currentTrackIndex);});nextButton.addEventListener('click', function() {currentTrackIndex = (currentTrackIndex + 1) % playlist.querySelectorAll('li').length;playTrack(currentTrackIndex);});playlist.addEventListener('click', function(event) {event.preventDefault();if (event.target.tagName === 'A') {const clickedIndex = Array.from(playlist.querySelectorAll('a')).indexOf(event.target);currentTrackIndex = clickedIndex;playTrack(clickedIndex);}});tracks.forEach((track, index) => {track.addEventListener('click', function() {playTrack(index);});});audioPlayer.addEventListener('timeupdate', function() {const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;progress.style.width = percent + '%';updateDurationDisplay();});audioPlayer.addEventListener('ended', function() {playNextTrack();});volumeSlider.addEventListener('input', function() {audioPlayer.volume = volumeSlider.value;});progressBar.addEventListener('mousedown', function(event) {isDragging = true;updateProgress(event);});document.addEventListener('mousemove', function(event) {if (isDragging) {updateProgress(event);}});document.addEventListener('mouseup', function() {isDragging = false;});function updateProgress(event) {const rect = progressBar.getBoundingClientRect();const offsetX = event.clientX - rect.left;const newPercent = (offsetX / rect.width) * 100;const newTime = (newPercent / 100) * audioPlayer.duration;audioPlayer.currentTime = newTime;}function playTrack(trackIndex) {const audioFile = playlist.querySelectorAll('a')[trackIndex].getAttribute('href');audioPlayer.src = audioFile;audioPlayer.play();isPlaying = true;playButton.style.display = 'none';pauseButton.style.display = 'inline-block';updateDurationDisplay();}function updateDurationDisplay() {if (!isNaN(audioPlayer.duration)) {const currentMinutes = Math.floor(audioPlayer.currentTime / 60);const currentSeconds = Math.floor(audioPlayer.currentTime % 60);const totalMinutes = Math.floor(audioPlayer.duration / 60);const totalSeconds = Math.floor(audioPlayer.duration % 60);const currentTimeString = `${currentMinutes}:${currentSeconds.toString().padStart(2, '0')}`;const totalTimeString = `${totalMinutes}:${totalSeconds.toString().padStart(2, '0')}`;durationDisplay.textContent = `${currentTimeString} / ${totalTimeString}`;} else {durationDisplay.textContent = '0:00 / 0:00';}}function playNextTrack() {currentTrackIndex = (currentTrackIndex + 1) % playlist.querySelectorAll('li').length;playTrack(currentTrackIndex);}
</script>