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
});
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)
if (playerContainer.hidden) {
playerContainer.removeAttribute('hidden');
}
});
});
// 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
? ''
: '';
}
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);
});
});