LIVE SAMP
Как добавить на форум музыку новогоднию
- Автор темы Timor m
- Дата начала
Пользователь
- Регистрация
- 17 Авг 2025
- Сообщения
- 240
Вот тебе код для музыки
Вставлять в шаблон PAGE CONTINER перед body
Код:
<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>Пользователь
- Регистрация
- 15 Окт 2025
- Сообщения
- 115
скинь скринм плс куда вставлять
Пользователь
- Регистрация
- 17 Авг 2025
- Сообщения
- 240
Внешний вид - шаблоны - PAGE Continer - вставить код сверху беред body
- Автор темы
- #5
какая по щету в списке
Пользователь
- Регистрация
- 17 Авг 2025
- Сообщения
- 240
Что именно
- Автор темы
- #7
Дай ВК расскажу всё
- Автор темы
- #8
Ты тут?
Пользователь
- Регистрация
- 17 Авг 2025
- Сообщения
- 240
@pestoletov
Пользователь
- Регистрация
- 5 Окт 2025
- Сообщения
- 14
[/<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(' /* Легкий снег */
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>
/* Стиль плеера */
.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(' /* Легкий снег */
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>
Пользователь
- Регистрация
- 15 Окт 2025
- Сообщения
- 115
куда вставлять?
Пользователь
- Регистрация
- 17 Авг 2025
- Сообщения
- 240