Как добавить на форум музыку новогоднию

[Timor m]

Помогите пожалуйста срочно

 

[AIT Pestoletov]

Вот тебе код для музыки

<xf:if is="!{$xf.visitor.user_id} || {$xf.visitor.Profile.custom_fields.newyear_music} != '0'">
<div id="newYearMusicPlayer" style="position: fixed; bottom: 20px; right: 20px; width: 300px; background: linear-gradient(135deg, #0c141f, #1a2a3a); border: 2px solid #FF3366; border-radius: 12px; padding: 15px; z-index: 9999; box-shadow: 0 5px 25px rgba(255, 51, 102, 0.3); color: white; font-family: 'Segoe UI', Arial, sans-serif; display: none;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
        <div style="display: flex; align-items: center; gap: 10px;">
            <span style="font-size: 28px;">🎅</span>
            <div>
                <div style="font-weight: bold; font-size: 16px; color: #4CAF50;">Новый Год 2025</div>
                <div style="font-size: 12px; opacity: 0.8;">Jingle Bells (Instrumental)</div>
            </div>
        </div>
        <div>
            <button onclick="toggleNewYearPlayer()" style="background: none; border: none; color: white; font-size: 18px; cursor: pointer; opacity: 0.7;">×</button>
        </div>
    </div>
    
    <div style="display: flex; align-items: center; gap: 15px; margin: 15px 0;">
        <button id="newYearPlayBtn" onclick="playNewYearMusic()" style="background: #FF3366; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; color: white; display: flex; align-items: center; justify-content: center;">▶️</button>
        
        <div style="flex-grow: 1;">
            <div style="display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 5px;">
                <span id="currentTime">0:00</span>
                <span id="totalTime">2:30</span>
            </div>
            <div style="height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; overflow: hidden;">
                <div id="progressBar" style="width: 0%; height: 100%; background: #4CAF50; transition: width 0.3s;"></div>
            </div>
        </div>
    </div>
    
    <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 15px;">
        <div style="display: flex; align-items: center; gap: 8px; font-size: 12px;">
            <span>🔊</span>
            <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5" style="width: 80px; accent-color: #FF3366;" oninput="changeVolume(this.value)">
        </div>
        
        <div style="display: flex; gap: 10px;">
            <button onclick="changeTrack(-1)" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">⏮</button>
            <button onclick="stopNewYearMusic()" style="background: rgba(255,51,102,0.3); border: 1px solid #FF3366; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">⏹ Стоп</button>
        </div>
    </div>
    
    <div style="margin-top: 10px; font-size: 11px; opacity: 0.6; text-align: center;">Mixkit</div>
</div>

<audio id="newYearAudio" preload="metadata">
    <source src="https://assets.mixkit.co/music/preview/mixkit-jingle-bells-239.mp3" type="audio/mpeg">
</audio>

<script>
const newYearTracks = [
    {
        url: 'https://assets.mixkit.co/music/preview/mixkit-jingle-bells-239.mp3',
        title: 'Jingle Bells',
        artist: 'Instrumental',
        duration: '2:30'
    },
    {
        url: 'https://assets.mixkit.co/music/preview/mixkit-christmas-is-coming-1195.mp3',
        title: 'Christmas is Coming',
        artist: 'Holiday Mix',
        duration: '2:15'
    }
];

let currentTrackIndex = 0;
let isPlaying = false;
let newYearAudio = document.getElementById('newYearAudio');
let progressInterval;

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
        const player = document.getElementById('newYearMusicPlayer');
        if (player) {
            player.style.display = 'block';
            const isHidden = localStorage.getItem('newYearPlayerHidden');
            if (isHidden === 'true') {
                player.style.display = 'none';
            }
        }
    }, 3000);
    
    loadTrack(currentTrackIndex);
    
    newYearAudio.addEventListener('timeupdate', updateProgress);
    newYearAudio.addEventListener('ended', nextTrack);
});

function loadTrack(index) {
    const track = newYearTracks[index];
    newYearAudio.src = track.url;
    document.querySelector('#newYearMusicPlayer .xf-player-title').textContent = track.title;
    document.querySelector('#newYearMusicPlayer .xf-player-artist').textContent = track.artist;
    document.getElementById('totalTime').textContent = track.duration;
}

function playNewYearMusic() {
    const btn = document.getElementById('newYearPlayBtn');
    
    if (isPlaying) {
        newYearAudio.pause();
        btn.innerHTML = '▶️';
    } else {
        newYearAudio.play().then(() => {
            btn.innerHTML = '⏸️';
        }).catch(e => {
            console.log('Autoplay prevented:', e);
            btn.innerHTML = '▶️ (кликните)';
        });
    }
    isPlaying = !isPlaying;
}

function stopNewYearMusic() {
    newYearAudio.pause();
    newYearAudio.currentTime = 0;
    document.getElementById('newYearPlayBtn').innerHTML = '▶️';
    isPlaying = false;
    updateProgress();
}

function changeVolume(value) {
    newYearAudio.volume = value;
}

function updateProgress() {
    if (newYearAudio.duration) {
        const percent = (newYearAudio.currentTime / newYearAudio.duration) * 100;
        document.getElementById('progressBar').style.width = percent + '%';
        
        const currentMinutes = Math.floor(newYearAudio.currentTime / 60);
        const currentSeconds = Math.floor(newYearAudio.currentTime % 60);
        document.getElementById('currentTime').textContent = 
            currentMinutes + ':' + (currentSeconds < 10 ? '0' : '') + currentSeconds;
    }
}

function nextTrack() {
    currentTrackIndex = (currentTrackIndex + 1) % newYearTracks.length;
    loadTrack(currentTrackIndex);
    if (isPlaying) {
        newYearAudio.play();
    }
}

function changeTrack(direction) {
    currentTrackIndex = (currentTrackIndex + direction + newYearTracks.length) % newYearTracks.length;
    loadTrack(currentTrackIndex);
    if (isPlaying) {
        newYearAudio.play();
    }
}

function toggleNewYearPlayer() {
    const player = document.getElementById('newYearMusicPlayer');
    player.style.display = 'none';
    localStorage.setItem('newYearPlayerHidden', 'true');
    stopNewYearMusic();
}

function showNewYearPlayer() {
    const player = document.getElementById('newYearMusicPlayer');
    player.style.display = 'block';
    localStorage.setItem('newYearPlayerHidden', 'false');
}

const style = document.createElement('style');
style.textContent = `
    @media (max-width: 768px) {
        #newYearMusicPlayer {
            width: calc(100% - 40px);
            right: 20px;
            left: 20px;
            bottom: 10px;
        }
    }
    
    @media (max-width: 480px) {
        #newYearMusicPlayer {
            padding: 10px;
        }
        #newYearMusicPlayer .xf-player-title {
            font-size: 14px !important;
        }
    }
`;
document.head.appendChild(style);
</script>
</xf:if>

Вставлять в шаблон PAGE CONTINER перед body

 

[Tema__Ajdjsj]

Вот тебе код для музыки

<xf:if is="!{$xf.visitor.user_id} || {$xf.visitor.Profile.custom_fields.newyear_music} != '0'">
<div id="newYearMusicPlayer" style="position: fixed; bottom: 20px; right: 20px; width: 300px; background: linear-gradient(135deg, #0c141f, #1a2a3a); border: 2px solid #FF3366; border-radius: 12px; padding: 15px; z-index: 9999; box-shadow: 0 5px 25px rgba(255, 51, 102, 0.3); color: white; font-family: 'Segoe UI', Arial, sans-serif; display: none;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
        <div style="display: flex; align-items: center; gap: 10px;">
            <span style="font-size: 28px;">🎅</span>
            <div>
                <div style="font-weight: bold; font-size: 16px; color: #4CAF50;">Новый Год 2025</div>
                <div style="font-size: 12px; opacity: 0.8;">Jingle Bells (Instrumental)</div>
            </div>
        </div>
        <div>
            <button onclick="toggleNewYearPlayer()" style="background: none; border: none; color: white; font-size: 18px; cursor: pointer; opacity: 0.7;">×</button>
        </div>
    </div>
   
    <div style="display: flex; align-items: center; gap: 15px; margin: 15px 0;">
        <button id="newYearPlayBtn" onclick="playNewYearMusic()" style="background: #FF3366; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; color: white; display: flex; align-items: center; justify-content: center;">▶️</button>
       
        <div style="flex-grow: 1;">
            <div style="display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 5px;">
                <span id="currentTime">0:00</span>
                <span id="totalTime">2:30</span>
            </div>
            <div style="height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; overflow: hidden;">
                <div id="progressBar" style="width: 0%; height: 100%; background: #4CAF50; transition: width 0.3s;"></div>
            </div>
        </div>
    </div>
   
    <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 15px;">
        <div style="display: flex; align-items: center; gap: 8px; font-size: 12px;">
            <span>🔊</span>
            <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5" style="width: 80px; accent-color: #FF3366;" oninput="changeVolume(this.value)">
        </div>
       
        <div style="display: flex; gap: 10px;">
            <button onclick="changeTrack(-1)" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">⏮</button>
            <button onclick="stopNewYearMusic()" style="background: rgba(255,51,102,0.3); border: 1px solid #FF3366; color: white; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;">⏹ Стоп</button>
        </div>
    </div>
   
    <div style="margin-top: 10px; font-size: 11px; opacity: 0.6; text-align: center;">Mixkit</div>
</div>

<audio id="newYearAudio" preload="metadata">
    <source src="https://assets.mixkit.co/music/preview/mixkit-jingle-bells-239.mp3" type="audio/mpeg">
</audio>

<script>
const newYearTracks = [
    {
        url: 'https://assets.mixkit.co/music/preview/mixkit-jingle-bells-239.mp3',
        title: 'Jingle Bells',
        artist: 'Instrumental',
        duration: '2:30'
    },
    {
        url: 'https://assets.mixkit.co/music/preview/mixkit-christmas-is-coming-1195.mp3',
        title: 'Christmas is Coming',
        artist: 'Holiday Mix',
        duration: '2:15'
    }
];

let currentTrackIndex = 0;
let isPlaying = false;
let newYearAudio = document.getElementById('newYearAudio');
let progressInterval;

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
        const player = document.getElementById('newYearMusicPlayer');
        if (player) {
            player.style.display = 'block';
            const isHidden = localStorage.getItem('newYearPlayerHidden');
            if (isHidden === 'true') {
                player.style.display = 'none';
            }
        }
    }, 3000);
   
    loadTrack(currentTrackIndex);
   
    newYearAudio.addEventListener('timeupdate', updateProgress);
    newYearAudio.addEventListener('ended', nextTrack);
});

function loadTrack(index) {
    const track = newYearTracks[index];
    newYearAudio.src = track.url;
    document.querySelector('#newYearMusicPlayer .xf-player-title').textContent = track.title;
    document.querySelector('#newYearMusicPlayer .xf-player-artist').textContent = track.artist;
    document.getElementById('totalTime').textContent = track.duration;
}

function playNewYearMusic() {
    const btn = document.getElementById('newYearPlayBtn');
   
    if (isPlaying) {
        newYearAudio.pause();
        btn.innerHTML = '▶️';
    } else {
        newYearAudio.play().then(() => {
            btn.innerHTML = '⏸️';
        }).catch(e => {
            console.log('Autoplay prevented:', e);
            btn.innerHTML = '▶️ (кликните)';
        });
    }
    isPlaying = !isPlaying;
}

function stopNewYearMusic() {
    newYearAudio.pause();
    newYearAudio.currentTime = 0;
    document.getElementById('newYearPlayBtn').innerHTML = '▶️';
    isPlaying = false;
    updateProgress();
}

function changeVolume(value) {
    newYearAudio.volume = value;
}

function updateProgress() {
    if (newYearAudio.duration) {
        const percent = (newYearAudio.currentTime / newYearAudio.duration) * 100;
        document.getElementById('progressBar').style.width = percent + '%';
       
        const currentMinutes = Math.floor(newYearAudio.currentTime / 60);
        const currentSeconds = Math.floor(newYearAudio.currentTime % 60);
        document.getElementById('currentTime').textContent =
            currentMinutes + ':' + (currentSeconds < 10 ? '0' : '') + currentSeconds;
    }
}

function nextTrack() {
    currentTrackIndex = (currentTrackIndex + 1) % newYearTracks.length;
    loadTrack(currentTrackIndex);
    if (isPlaying) {
        newYearAudio.play();
    }
}

function changeTrack(direction) {
    currentTrackIndex = (currentTrackIndex + direction + newYearTracks.length) % newYearTracks.length;
    loadTrack(currentTrackIndex);
    if (isPlaying) {
        newYearAudio.play();
    }
}

function toggleNewYearPlayer() {
    const player = document.getElementById('newYearMusicPlayer');
    player.style.display = 'none';
    localStorage.setItem('newYearPlayerHidden', 'true');
    stopNewYearMusic();
}

function showNewYearPlayer() {
    const player = document.getElementById('newYearMusicPlayer');
    player.style.display = 'block';
    localStorage.setItem('newYearPlayerHidden', 'false');
}

const style = document.createElement('style');
style.textContent = `
    @media (max-width: 768px) {
        #newYearMusicPlayer {
            width: calc(100% - 40px);
            right: 20px;
            left: 20px;
            bottom: 10px;
        }
    }
   
    @media (max-width: 480px) {
        #newYearMusicPlayer {
            padding: 10px;
        }
        #newYearMusicPlayer .xf-player-title {
            font-size: 14px !important;
        }
    }
`;
document.head.appendChild(style);
</script>
</xf:if>

Вставлять в шаблон PAGE CONTINER перед body

скинь скринм плс куда вставлять

 

[AIT Pestoletov]

скинь скринм плс куда вставлять

Внешний вид - шаблоны - PAGE Continer - вставить код сверху беред body

 

[Timor m]

PAGE CONTINER

какая по щету в списке

 

[AIT Pestoletov]

какая по щету в списке

Что именно

 

[Timor m]

Что именно

Дай ВК расскажу всё

 

[Timor m]

Что именно

Ты тут?

 

[AIT Pestoletov]

Дай ВК расскажу всё

@pestoletov

 

[rararorara]

Спойлер: Улучшенный вариант

[/<style>
/* Стиль плеера */
.ny-player-card {
background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
border: 2px solid #ff4d4d;
border-radius: 20px;
padding: 20px;
color: white;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 0 15px rgba(255, 77, 77, 0.3);
position: relative;
overflow: hidden;
margin-bottom: 20px;
}

/* Анимация снега на фоне */
.ny-player-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('

https://imgur.com/8Yl5XpC

/* Легкий снег */
opacity: 0.1;
pointer-events: none;
z-index: 0;
}

.ny-header {
display: flex;
align-items: center;
margin-bottom: 15px;
position: relative;
z-index: 1;
}

.ny-avatar {
width: 50px;
height: 50px;
background: url('https://cdn-icons-png.flaticon.com/512/4600/4600356.png') no-repeat center/cover;
margin-right: 15px;
filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

.ny-info h3 {
margin: 0;
font-size: 16px;
color: #4caf50; /* Зеленый новогодний */
font-weight: bold;
}

.ny-info p {
margin: 2px 0 0;] font-size: 12px;
color: #aaa;
}

/* Управление */
.ny-controls {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}

.ny-btn-main {
width: 50px;
height: 50px;
border-radius: 50%;
background: #ff4d4d;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
box-shadow: 0 0 10px #ff4d4d;
}

.ny-btn-main:hover {
transform: scale(1.1);
background: #ff1a1a;
}

.ny-progress-container {
flex-grow: 1;
margin: 0 15px;
}

/* Кастомный прогресс бар */
.ny-progress {
width: 100%;
height: 6px;
background: #333;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}

.ny-progress-bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #ff4d4d, #ff9a9e);
transition: width 0.1s linear;
}

.ny-volume {
width: 20px;
font-size: 14px;
color: #aaa;
cursor: pointer;
}

/* Скрываем стандартный аудио плеер */
#ny-audio-source { display: none; }
</style>

<div class="ny-player-card">
<div class="ny-header">
<div class="ny-avatar"></div>
<div class="ny-info">
<h3>Новый Год 2025</h3>
<p>Jingle Bells (Trap Remix)</p>
</div>
</div>

<div class="ny-controls">
<button class="ny-btn-main" onclick="toggleMusic()" id="ny-play-btn">
<i class="fa fa-play" aria-hidden="true"></i>
</button>

<div class="ny-progress-container">
<div class="ny-progress" onclick="setProgress(event)">
<div class="ny-progress-bar" id="ny-progress-bar"></div>
</div>
</div>

<i class="fa fa-volume-up ny-volume" onclick="toggleMute()" id="ny-vol-icon"></i>
</div>

<!-- ССЫЛКА НА МУЗЫКУ (MP3) -->
<audio id="ny-audio-source" loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-15.mp3" type="audio/mpeg">
</audio>
</div>

<script>
var audio = document.getElementById("ny-audio-source");
var playBtn = document.getElementById("ny-play-btn");
var progressBar = document.getElementById("ny-progress-bar");
var volIcon = document.getElementById("ny-vol-icon");
var isPlaying = false;

function toggleMusic() {
if (isPlaying) {
audio.pause();
playBtn.innerHTML = '<i class="fa fa-play"></i>';
playBtn.style.boxShadow = "0 0 10px #ff4d4d";
} else {
audio.play();
playBtn.innerHTML = '<i class="fa fa-pause"></i>';
playBtn.style.boxShadow = "0 0 20px #ff4d4d, inset 0 0 10px rgba(0,0,0,0.5)";
}
isPlaying = !isPlaying;
}

// Обновление полоски прогресса
audio.ontimeupdate = function() {
var percentage = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = percentage + "%";
};

// Перемотка при клике
function setProgress(e) {
var width = e.target.parentElement.clientWidth;
var clickX = e.offsetX;
var duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}

// Включение/Выключение звука
function toggleMute() {
audio.muted = !audio.muted;
if(audio.muted) {
volIcon.className = "fa fa-volume-off ny-volume";
volIcon.style.color = "#555";
} else { volIcon.className = "fa fa-volume-up ny-volume";
volIcon.style.color = "#aaa";
}
}
</script>

 

[Tema__Ajdjsj]

Спойлер: Улучшенный вариант

[/<style>
/* Стиль плеера */
.ny-player-card {
background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
border: 2px solid #ff4d4d;
border-radius: 20px;
padding: 20px;
color: white;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 0 15px rgba(255, 77, 77, 0.3);
position: relative;
overflow: hidden;
margin-bottom: 20px;
}

/* Анимация снега на фоне */
.ny-player-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('

https://imgur.com/8Yl5XpC

/* Легкий снег */
opacity: 0.1;
pointer-events: none;
z-index: 0;
}

.ny-header {
display: flex;
align-items: center;
margin-bottom: 15px;
position: relative;
z-index: 1;
}

.ny-avatar {
width: 50px;
height: 50px;
background: url('https://cdn-icons-png.flaticon.com/512/4600/4600356.png') no-repeat center/cover;
margin-right: 15px;
filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

.ny-info h3 {
margin: 0;
font-size: 16px;
color: #4caf50; /* Зеленый новогодний */
font-weight: bold;
}

.ny-info p {
margin: 2px 0 0;] font-size: 12px;
color: #aaa;
}

/* Управление */
.ny-controls {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}

.ny-btn-main {
width: 50px;
height: 50px;
border-radius: 50%;
background: #ff4d4d;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
box-shadow: 0 0 10px #ff4d4d;
}

.ny-btn-main:hover {
transform: scale(1.1);
background: #ff1a1a;
}

.ny-progress-container {
flex-grow: 1;
margin: 0 15px;
}

/* Кастомный прогресс бар */
.ny-progress {
width: 100%;
height: 6px;
background: #333;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}

.ny-progress-bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #ff4d4d, #ff9a9e);
transition: width 0.1s linear;
}

.ny-volume {
width: 20px;
font-size: 14px;
color: #aaa;
cursor: pointer;
}

/* Скрываем стандартный аудио плеер */
#ny-audio-source { display: none; }
</style>

<div class="ny-player-card">
<div class="ny-header">
<div class="ny-avatar"></div>
<div class="ny-info">
<h3>Новый Год 2025</h3>
<p>Jingle Bells (Trap Remix)</p>
</div>
</div>

<div class="ny-controls">
<button class="ny-btn-main" onclick="toggleMusic()" id="ny-play-btn">
<i class="fa fa-play" aria-hidden="true"></i>
</button>

<div class="ny-progress-container">
<div class="ny-progress" onclick="setProgress(event)">
<div class="ny-progress-bar" id="ny-progress-bar"></div>
</div>
</div>

<i class="fa fa-volume-up ny-volume" onclick="toggleMute()" id="ny-vol-icon"></i>
</div>

<!-- ССЫЛКА НА МУЗЫКУ (MP3) -->
<audio id="ny-audio-source" loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-15.mp3" type="audio/mpeg">
</audio>
</div>

<script>
var audio = document.getElementById("ny-audio-source");
var playBtn = document.getElementById("ny-play-btn");
var progressBar = document.getElementById("ny-progress-bar");
var volIcon = document.getElementById("ny-vol-icon");
var isPlaying = false;

function toggleMusic() {
if (isPlaying) {
audio.pause();
playBtn.innerHTML = '<i class="fa fa-play"></i>';
playBtn.style.boxShadow = "0 0 10px #ff4d4d";
} else {
audio.play();
playBtn.innerHTML = '<i class="fa fa-pause"></i>';
playBtn.style.boxShadow = "0 0 20px #ff4d4d, inset 0 0 10px rgba(0,0,0,0.5)";
}
isPlaying = !isPlaying;
}

// Обновление полоски прогресса
audio.ontimeupdate = function() {
var percentage = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = percentage + "%";
};

// Перемотка при клике
function setProgress(e) {
var width = e.target.parentElement.clientWidth;
var clickX = e.offsetX;
var duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}

// Включение/Выключение звука
function toggleMute() {
audio.muted = !audio.muted;
if(audio.muted) {
volIcon.className = "fa fa-volume-off ny-volume";
volIcon.style.color = "#555";
} else { volIcon.className = "fa fa-volume-up ny-volume";
volIcon.style.color = "#aaa";
}
}
</script>

куда вставлять?

 

[AIT Pestoletov]

Спойлер: Улучшенный вариант

[/<style>
/* Стиль плеера */
.ny-player-card {
background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
border: 2px solid #ff4d4d;
border-radius: 20px;
padding: 20px;
color: white;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 0 15px rgba(255, 77, 77, 0.3);
position: relative;
overflow: hidden;
margin-bottom: 20px;
}

/* Анимация снега на фоне */
.ny-player-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('

https://imgur.com/8Yl5XpC

/* Легкий снег */
opacity: 0.1;
pointer-events: none;
z-index: 0;
}

.ny-header {
display: flex;
align-items: center;
margin-bottom: 15px;
position: relative;
z-index: 1;
}

.ny-avatar {
width: 50px;
height: 50px;
background: url('https://cdn-icons-png.flaticon.com/512/4600/4600356.png') no-repeat center/cover;
margin-right: 15px;
filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

.ny-info h3 {
margin: 0;
font-size: 16px;
color: #4caf50; /* Зеленый новогодний */
font-weight: bold;
}

.ny-info p {
margin: 2px 0 0;] font-size: 12px;
color: #aaa;
}

/* Управление */
.ny-controls {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}

.ny-btn-main {
width: 50px;
height: 50px;
border-radius: 50%;
background: #ff4d4d;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
box-shadow: 0 0 10px #ff4d4d;
}

.ny-btn-main:hover {
transform: scale(1.1);
background: #ff1a1a;
}

.ny-progress-container {
flex-grow: 1;
margin: 0 15px;
}

/* Кастомный прогресс бар */
.ny-progress {
width: 100%;
height: 6px;
background: #333;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}

.ny-progress-bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #ff4d4d, #ff9a9e);
transition: width 0.1s linear;
}

.ny-volume {
width: 20px;
font-size: 14px;
color: #aaa;
cursor: pointer;
}

/* Скрываем стандартный аудио плеер */
#ny-audio-source { display: none; }
</style>

<div class="ny-player-card">
<div class="ny-header">
<div class="ny-avatar"></div>
<div class="ny-info">
<h3>Новый Год 2025</h3>
<p>Jingle Bells (Trap Remix)</p>
</div>
</div>

<div class="ny-controls">
<button class="ny-btn-main" onclick="toggleMusic()" id="ny-play-btn">
<i class="fa fa-play" aria-hidden="true"></i>
</button>

<div class="ny-progress-container">
<div class="ny-progress" onclick="setProgress(event)">
<div class="ny-progress-bar" id="ny-progress-bar"></div>
</div>
</div>

<i class="fa fa-volume-up ny-volume" onclick="toggleMute()" id="ny-vol-icon"></i>
</div>

<!-- ССЫЛКА НА МУЗЫКУ (MP3) -->
<audio id="ny-audio-source" loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-15.mp3" type="audio/mpeg">
</audio>
</div>

<script>
var audio = document.getElementById("ny-audio-source");
var playBtn = document.getElementById("ny-play-btn");
var progressBar = document.getElementById("ny-progress-bar");
var volIcon = document.getElementById("ny-vol-icon");
var isPlaying = false;

function toggleMusic() {
if (isPlaying) {
audio.pause();
playBtn.innerHTML = '<i class="fa fa-play"></i>';
playBtn.style.boxShadow = "0 0 10px #ff4d4d";
} else {
audio.play();
playBtn.innerHTML = '<i class="fa fa-pause"></i>';
playBtn.style.boxShadow = "0 0 20px #ff4d4d, inset 0 0 10px rgba(0,0,0,0.5)";
}
isPlaying = !isPlaying;
}

// Обновление полоски прогресса
audio.ontimeupdate = function() {
var percentage = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = percentage + "%";
};

// Перемотка при клике
function setProgress(e) {
var width = e.target.parentElement.clientWidth;
var clickX = e.offsetX;
var duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}

// Включение/Выключение звука
function toggleMute() {
audio.muted = !audio.muted;
if(audio.muted) {
volIcon.className = "fa fa-volume-off ny-volume";
volIcon.style.color = "#555";
} else { volIcon.className = "fa fa-volume-up ny-volume";
volIcon.style.color = "#aaa";
}
}
</script>

OFFTOP

ИИ ван лав