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) 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); }); });