[html]<!--HTML-->
<div class="fon">
<div class="bac">
<div class="namet">
<div class="bacname"><center>Please Don't Stop the Music</center></div></div></div><br/><br/>
<center><b></center></div></div>[/html]
Радио The Haze
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться117.09.2025 03:31:16
- хранитель города
- Сообщений: 290
- Уважение: +1130
Поделиться217.09.2025 03:33:17
- хранитель города
- Сообщений: 290
- Уважение: +1130
Код:
<!--HTML-->
<style>
.album-container {
width: 800px;
margin: 20px auto;
background: linear-gradient(135deg, var(--dark500) 0%, var(--dark600) 100%);
border-radius: 7px;
overflow: hidden;
box-shadow: 0 05px 10px rgba(0, 0, 0, 0.5);
}
.album-header {
position: relative;
height: 180px;
background: linear-gradient(45deg, var(--accent), var(--links));
/* большая картинка на задний фон для шапки */
background-image: url("https://upforme.ru/uploads/001b/d4/18/624/902136.gif");
background-size: cover;
background-position: center;
background-blend-mode: multiply;
display: flex;
align-items: center;
padding: 40px;
}
.album-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-transform: none !important;
/* цвет которым затемняется фон полупрозрачные */
background: linear-gradient(135deg, rgba(114, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.album-cover {
position: relative;
z-index: 2;
width: 200px;
height: 200px;
border-radius: 7px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
margin-right: 30px;
}
.album-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.album-info {
position: relative;
z-index: 2;
flex: 1;
}
.album-title {
font-family: var(--font-accent), var(--font), sans-serif;
font-size: 42px;
font-weight: 700;
color: #ffffff;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.album-artist {
font-size: 24px;
color: var(--beg100);
margin-bottom: 15px;
opacity: 0.9;
}
.album-description {
font-size: 18px;
/* цвет текста в шапке */
color: #e2dcd8;
line-height: 1.5;
max-width: 700px;
}
.player-section {
padding: 30px 40px;
/* цвет заднего фона плеера */
background: #1a0000;
/* граница между плеером и шапкой */
border-top: 1px solid #4e0202;
}
.now-playing {
display: flex;
align-items: center;
margin-bottom: 25px;
padding: 20px;
/* цвет заднего фона текущего трека */
background: #000000;
border-radius: 7px;
/* граница вокруг текущего трека */
border: 1px solid #4e0202;
}
.now-playing-cover {
width: 60px;
height: 60px;
border-radius: 3px;
overflow: hidden;
margin-right: 15px;
background: #4e0202;
}
.now-playing-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.now-playing-info {
flex: 1;
}
.now-playing-title {
font-size: 18px;
font-weight: 500;
/* цвет названия текущего трека */
color: #e2dcd8;
margin-bottom: 5px;
}
.now-playing-artist {
font-size: 14px;
/* цвет исполнителя текущего трека */
color: #beb8b4;
}
.player-controls {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.control-btn {
width: 45px;
height: 45px;
border: none;
/* цвет кнопок управления плеером: пауза, следующий трек и так далее */
background: #000000;
color: white;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}
.control-btn:hover {
/* цвет кнопок управления плеером при наведении */
background: #4e0202;
transform: scale(1.05);
}
.play-btn {
width: 60px;
height: 60px;
font-size: 20px;
}
#shuffle-btn,
#repeat-btn {
opacity: 0.6;
transition: opacity 0.3s ease;
}
#shuffle-btn.active,
#repeat-btn.active {
opacity: 1;
}
.progress-container {
flex: 1;
margin: 0 15px;
}
.progress-info {
display: flex;
justify-content: space-between;
font-size: 12px;
/* цвет текстов для времени прогресса: 0:00 и так далее */
color: #e2dcd8;
margin-bottom: 5px;
}
.progress-bar-container {
position: relative;
height: 6px;
/* цвет пустого времени прогресса */
background: #000000;
border-radius: 3px;
cursor: pointer;
}
.progress-barr {
height: 100%;
/* цвет заполненного времени прогресса */
background: linear-gradient(90deg, rgba(140, 10, 10, 0.8) 0%, rgba(32, 21, 21, 0.8) 100%);
border-radius: 3px;
width: 0%;
transition: width 0.1s ease;
}
.volume-container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
}
.volume-sliderr {
appearance: none !important;
flex: 1;
height: 1px !important;
/* цвет пустой шкалы времени */
background: #000000 !important;
border-radius: 3px !important;
cursor: pointer !important;
position: relative !important;
border: none !important;
padding: 0 !important;
max-width: 50px !important;
outline: none !important;
min-height: 3px !important;
}
.volume-sliderr::-webkit-slider-thumb {
appearance: none !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
/* цвет ползунка громкости */
background: rgb(178, 176, 174) !important;
cursor: pointer;
border: none;
}
.volume-sliderr::-moz-range-thumb {
appearance: none !important;
width: 5px;
height: 5px;
border-radius: 50%;
/* цвет ползунка громкости */
background: var(--text3);
cursor: pointer;
border: none;
}
#tracklist-container {
max-height: 159px;
overflow-y: auto;
padding-right: 20px;
/* цвет скроллбара */
scrollbar-color: #4e0202 #000000;
}
.tracklist-header {
font-size: 20px !important;
font-weight: 500 !important;
/* цвет текста заголовка треков */
color: #e2dcd8 !important;
margin-bottom: 15px !important;
padding-bottom: 10px !important;
background: transparent !important;
top: 0 !important;
position: relative !important;
border-radius: 0 !important;
border: none !important;
border-bottom: 1px solid #4e0202 !important;
}
.track-item {
display: flex;
align-items: center;
padding: 12px 15px;
margin-bottom: 8px;
/* цвет заднего фона треков */
background: #000000;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.track-item:hover {
/* цвет заднего фона трека при наведении */
background: #1a0000;
/* цвет границы трека при наведении */
border-color: #4e0202;
}
.track-item.active {
/* цвет заднего фона активного трека */
background: linear-gradient(135deg, rgba(82, 14, 24, 0.2), rgba(0, 0, 0, 0.2));
/* цвет границы активного трека */
border-color: #4e0202;
}
.track-number {
width: 20px;
font-size: 14px;
/* цвет номера трека */
color: #e2dcd8;
text-align: center;
}
.track-info {
flex: 1;
margin-left: 15px;
}
.track-title {
font-size: 12px;
/* цвет названия трека */
color: #e2dcd8;
margin-bottom: 3px;
}
.track-artist {
font-size: 10px;
/* цвет исполнителя трека */
color: #e2dcd8;
}
.track-play-btn {
width: 35px;
height: 35px;
border: none;
background: var(--accent);
color: white;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
opacity: 0;
transition: all 0.3s ease;
}
.track-item:hover .track-play-btn {
opacity: 1;
}
.track-item.active .track-play-btn {
opacity: 1;
}
.audio-element {
display: none;
}
</style>
<div class="album-container">
<div class="album-header">
<div class="album-cover">
<img
src="https://upforme.ru/uploads/001b/d4/18/624/873698.gif"
alt="Album Cover"
/>
</div>
<div class="album-info">
<h1 class="album-title">Night Vibes</h1>
<h2 class="album-artist">Various Artists</h2>
<p class="album-description">
<b>ARE YOU AFRAID OF THE DARK? 01.01.2025 - 31.01.2025</b><br>
Стук барабанов словно запутался в складках ночи. Он раздается глухо сквозь толстую ткань шатра. Ты мог бы подумать, что это просто ветер играет с проводами, но ритм слишком ровный. Чуть глуховатый, мягкий - удары по натянутой коже. Он проходит сквозь мостовую, отдается в плоть домов. Он не нарушает тишину, он становится ее частью, сливается с шагами, с ветром, с отдаленными голосами. Он не требует внимания, но стоит один раз его заметить, как больше не сможешь игнорировать. Он теплый и густой, как дыхание огромного зверя, который пока еще спит, но уже все слышит. Вдалеке, за поворотом, вспыхивает слабый свет — не фонарь, не свеча, что-то большее, переливчатое, будто фосфоресцирующее свечение афиши, проступающее сквозь слой свежей краски. Оно дрожит, как отголосок сцены, которая уже погасла, но еще помнит тепло прожекторных огней.
</p>
</div>
</div>
<div class="player-section">
<div class="now-playing">
<div class="now-playing-cover">
<img
id="current-cover"
src="https://upforme.ru/uploads/001b/d4/18/624/999991.gif"
alt="Current Track"
/>
</div>
<div class="now-playing-info">
<div class="now-playing-title" id="current-title">Выберите трек</div>
<div class="now-playing-artist" id="current-artist">Исполнитель</div>
</div>
</div>
<div class="player-controls">
<button class="control-btn" id="prev-btn">⏮</button>
<button class="control-btn play-btn" id="play-btn">▶</button>
<button class="control-btn" id="next-btn">⏭</button>
<button style="display: none" class="control-btn" id="shuffle-btn">��</button>
<button style="display: none" class="control-btn" id="repeat-btn">��</button>
<div class="progress-container">
<div class="progress-info">
<span id="current-time">0:00</span>
<span id="total-time">0:00</span>
</div>
<div class="progress-bar-container" id="progress-container">
<div class="progress-barr" id="progress-barr"></div>
</div>
</div>
<div class="volume-container">
<span>vol</span>
<input
type="range"
class="volume-sliderr"
id="volume-sliderr"
min="0"
max="1"
step="0.01"
value="0.7"
/>
</div>
</div>
<div class="tracklist">
<h3 class="tracklist-header">ARE YOU AFRAID OF THE DARK?</h3>
<div id="tracklist-container"></div>
</div>
<audio class="audio-element" id="audio-player">
<source src="" type="audio/mpeg" />
Ваш браузер не поддерживает аудио элемент.
</audio>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Плейлист с треками
const playlist = [
{
id: 1,
title: "БДГ",
artist: "DETI NOSFERATU",
src: "https://forumstatic.ru/files/001b/d4/18/88644.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 2,
title: "Daniela",
artist: "Hallow in the House",
src: "https://forumstatic.ru/files/001b/d4/18/77142.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 3,
title: "LASCALA",
artist: "Манеж",
src: "https://forumstatic.ru/files/001b/d4/18/76420.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 4,
title: "Billie Eilish",
artist: "you should see me in a crown",
src: "https://forumstatic.ru/files/001b/d4/18/17911.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 5,
title: "Limp Bizkit",
artist: "Behind Blue Eyes",
src: "https://forumstatic.ru/files/001b/d4/18/57053.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 6,
title: "Placebo",
artist: "Every You Every Me",
src: "https://forumstatic.ru/files/001b/d4/18/81025.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 7,
title: "Muse",
artist: "Undisclosed Desires",
src: "https://forumstatic.ru/files/001b/d4/18/27020.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 8,
title: "Alex Clare",
artist: "Too Close",
src: "https://forumstatic.ru/files/001b/d4/18/74212.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 9,
title: "SOLLAR",
artist: "Cheat Code",
src: "https://forumstatic.ru/files/001b/d4/18/61735.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 10,
title: "Massive Attack",
artist: "Paradise Circus",
src: "https://forumstatic.ru/files/001b/d4/18/20060.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 11,
title: "Born To Be Wild",
artist: "J2 feat Blu Holliday",
src: "https://forumstatic.ru/files/001b/d4/18/83345.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 12,
title: "Imany",
artist: "All The Things She Said",
src: "https://forumstatic.ru/files/001b/d4/18/71797.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 13,
title: "2WEI feat. Edda Hayes",
artist: "Survivor",
src: "https://forumstatic.ru/files/001b/d4/18/48785.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 14,
title: "Phebe Starr",
artist: "ice tea liberace",
src: "https://forumstatic.ru/files/001b/d4/18/56523.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
{
id: 15,
title: "YUNGBLUD",
artist: "Die A Little",
src: "https://forumstatic.ru/files/001b/d4/18/53022.mp3",
cover: "https://upforme.ru/uploads/001b/d4/18/624/844446.gif"
},
];
// Переменные плеера
let currentTrackIndex = 0;
let isPlaying = false;
let isShuffled = false;
let isRepeated = false;
let shuffledPlaylist = [...playlist];
// Элементы DOM
const audio = document.getElementById("audio-player");
const playBtn = document.getElementById("play-btn");
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const shuffleBtn = document.getElementById("shuffle-btn");
const repeatBtn = document.getElementById("repeat-btn");
const progressBar = document.getElementById("progress-barr");
const progressContainer = document.getElementById("progress-container");
const volumeSlider = document.getElementById("volume-sliderr");
const currentTimeEl = document.getElementById("current-time");
const totalTimeEl = document.getElementById("total-time");
const currentTitle = document.getElementById("current-title");
const currentArtist = document.getElementById("current-artist");
const currentCover = document.getElementById("current-cover");
const tracklistContainer = document.getElementById("tracklist-container");
// Инициализация плеера
function init() {
renderTracklist();
loadTrack(0);
setupEventListeners();
// Сразу показываем информацию о первом треке
currentTitle.textContent = playlist[0].title;
currentArtist.textContent = playlist[0].artist;
currentCover.src = playlist[0].cover;
// Принудительная установка громкости
setTimeout(() => {
if (volumeSlider && audio) {
audio.volume = parseFloat(volumeSlider.value);
console.log("Initial volume set to:", audio.volume);
}
}, 500);
}
// Отрисовка списка треков
function renderTracklist() {
if (!tracklistContainer) {
console.error("tracklistContainer not found!");
return;
}
tracklistContainer.innerHTML = "";
playlist.forEach((track, index) => {
const trackElement = document.createElement("div");
trackElement.className = "track-item";
trackElement.dataset.index = index;
trackElement.innerHTML = `
<div class="track-number">${index + 1}</div>
<div class="track-info">
<div class="track-title">${track.title}</div>
<div class="track-artist">${track.artist}</div>
</div>
`;
trackElement.addEventListener("click", (e) => {
playTrack(index);
});
tracklistContainer.appendChild(trackElement);
});
// Помечаем первый трек как активный
if (tracklistContainer.children.length > 0) {
tracklistContainer.children[0].classList.add("active");
}
// Принудительная перерисовка
tracklistContainer.style.display = "none";
tracklistContainer.offsetHeight;
tracklistContainer.style.display = "block";
}
// Загрузка трека
function loadTrack(index) {
const track = playlist[index];
if (!track) return;
// Сброс прогресса
if (progressBar) {
progressBar.style.width = "0%";
}
if (currentTimeEl) {
currentTimeEl.textContent = "0:00";
}
if (totalTimeEl) {
totalTimeEl.textContent = "0:00";
}
audio.src = track.src;
currentTitle.textContent = track.title;
currentArtist.textContent = track.artist;
currentCover.src = track.cover;
updateActiveTrack(index);
currentTrackIndex = index;
// Принудительная загрузка метаданных
audio.load();
}
// Обновление активного трека в списке
function updateActiveTrack(index) {
const trackItems = document.querySelectorAll(".track-item");
trackItems.forEach((item, i) => {
if (i === index) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
// Воспроизведение/пауза
function togglePlay() {
if (isPlaying) {
audio.pause();
} else {
audio
.play()
.then(() => {
console.log("Audio play promise resolved");
})
.catch((error) => {
console.error("Audio play failed:", error);
});
}
}
// Воспроизведение конкретного трека
function playTrack(index) {
loadTrack(index);
audio
.play()
.then(() => {
console.log("playTrack: Audio play promise resolved");
})
.catch((error) => {
console.error("playTrack: Audio play failed:", error);
});
}
// Следующий трек
function nextTrack() {
if (isShuffled) {
const currentInShuffled = shuffledPlaylist.findIndex(
(track) => track.id === playlist[currentTrackIndex].id
);
const nextIndex = (currentInShuffled + 1) % shuffledPlaylist.length;
const nextTrack = shuffledPlaylist[nextIndex];
const nextTrackIndex = playlist.findIndex((track) => track.id === nextTrack.id);
console.log("Next track index (shuffled):", nextTrackIndex);
playTrack(nextTrackIndex);
} else {
const nextIndex = (currentTrackIndex + 1) % playlist.length;
console.log("Next track index:", nextIndex);
playTrack(nextIndex);
}
}
// Предыдущий трек
function prevTrack() {
if (isShuffled) {
const currentInShuffled = shuffledPlaylist.findIndex(
(track) => track.id === playlist[currentTrackIndex].id
);
const prevIndex = currentInShuffled === 0 ? shuffledPlaylist.length - 1 : currentInShuffled - 1;
const prevTrack = shuffledPlaylist[prevIndex];
const prevTrackIndex = playlist.findIndex((track) => track.id === prevTrack.id);
console.log("Prev track index (shuffled):", prevTrackIndex);
playTrack(prevTrackIndex);
} else {
const prevIndex = currentTrackIndex === 0 ? playlist.length - 1 : currentTrackIndex - 1;
console.log("Prev track index:", prevIndex);
playTrack(prevIndex);
}
}
// Переключение shuffle
function toggleShuffle() {
isShuffled = !isShuffled;
if (shuffleBtn) {
shuffleBtn.style.opacity = isShuffled ? "1" : "0.6";
}
if (isShuffled) {
shuffledPlaylist = [...playlist].sort(() => Math.random() - 0.5);
} else {
shuffledPlaylist = [...playlist];
}
}
// Переключение repeat
function toggleRepeat() {
isRepeated = !isRepeated;
if (repeatBtn) {
repeatBtn.style.opacity = isRepeated ? "1" : "0.6";
}
audio.loop = isRepeated;
}
// Форматирование времени
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, "0")}`;
}
// Обновление прогресс-бара
function updateProgress() {
if (audio.duration && !isNaN(audio.duration) && progressBar && currentTimeEl && totalTimeEl) {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = `${progress}%`;
console.log("progressBar", progressBar);
currentTimeEl.textContent = formatTime(audio.currentTime);
totalTimeEl.textContent = formatTime(audio.duration);
console.log(
`Progress: ${progress.toFixed(2)}%, Time: ${formatTime(audio.currentTime)}/${formatTime(
audio.duration
)}`
);
}
}
// Установка позиции воспроизведения
function setProgress(e) {
const rect = progressContainer.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const width = rect.width;
const duration = audio.duration;
if (duration) {
audio.currentTime = (clickX / width) * duration;
}
}
// Установка громкости
function setVolume() {
if (volumeSlider && audio) {
const volume = parseFloat(volumeSlider.value);
audio.volume = volume;
console.log(`Volume set to: ${volume}`);
}
}
// Настройка обработчиков событий
function setupEventListeners() {
// Кнопки управления
console.log("Setting up event listeners for buttons...");
if (playBtn) {
playBtn.addEventListener("click", () => {
console.log("Play button clicked");
togglePlay();
});
}
if (prevBtn) {
prevBtn.addEventListener("click", () => {
console.log("Prev button clicked");
prevTrack();
});
}
if (nextBtn) {
nextBtn.addEventListener("click", () => {
console.log("Next button clicked");
nextTrack();
});
}
if (shuffleBtn) {
shuffleBtn.addEventListener("click", () => {
console.log("Shuffle button clicked");
toggleShuffle();
});
}
if (repeatBtn) {
repeatBtn.addEventListener("click", () => {
console.log("Repeat button clicked");
toggleRepeat();
});
}
console.log("Button event listeners set up");
// Прогресс-бар
if (progressContainer) {
progressContainer.addEventListener("click", setProgress);
}
// Громкость
if (volumeSlider) {
volumeSlider.addEventListener("input", (e) => {
console.log("Volume slider changed to:", e.target.value);
setVolume();
});
volumeSlider.addEventListener("change", (e) => {
console.log("Volume slider change event:", e.target.value);
setVolume();
});
}
// События аудио
audio.addEventListener("loadedmetadata", () => {
console.log("Audio metadata loaded");
console.log("Duration:", audio.duration);
if (totalTimeEl && audio.duration && !isNaN(audio.duration)) {
totalTimeEl.textContent = formatTime(audio.duration);
}
});
audio.addEventListener("loadeddata", () => {
console.log("Audio data loaded");
if (totalTimeEl && audio.duration && !isNaN(audio.duration)) {
totalTimeEl.textContent = formatTime(audio.duration);
}
});
audio.addEventListener("canplay", () => {
console.log("Audio can play");
if (totalTimeEl && audio.duration && !isNaN(audio.duration)) {
totalTimeEl.textContent = formatTime(audio.duration);
}
});
audio.addEventListener("timeupdate", () => {
updateProgress();
});
audio.addEventListener("play", () => {
console.log("Audio play event fired");
isPlaying = true;
if (playBtn) playBtn.textContent = "⏸";
document.querySelectorAll(".track-play-btn").forEach((btn) => {
btn.textContent = "▶";
});
const activeTrack = document.querySelector(".track-item.active .track-play-btn");
if (activeTrack) activeTrack.textContent = "⏸";
console.log("Play button updated, isPlaying set to true");
});
audio.addEventListener("pause", () => {
console.log("Audio pause event fired");
isPlaying = false;
if (playBtn) playBtn.textContent = "▶";
document.querySelectorAll(".track-play-btn").forEach((btn) => {
btn.textContent = "▶";
});
console.log("Pause button updated, isPlaying set to false");
});
audio.addEventListener("ended", () => {
console.log("Audio ended event fired");
console.log("Is repeated:", isRepeated);
if (!isRepeated) {
nextTrack();
}
});
audio.addEventListener("error", (e) => {
console.error("Audio error:", e);
console.error("Audio error code:", audio.error);
});
audio.addEventListener("loadstart", () => {
console.log("Audio load started");
});
audio.addEventListener("progress", () => {
console.log("Audio loading progress");
});
audio.addEventListener("durationchange", () => {
console.log("Duration changed:", audio.duration);
if (totalTimeEl && audio.duration && !isNaN(audio.duration)) {
totalTimeEl.textContent = formatTime(audio.duration);
}
});
// Установка начальной громкости
setTimeout(() => {
setVolume();
}, 100);
}
init();
});
</script>
Поделиться329.09.2025 12:57:49
- птср любовных битв
- ЛЗ: филипп башелье, 36
валя сказала,
что мне никто не нужен - плашка и иконка:
- Сообщений: 5211
- PST: 141 513,5/0 11.25,5/15
- Уважение: +15431
- MON: 5601
- рубашка:
Код:
<!--HTML-->
<style>
.nvx-album-container {
width: 800px;
margin: 20px auto;
background: linear-gradient(135deg, var(--dark500) 0%, var(--dark600) 100%);
border-radius: 7px;
overflow: hidden;
box-shadow: 0 05px 10px rgba(0, 0, 0, 0.5);
}
.nvx-album-header {
position: relative;
height: 180px;
background: linear-gradient(45deg, var(--accent), var(--links));
/* большая картинка на задний фон для шапки */
background-image: url("https://upforme.ru/uploads/001c/60/b1/2/183813.gif");
background-size: cover;
background-position: center;
background-blend-mode: multiply;
display: flex;
align-items: center;
padding: 40px;
}
.nvx-album-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-transform: none !important;
/* цвет которым затемняется фон полупрозрачные */
background: linear-gradient(135deg, rgba(179, 180, 181, 0.8) 0%, rgba(43, 33, 28, 0.8) 100%);
}
.nvx-album-cover {
position: relative;
z-index: 2;
width: 200px;
height: 200px;
border-radius: 7px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
margin-right: 30px;
}
.nvx-album-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nvx-album-info {
position: relative;
z-index: 2;
flex: 1;
}
.nvx-album-title {
font-family: var(--font-accent), var(--font), sans-serif;
font-size: 42px;
font-weight: 700;
color: #ffffff;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.nvx-album-artist {
font-size: 24px;
color: var(--beg100);
margin-bottom: 15px;
opacity: 0.9;
}
.nvx-album-description {
font-size: 18px;
/* цвет текста в шапке */
color: #abacab;
line-height: 1.5;
max-width: 700px;
}
.nvx-player-section {
padding: 30px 40px;
/* цвет заднего фона плеера */
background: #413b38;
/* граница между плеером и шапкой */
border-top: 1px solid #2e2622;
}
.nvx-now-playing {
display: flex;
align-items: center;
margin-bottom: 25px;
padding: 20px;
/* цвет заднего фона текущего трека */
background: #2e2622;
border-radius: 7px;
/* граница вокруг текущего трека */
border: 1px solid #909190;
}
.nvx-now-playing-cover {
width: 60px;
height: 60px;
border-radius: 3px;
overflow: hidden;
margin-right: 15px;
background: #2e2622;
}
.nvx-now-playing-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nvx-now-playing-info {
flex: 1;
}
.nvx-now-playing-title {
font-size: 18px;
font-weight: 500;
/* цвет названия текущего трека */
color: #abacab;
margin-bottom: 5px;
}
.nvx-now-playing-artist {
font-size: 14px;
/* цвет исполнителя текущего трека */
color: #909090;
}
.nvx-player-controls {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.nvx-control-btn {
width: 45px;
height: 45px;
border: none;
/* цвет кнопок управления плеером: пауза, следующий трек и так далее */
background: #2e2622;
color: #abacab;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}
.nvx-control-btn:hover {
/* цвет кнопок управления плеером при наведении */
background: #4e4641;
transform: scale(1.05);
}
.nvx-play-btn {
width: 60px;
height: 60px;
font-size: 20px;
}
#nvx-shuffle-btn,
#nvx-repeat-btn {
opacity: 0.6;
transition: opacity 0.3s ease;
}
#nvx-shuffle-btn.active,
#nvx-repeat-btn.active {
opacity: 1;
}
.nvx-progress-container {
flex: 1;
margin: 0 15px;
}
.nvx-progress-info {
display: flex;
justify-content: space-between;
font-size: 12px;
/* цвет текстов для времени прогресса: 0:00 и так далее */
color: #abacab;
margin-bottom: 5px;
}
.nvx-progress-bar-container {
position: relative;
height: 6px;
/* цвет пустого времени прогресса */
background: #2e2622;
border-radius: 3px;
cursor: pointer;
}
.nvx-progress-barr {
height: 100%;
/* цвет заполненного времени прогресса */
background: linear-gradient(90deg, rgba(130, 92, 67, 0.8) 0%, rgba(78, 70, 65, 0.8) 100%);
border-radius: 3px;
width: 0%;
transition: width 0.1s ease;
}
.nvx-volume-container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
}
.nvx-volume-sliderr {
appearance: none !important;
flex: 1;
height: 1px !important;
/* цвет пустой шкалы времени */
background: #2e2622 !important;
border-radius: 3px !important;
cursor: pointer !important;
position: relative !important;
border: none !important;
padding: 0 !important;
max-width: 50px !important;
outline: none !important;
min-height: 3px !important;
}
.nvx-volume-sliderr::-webkit-slider-thumb {
appearance: none !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
/* цвет ползунка громкости */
background: rgb(171, 172, 171) !important;
cursor: pointer;
border: none;
}
.nvx-volume-sliderr::-moz-range-thumb {
appearance: none !important;
width: 5px;
height: 5px;
border-radius: 50%;
/* цвет ползунка громкости */
background: #2e2622;
cursor: pointer;
border: none;
}
#nvx-tracklist-container {
max-height: 159px;
overflow-y: auto;
padding-right: 20px;
/* цвет скроллбара */
scrollbar-color: #2e2622 #413b38;
}
.nvx-tracklist-header {
font-size: 20px !important;
font-weight: 500 !important;
/* цвет текста заголовка треков */
color: #abacab !important;
margin-bottom: 15px !important;
padding-bottom: 10px !important;
background: transparent !important;
top: 0 !important;
position: relative !important;
border-radius: 0 !important;
border: none !important;
border-bottom: 1px solid #2e2622 !important;
}
.nvx-track-item {
display: flex;
align-items: center;
padding: 12px 15px;
margin-bottom: 8px;
/* цвет заднего фона треков */
background: #2e2622;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.nvx-track-item:hover {
/* цвет заднего фона трека при наведении */
background: #4e4641;
/* цвет границы трека при наведении */
border-color: #abacab;
}
.nvx-track-item.active {
/* цвет заднего фона активного трека */
background: linear-gradient(135deg, rgba(46, 38, 34, 0.2), rgba(113, 104, 99, 0.2));
/* цвет границы активного трека */
border-color: #abacab;
}
.nvx-track-number {
width: 20px;
font-size: 14px;
/* цвет номера трека */
color: #abacab;
text-align: center;
}
.nvx-track-info {
flex: 1;
margin-left: 15px;
}
.nvx-track-title {
font-size: 12px;
/* цвет названия трека */
color: #abacab;
margin-bottom: 3px;
}
.nvx-track-artist {
font-size: 10px;
/* цвет исполнителя трека */
color: #909090;
}
.nvx-track-play-btn {
width: 35px;
height: 35px;
border: none;
background: var(--accent);
color: white;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
opacity: 0;
transition: all 0.3s ease;
}
.nvx-track-item:hover .nvx-track-play-btn {
opacity: 1;
}
.nvx-track-item.active .nvx-track-play-btn {
opacity: 1;
}
.nvx-audio-element {
display: none;
}
</style>
<div class="nvx-album-container">
<div class="nvx-album-header">
<div class="nvx-album-cover">
<img
src="https://upforme.ru/uploads/001c/60/b1/2/606633.gif"
alt="Album Cover"
/>
</div>
<div class="nvx-album-info">
<h1 class="nvx-album-title">Night Vibes</h1>
<h2 class="nvx-album-artist">Various Artists</h2>
<p class="nvx-album-description">
<b>AUTUMN 2025 ON THE HAZE</b><br>
<i>Так осу, убив, держат в пальцах - "ужаль-ужаль".<br>
Так зареванными идут из кинотеатра.<br>
Так вступает осень — всегда с оркестра, как Фрэнк Синатра.</i><br>
Лист, оторвавшийся от ветки, не падает, а плывёт, как письмо без адресата, как мысль, освобождённая от вчерашнего. Он кружится в воздухе, и в этом танце не прощание — приглашение. Город просыпается в новом ритме: утро пахнет дымом и яблоками, воздух стал прозрачным, словно мир решил говорить откровенно. Каждый шаг по шуршащему ковру — шорох обновления. Даже старые дома, облупленные и молчаливые, будто выпрямились, чтобы встретить перемены. Осень — это не финал, ведь с первой листвой, что коснулась земли, жизнь не уходит, она делает вдох, чтоб начаться заново.
</p>
</div>
</div>
<div class="nvx-player-section">
<div class="nvx-now-playing">
<div class="nvx-now-playing-cover">
<img
id="nvx-current-cover"
src="https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
alt="Current Track"
/>
</div>
<div class="nvx-now-playing-info">
<div class="nvx-now-playing-title" id="nvx-current-title">Выберите трек</div>
<div class="nvx-now-playing-artist" id="nvx-current-artist">Исполнитель</div>
</div>
</div>
<div class="nvx-player-controls">
<button class="nvx-control-btn" id="nvx-prev-btn">⏮</button>
<button class="nvx-control-btn nvx-play-btn" id="nvx-play-btn">▶</button>
<button class="nvx-control-btn" id="nvx-next-btn">⏭</button>
<button style="display: none" class="nvx-control-btn" id="nvx-shuffle-btn">��</button>
<button style="display: none" class="nvx-control-btn" id="nvx-repeat-btn">��</button>
<div class="nvx-progress-container">
<div class="nvx-progress-info">
<span id="nvx-current-time">0:00</span>
<span id="nvx-total-time">0:00</span>
</div>
<div class="nvx-progress-bar-container" id="nvx-progress-container">
<div class="nvx-progress-barr" id="nvx-progress-barr"></div>
</div>
</div>
<div class="nvx-volume-container">
<span>vol</span>
<input
type="range"
class="nvx-volume-sliderr"
id="nvx-volume-sliderr"
min="0"
max="1"
step="0.01"
value="0.7"
/>
</div>
</div>
<div class="nvx-tracklist">
<h3 class="nvx-tracklist-header">AUTUMN 2025 ON THE HAZE</h3>
<div id="nvx-tracklist-container"></div>
</div>
<audio class="nvx-audio-element" id="nvx-audio-player">
<source src="" type="audio/mpeg" />
Ваш браузер не поддерживает аудио элемент.
</audio>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Плейлист с треками
const nvxPlaylist = [
{
id: 1,
title: "Possibility",
artist: "Lykke Li",
src: "https://forumstatic.ru/files/001c/60/b1/33267.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 2,
title: "Фонарь",
artist: "Бонд с кнопкой",
src: "https://forumstatic.ru/files/001c/60/b1/87854.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 3,
title: "Eyes On Fire",
artist: "Blue Foundation",
src: "https://forumstatic.ru/files/001c/60/b1/64470.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 4,
title: "Sailor Song",
artist: "Gigi Perez",
src: "https://forumstatic.ru/files/001c/60/b1/91455.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 5,
title: "we fell in love in october",
artist: "girl in red",
src: "https://forumstatic.ru/files/001c/60/b1/27704.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 6,
title: "Who Is She",
artist: "I MONSTER",
src: "https://forumstatic.ru/files/001c/60/b1/10146.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 7,
title: "Cigarette Lighter",
artist: "Cigarette Lighter",
src: "https://forumstatic.ru/files/001c/60/b1/97273.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 8,
title: "Минута",
artist: "Минута",
src: "https://forumstatic.ru/files/001c/60/b1/21360.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 9,
title: "Фонари",
artist: "ГОРОД 312",
src: "https://forumstatic.ru/files/001c/60/b1/32014.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 10,
title: "The Taste Of Blood",
artist: "The Taste Of Blood",
src: "https://forumstatic.ru/files/001c/60/b1/67601.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 11,
title: "Сентябрь",
artist: "Stigmata",
src: "https://forumstatic.ru/files/001c/60/b1/97718.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 12,
title: "Love is a mental suicide",
artist: "Selofan",
src: "https://forumstatic.ru/files/001c/60/b1/98446.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 13,
title: "insomniac (feat. chakra efendi)",
artist: "memo boy",
src: "https://forumstatic.ru/files/001c/60/b1/98556.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 14,
title: "Shes My Witch",
artist: "Kip Tyler",
src: "https://forumstatic.ru/files/001c/60/b1/70439.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 15,
title: "Running Up That Hill",
artist: "Kate Bush",
src: "https://forumstatic.ru/files/001c/60/b1/69777.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 16,
title: "Autumn Leaves",
artist: "Frank Sinatra",
src: "https://forumstatic.ru/files/001c/60/b1/51321.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 17,
title: "We Found Love feat. Tiffany Aris",
artist: "2WEI, Ali Christenhusz",
src: "https://forumstatic.ru/files/001c/60/b1/26306.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 18,
title: "Cockiness",
artist: "Rihanna",
src: "https://forumstatic.ru/files/001c/60/b1/30259.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 19,
title: "Cry Me A River",
artist: "Justin Timberlake",
src: "https://forumstatic.ru/files/001c/60/b1/17553.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 20,
title: "Into The Woods",
artist: "Pumarosa",
src: "https://forumstatic.ru/files/001c/60/b1/58301.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 21,
title: "Paralyzed",
artist: "Caliban",
src: "https://forumstatic.ru/files/001c/60/b1/87474.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 22,
title: "Sun Goes Down",
artist: "The Futureheads",
src: "https://forumstatic.ru/files/001c/60/b1/13190.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 23,
title: "Hit The Road Jack",
artist: "2WEI",
src: "https://forumstatic.ru/files/001c/60/b1/69533.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 24,
title: "SMELLS LIKE TEEN SPIRIT",
artist: "Tommee Profitt x Fleurie",
src: "https://forumstatic.ru/files/001c/60/b1/55694.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 25,
title: "Feeling Good",
artist: "Apashe x Cherry Lena",
src: "https://forumstatic.ru/files/001c/60/b1/90651.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 26,
title: "Boom Boom",
artist: "2WEI",
src: "https://forumstatic.ru/files/001c/60/b1/11032.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 27,
title: "Crave",
artist: "POLINA",
src: "https://forumstatic.ru/files/001c/60/b1/74905.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 28,
title: "Champion",
artist: "Tommee Profitt (feat. Nicole Serrano)",
src: "https://forumstatic.ru/files/001c/60/b1/82782.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 29,
title: "Haunted",
artist: "From Fifty Shades of Grey",
src: "https://forumstatic.ru/files/001c/60/b1/24747.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 30,
title: "Rise Up",
artist: "2WEI & Edda Hayes",
src: "https://forumstatic.ru/files/001c/60/b1/65165.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 31,
title: "Believer (feat. Plexxaglass)",
artist: "Epic Pop",
src: "https://forumstatic.ru/files/001c/60/b1/91824.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 32,
title: "Beating Heart",
artist: "Beating Heart",
src: "https://forumstatic.ru/files/001c/60/b1/99591.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 33,
title: "Black Out Days",
artist: "Black Out Days",
src: "https://forumstatic.ru/files/001c/60/b1/94818.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 34,
title: "Sweater Weather",
artist: "The Neighbourhood",
src: "https://forumstatic.ru/files/001c/60/b1/15250.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 35,
title: "Until The World Goes Cold",
artist: "Trivium",
src: "https://forumstatic.ru/files/001c/60/b1/61088.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 36,
title: "Wait",
artist: "M83",
src: "https://forumstatic.ru/files/001c/60/b1/81105.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 37,
title: "Never Let Me Go",
artist: "Florence + The Machine",
src: "https://forumstatic.ru/files/001c/60/b1/73389.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 38,
title: "Elephant",
artist: "Freya Ridings",
src: "https://forumstatic.ru/files/001c/60/b1/21741.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 39,
title: "Me And The Devil",
artist: "Soap&Skin",
src: "https://forumstatic.ru/files/001c/60/b1/94493.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 40,
title: "Free",
artist: "Rumi & Jinu",
src: "https://forumstatic.ru/files/001c/60/b1/36040.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 41,
title: "Moje more",
artist: "Teya Dora",
src: "https://forumstatic.ru/files/001c/60/b1/10496.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 42,
title: "luminary",
artist: "joel sunny",
src: "https://forumstatic.ru/files/001c/60/b1/91977.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 43,
title: "No Angels",
artist: "Bastille",
src: "https://forumstatic.ru/files/001c/60/b1/92546.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 44,
title: "Rain",
artist: "MIKA",
src: "https://forumstatic.ru/files/001c/60/b1/11266.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 45,
title: "Dying",
artist: "Omar Rudberg",
src: "https://forumstatic.ru/files/001c/60/b1/35067.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 46,
title: "Roslyn",
artist: "Ben Pellow",
src: "https://forumstatic.ru/files/001c/60/b1/13907.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 47,
title: "Cold",
artist: "Aqualung & Lucy Schwartz",
src: "https://forumstatic.ru/files/001c/60/b1/91647.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 48,
title: "Another Love",
artist: "Tom Odell",
src: "https://forumstatic.ru/files/001c/60/b1/64309.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 49,
title: "Exile",
artist: "Taylor Swift (Feat. Bon Iver)",
src: "https://forumstatic.ru/files/001c/60/b1/43111.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 50,
title: "- heartbleed over coffee",
artist: "Alana Hil",
src: "https://forumstatic.ru/files/001c/60/b1/69858.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 51,
title: "Je te laisserai des mots",
artist: "Patrick Watson",
src: "https://forumstatic.ru/files/001c/60/b1/96860.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 52,
title: "Video Games",
artist: "Lana Del Rey",
src: "https://forumstatic.ru/files/001c/60/b1/14806.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 53,
title: "Fade Into You",
artist: "Mazzy Star",
src: "https://forumstatic.ru/files/001c/60/b1/43180.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 54,
title: "My Love Mine All Mine",
artist: "Mitski",
src: "https://forumstatic.ru/files/001c/60/b1/54644.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 55,
title: "Lovers Rock",
artist: "Lovers Rock",
src: "https://forumstatic.ru/files/001c/60/b1/22768.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 56,
title: "End of Beginning",
artist: "Djo",
src: "https://forumstatic.ru/files/001c/60/b1/53920.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 57,
title: "doomsday",
artist: "Lizzy McAlpine",
src: "https://forumstatic.ru/files/001c/60/b1/81085.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 58,
title: "On Melancholy Hill",
artist: "Gorillaz",
src: "https://forumstatic.ru/files/001c/60/b1/13994.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 59,
title: "American Funeral",
artist: "Joseph Angel",
src: "https://forumstatic.ru/files/001c/60/b1/49653.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 60,
title: "Too Late For Lullabies",
artist: "James Morrison",
src: "https://forumstatic.ru/files/001c/60/b1/65326.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 61,
title: "Flames",
artist: "Bonus Track",
src: "https://forumstatic.ru/files/001c/60/b1/60565.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 62,
title: "Natural Blues",
artist: "Natural Blues",
src: "https://forumstatic.ru/files/001c/60/b1/37764.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 63,
title: "Nightcall",
artist: "London Grammar",
src: "https://forumstatic.ru/files/001c/60/b1/45225.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 64,
title: "Blinding Lights",
artist: "X Ambassadors",
src: "https://forumstatic.ru/files/001c/60/b1/75028.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 65,
title: "The Scientist",
artist: "coldplay",
src: "https://forumstatic.ru/files/001c/60/b1/35527.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 66,
title: "Hell",
artist: "Jordan Max",
src: "https://forumstatic.ru/files/001c/60/b1/68875.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 67,
title: "daylight",
artist: "david kushner",
src: "https://forumstatic.ru/files/001c/60/b1/35493.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 68,
title: "Make It Lower",
artist: "Carpetman",
src: "https://forumstatic.ru/files/001c/60/b1/53616.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 69,
title: "You",
artist: "You",
src: "https://forumstatic.ru/files/001c/60/b1/26818.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 70,
title: "Dig",
artist: "Alex Who",
src: "https://forumstatic.ru/files/001c/60/b1/85647.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 71,
title: "Cant Take My Eyes Off You",
artist: "Engelbert Humperdinck",
src: "https://forumstatic.ru/files/001c/60/b1/67710.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 72,
title: "Time",
artist: "Inception Main Theme Piano",
src: "https://forumstatic.ru/files/001c/60/b1/36941.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 73,
title: "Ordinary",
artist: "Alex Warren",
src: "https://forumstatic.ru/files/001c/60/b1/83939.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 74,
title: "Dance For Me Wallis",
artist: "Abel Korzeniowski",
src: "https://forumstatic.ru/files/001c/60/b1/25073.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 75,
title: "Anything For You",
artist: "Ledisi",
src: "https://forumstatic.ru/files/001c/60/b1/22987.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 76,
title: "Damien Escobar",
artist: "Love Notes",
src: "https://forumstatic.ru/files/001c/60/b1/31685.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 77,
title: "холодно",
artist: "холодно",
src: "https://forumstatic.ru/files/001c/60/b1/38298.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 78,
title: "Интроверт",
artist: "NIZKIZ",
src: "https://forumstatic.ru/files/001c/60/b1/91480.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 79,
title: "Other People",
artist: "LP",
src: "https://forumstatic.ru/files/001c/60/b1/11302.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 80,
title: "Ливни",
artist: "Ливни",
src: "https://forumstatic.ru/files/001c/60/b1/83664.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 81,
title: "Knockin On Heavens Door",
artist: "Bob Dylan",
src: "https://forumstatic.ru/files/001c/60/b1/26043.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 82,
title: "Song For Zula",
artist: "Phosphorescent",
src: "https://forumstatic.ru/files/001c/60/b1/39801.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
{
id: 83,
title: "Sweet Dreams, TN",
artist: "The Last Shadow Puppets",
src: "https://forumstatic.ru/files/001c/60/b1/27183.mp3",
cover: "https://upforme.ru/uploads/001c/60/b1/2/511982.gif"
},
];
// Переменные плеера
let nvxCurrentTrackIndex = 0;
let nvxIsPlaying = false;
let nvxIsShuffled = false;
let nvxIsRepeated = false;
let nvxShuffledPlaylist = [...nvxPlaylist];
// Элементы DOM
const nvxAudio = document.getElementById("nvx-audio-player");
const nvxPlayBtn = document.getElementById("nvx-play-btn");
const nvxPrevBtn = document.getElementById("nvx-prev-btn");
const nvxNextBtn = document.getElementById("nvx-next-btn");
const nvxShuffleBtn = document.getElementById("nvx-shuffle-btn");
const nvxRepeatBtn = document.getElementById("nvx-repeat-btn");
const nvxProgressBar = document.getElementById("nvx-progress-barr");
const nvxProgressContainer = document.getElementById("nvx-progress-container");
const nvxVolumeSlider = document.getElementById("nvx-volume-sliderr");
const nvxCurrentTimeEl = document.getElementById("nvx-current-time");
const nvxTotalTimeEl = document.getElementById("nvx-total-time");
const nvxCurrentTitle = document.getElementById("nvx-current-title");
const nvxCurrentArtist = document.getElementById("nvx-current-artist");
const nvxCurrentCover = document.getElementById("nvx-current-cover");
const nvxTracklistContainer = document.getElementById("nvx-tracklist-container");
// Инициализация плеера
function nvxInit() {
nvxRenderTracklist();
nvxLoadTrack(0);
nvxSetupEventListeners();
// Сразу показываем информацию о первом треке
nvxCurrentTitle.textContent = nvxPlaylist[0].title;
nvxCurrentArtist.textContent = nvxPlaylist[0].artist;
nvxCurrentCover.src = nvxPlaylist[0].cover;
// Принудительная установка громкости
setTimeout(() => {
if (nvxVolumeSlider && nvxAudio) {
nvxAudio.volume = parseFloat(nvxVolumeSlider.value);
console.log("Initial volume set to:", nvxAudio.volume);
}
}, 500);
}
// Отрисовка списка треков
function nvxRenderTracklist() {
if (!nvxTracklistContainer) {
console.error("tracklistContainer not found!");
return;
}
nvxTracklistContainer.innerHTML = "";
nvxPlaylist.forEach((track, index) => {
const trackElement = document.createElement("div");
trackElement.className = "nvx-track-item";
trackElement.dataset.index = index;
trackElement.innerHTML = `
<div class="nvx-track-number">${index + 1}</div>
<div class="nvx-track-info">
<div class="nvx-track-title">${track.title}</div>
<div class="nvx-track-artist">${track.artist}</div>
</div>
`;
trackElement.addEventListener("click", (e) => {
nvxPlayTrack(index);
});
nvxTracklistContainer.appendChild(trackElement);
});
// Помечаем первый трек как активный
if (nvxTracklistContainer.children.length > 0) {
nvxTracklistContainer.children[0].classList.add("active");
}
// Принудительная перерисовка
nvxTracklistContainer.style.display = "none";
nvxTracklistContainer.offsetHeight;
nvxTracklistContainer.style.display = "block";
}
// Загрузка трека
function nvxLoadTrack(index) {
const track = nvxPlaylist[index];
if (!track) return;
// Сброс прогресса
if (nvxProgressBar) {
nvxProgressBar.style.width = "0%";
}
if (nvxCurrentTimeEl) {
nvxCurrentTimeEl.textContent = "0:00";
}
if (nvxTotalTimeEl) {
nvxTotalTimeEl.textContent = "0:00";
}
nvxAudio.src = track.src;
nvxCurrentTitle.textContent = track.title;
nvxCurrentArtist.textContent = track.artist;
nvxCurrentCover.src = track.cover;
nvxUpdateActiveTrack(index);
nvxCurrentTrackIndex = index;
// Принудительная загрузка метаданных
nvxAudio.load();
}
// Обновление активного трека в списке
function nvxUpdateActiveTrack(index) {
const trackItems = document.querySelectorAll(".nvx-track-item");
trackItems.forEach((item, i) => {
if (i === index) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
// Воспроизведение/пауза
function nvxTogglePlay() {
if (nvxIsPlaying) {
nvxAudio.pause();
} else {
nvxAudio
.play()
.then(() => {
console.log("Audio play promise resolved");
})
.catch((error) => {
console.error("Audio play failed:", error);
});
}
}
// Воспроизведение конкретного трека
function nvxPlayTrack(index) {
nvxLoadTrack(index);
nvxAudio
.play()
.then(() => {
console.log("playTrack: Audio play promise resolved");
})
.catch((error) => {
console.error("playTrack: Audio play failed:", error);
});
}
// Следующий трек
function nvxNextTrack() {
if (nvxIsShuffled) {
const currentInShuffled = nvxShuffledPlaylist.findIndex(
(track) => track.id === nvxPlaylist[nvxCurrentTrackIndex].id
);
const nextIndex = (currentInShuffled + 1) % nvxShuffledPlaylist.length;
const nextTrack = nvxShuffledPlaylist[nextIndex];
const nextTrackIndex = nvxPlaylist.findIndex((track) => track.id === nextTrack.id);
console.log("Next track index (shuffled):", nextTrackIndex);
nvxPlayTrack(nextTrackIndex);
} else {
const nextIndex = (nvxCurrentTrackIndex + 1) % nvxPlaylist.length;
console.log("Next track index:", nextIndex);
nvxPlayTrack(nextIndex);
}
}
// Предыдущий трек
function nvxPrevTrack() {
if (nvxIsShuffled) {
const currentInShuffled = nvxShuffledPlaylist.findIndex(
(track) => track.id === nvxPlaylist[nvxCurrentTrackIndex].id
);
const prevIndex = currentInShuffled === 0 ? nvxShuffledPlaylist.length - 1 : currentInShuffled - 1;
const prevTrack = nvxShuffledPlaylist[prevIndex];
const prevTrackIndex = nvxPlaylist.findIndex((track) => track.id === prevTrack.id);
console.log("Prev track index (shuffled):", prevTrackIndex);
nvxPlayTrack(prevTrackIndex);
} else {
const prevIndex = nvxCurrentTrackIndex === 0 ? nvxPlaylist.length - 1 : nvxCurrentTrackIndex - 1;
console.log("Prev track index:", prevIndex);
nvxPlayTrack(prevIndex);
}
}
// Переключение shuffle
function nvxToggleShuffle() {
nvxIsShuffled = !nvxIsShuffled;
if (nvxShuffleBtn) {
nvxShuffleBtn.style.opacity = nvxIsShuffled ? "1" : "0.6";
}
if (nvxIsShuffled) {
nvxShuffledPlaylist = [...nvxPlaylist].sort(() => Math.random() - 0.5);
} else {
nvxShuffledPlaylist = [...nvxPlaylist];
}
}
// Переключение repeat
function nvxToggleRepeat() {
nvxIsRepeated = !nvxIsRepeated;
if (nvxRepeatBtn) {
nvxRepeatBtn.style.opacity = nvxIsRepeated ? "1" : "0.6";
}
nvxAudio.loop = nvxIsRepeated;
}
// Форматирование времени
function nvxFormatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, "0")}`;
}
// Обновление прогресс-бара
function nvxUpdateProgress() {
if (nvxAudio.duration && !isNaN(nvxAudio.duration) && nvxProgressBar && nvxCurrentTimeEl && nvxTotalTimeEl) {
const progress = (nvxAudio.currentTime / nvxAudio.duration) * 100;
nvxProgressBar.style.width = `${progress}%`;
console.log("progressBar", nvxProgressBar);
nvxCurrentTimeEl.textContent = nvxFormatTime(nvxAudio.currentTime);
nvxTotalTimeEl.textContent = nvxFormatTime(nvxAudio.duration);
console.log(
`Progress: ${progress.toFixed(2)}%, Time: ${nvxFormatTime(nvxAudio.currentTime)}/${nvxFormatTime(
nvxAudio.duration
)}`
);
}
}
// Установка позиции воспроизведения
function nvxSetProgress(e) {
const rect = nvxProgressContainer.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const width = rect.width;
const duration = nvxAudio.duration;
if (duration) {
nvxAudio.currentTime = (clickX / width) * duration;
}
}
// Установка громкости
function nvxSetVolume() {
if (nvxVolumeSlider && nvxAudio) {
const volume = parseFloat(nvxVolumeSlider.value);
nvxAudio.volume = volume;
console.log(`Volume set to: ${volume}`);
}
}
// Настройка обработчиков событий
function nvxSetupEventListeners() {
// Кнопки управления
console.log("Setting up event listeners for buttons...");
if (nvxPlayBtn) {
nvxPlayBtn.addEventListener("click", () => {
console.log("Play button clicked");
nvxTogglePlay();
});
}
if (nvxPrevBtn) {
nvxPrevBtn.addEventListener("click", () => {
console.log("Prev button clicked");
nvxPrevTrack();
});
}
if (nvxNextBtn) {
nvxNextBtn.addEventListener("click", () => {
console.log("Next button clicked");
nvxNextTrack();
});
}
if (nvxShuffleBtn) {
nvxShuffleBtn.addEventListener("click", () => {
console.log("Shuffle button clicked");
nvxToggleShuffle();
});
}
if (nvxRepeatBtn) {
nvxRepeatBtn.addEventListener("click", () => {
console.log("Repeat button clicked");
nvxToggleRepeat();
});
}
console.log("Button event listeners set up");
// Прогресс-бар
if (nvxProgressContainer) {
nvxProgressContainer.addEventListener("click", nvxSetProgress);
}
// Громкость
if (nvxVolumeSlider) {
nvxVolumeSlider.addEventListener("input", (e) => {
console.log("Volume slider changed to:", e.target.value);
nvxSetVolume();
});
nvxVolumeSlider.addEventListener("change", (e) => {
console.log("Volume slider change event:", e.target.value);
nvxSetVolume();
});
}
// События аудио
nvxAudio.addEventListener("loadedmetadata", () => {
console.log("Audio metadata loaded");
console.log("Duration:", nvxAudio.duration);
if (nvxTotalTimeEl && nvxAudio.duration && !isNaN(nvxAudio.duration)) {
nvxTotalTimeEl.textContent = nvxFormatTime(nvxAudio.duration);
}
});
nvxAudio.addEventListener("loadeddata", () => {
console.log("Audio data loaded");
if (nvxTotalTimeEl && nvxAudio.duration && !isNaN(nvxAudio.duration)) {
nvxTotalTimeEl.textContent = nvxFormatTime(nvxAudio.duration);
}
});
nvxAudio.addEventListener("canplay", () => {
console.log("Audio can play");
if (nvxTotalTimeEl && nvxAudio.duration && !isNaN(nvxAudio.duration)) {
nvxTotalTimeEl.textContent = nvxFormatTime(nvxAudio.duration);
}
});
nvxAudio.addEventListener("timeupdate", () => {
nvxUpdateProgress();
});
nvxAudio.addEventListener("play", () => {
console.log("Audio play event fired");
nvxIsPlaying = true;
if (nvxPlayBtn) nvxPlayBtn.textContent = "⏸";
document.querySelectorAll(".nvx-track-play-btn").forEach((btn) => {
btn.textContent = "▶";
});
const activeTrack = document.querySelector(".nvx-track-item.active .nvx-track-play-btn");
if (activeTrack) activeTrack.textContent = "⏸";
console.log("Play button updated, isPlaying set to true");
});
nvxAudio.addEventListener("pause", () => {
console.log("Audio pause event fired");
nvxIsPlaying = false;
if (nvxPlayBtn) nvxPlayBtn.textContent = "▶";
document.querySelectorAll(".nvx-track-play-btn").forEach((btn) => {
btn.textContent = "▶";
});
console.log("Pause button updated, isPlaying set to false");
});
nvxAudio.addEventListener("ended", () => {
console.log("Audio ended event fired");
console.log("Is repeated:", nvxIsRepeated);
if (!nvxIsRepeated) {
nvxNextTrack();
}
});
nvxAudio.addEventListener("error", (e) => {
console.error("Audio error:", e);
console.error("Audio error code:", nvxAudio.error);
});
nvxAudio.addEventListener("loadstart", () => {
console.log("Audio load started");
});
nvxAudio.addEventListener("progress", () => {
console.log("Audio loading progress");
});
nvxAudio.addEventListener("durationchange", () => {
console.log("Duration changed:", nvxAudio.duration);
if (nvxTotalTimeEl && nvxAudio.duration && !isNaN(nvxAudio.duration)) {
nvxTotalTimeEl.textContent = nvxFormatTime(nvxAudio.duration);
}
});
// Установка начальной громкости
setTimeout(() => {
nvxSetVolume();
}, 100);
}
nvxInit();
});
</script>
Страница: 1
