4523 подписчика
<script>
const links = document.querySelectorAll('.js-audio-link');
const player = document.getElementById('audioPlayer');
const trackNameDisplay = document.getElementById('currentTrackName');
const artwork = document.querySelector('.artwork');
function playAudio(url, name) {
if (!url || url.trim() === '') return;
// Меняем источник аудио
player.src = url;
// Обновляем название трека
trackNameDisplay.textContent = name;
// Небольшая задержка перед воспроизведением, чтобы браузер успел подготовиться
setTimeout(() => {
player.play().catch(error => {
console.log("Автовоспроизведение заблокировано браузером:", error);
});
}, 300);
// Управление активными состояниями кнопок
links.forEach(l => l.classList.remove('active-track'));
this.classList.add('active-track');
}
links.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
const fileUrl = this.getAttribute('data-src');
const trackTitle = this.innerText;
if (fileUrl) {
playAudio.call(this, fileUrl, trackTitle);
}
});
});
/*
Событие ended срабатывает, когда трек доиграл до конца.
Сбрасываем активную кнопку, но оставляем файл загруженным,
чтобы пользователь мог нажать Play еще раз.
*/
player.addEventListener('ended', function() {
links.forEach(l => l.classList.remove('active-track'));
});
/*
Если пользователь сменил трек вручную через системный интерфейс плеера,
обновим активную ссылку в списке.
*/
player.addEventListener('play', function() {
const currentSrc = player.getAttribute('src');
links.forEach(l => {
if (l.getAttribute('data-src') === currentSrc) {
l.classList.add('active-track');
} else {
l.classList.remove('active-track');
}
});
});
</script>
1 минута
Вчера