[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 страница 2 из 2
Поделиться117.09.2025 03:31:16
- хранитель города
- Сообщений: 290
- Уважение: +1102
Поделиться217.09.2025 03:33:17
- хранитель города
- Сообщений: 290
- Уважение: +1102
Код:
<!--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>
Страница: 1
