https://pastein.ru/t/QbJ
Загрузка данных
у меня есть плеер, поменяй в нем текст пожалуйста, текст:00:00:10.330 - 00:00:10.756 - mitsu
00:00:12.014 - 00:00:12.304 - tainiy-tainiy-tainiy-tainiy
00:00:15.137 - 00:00:15.427 - Я хотел лечиться, но я совершаю с****
00:00:18.043 - 00:00:18.411 - Я хочу тебя, и твой парень, сука, уже убит
00:00:21.155 - 00:00:21.499 - На мне сейчас конфетти, я хочу тебя, блять, найти
00:00:24.236 - 00:00:24.568 - Просто мне дрочи, шалава, просто молча мне дрочи
00:00:27.123 - 00:00:27.285 - Я сейчас не дома, между нами снова ссора
00:00:30.057 - 00:00:30.308 - На счету лямов, блять, сорок, я те— я тебе дорог
00:00:30.463 - 00:00:33.261 - Сука, я сейчас упорот, сука, еду прямо в город
00:00:33.432 - 00:00:36.365 - Сука, ты просто умора и твой рэп — это не клёво, ха
00:00:37.534 - 00:00:39.910 - Да, я дорогой, этот пистолет немой
00:00:40.208 - 00:00:43.126 - То есть он ещё глухой, сука просто, блять, отстой
00:00:43.420 - 00:00:46.470 - Я хочу себя **** — совершаю ****
00:00:46.660 - 00:00:49.260 - Сука, блять, опять пиздит, на моей груди есть щит
00:00:49.442 - 00:00:51.935 - Мой папа не любит мою маму
00:00:52.078 - 00:00:54.822 - Поэтому ты шлюха, и я хочу тебя трахать
00:00:54.965 - 00:00:58.340 - Да, я слышу тебя, шлюха, сука, слышу твои стоны
00:00:58.486 - 00:01:00.843 - Эти рэперы с SC, сука, мои клоны
00:01:01.014 - 00:01:01.850 - mitsu, tainiy-tainiy-tainiy
00:01:01.993 - 00:01:04.586 - Я хотел лечиться, но я совершаю с****
00:01:04.738 - 00:01:07.555 - Я хочу тебя, и твой парень, сука, уже убит
00:01:07.690 - 00:01:10.040 - На мне сейчас конфетти, я хочу тебя, блять, найти
00:01:10.725 - 00:01:13.719 - Просто мне дрочи, шалава, просто молча мне дрочи
00:01:13.863 - 00:01:16.239 - Я сейчас не дома, между нами снова ссора
00:01:16.383 - 00:01:19.587 - На счету лямов, блять, сорок, я те— я тебе дорог
00:01:19.730 - 00:01:22.494 - Сука, я сейчас упорот, сука, еду прямо в город
00:01:22.629 - 00:01:27.417 - Сука, ты просто умора и твой рэп — это не клёво, ха
html приложил:<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cardinparis - папа (Premium Player)</title>
<style>
:root {
--bg-color: #020202;
--text-active: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
outline: none;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: var(--bg-color);
font-family: var(--font-family);
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
/* Ambient Dynamic Blur */
.ambient-bg {
position: absolute;
top: -15%;
left: -15%;
width: 130%;
height: 130%;
background-image: url('papa.png');
background-size: cover;
background-position: center;
filter: blur(100px) saturate(230%) brightness(0.3);
z-index: 1;
transform: scale(1.02);
transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Premium Micro-Grain Texture Overlay */
.noise {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.045;
pointer-events: none;
z-index: 2;
}
/* Layout Container */
.player-wrapper {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 100px;
width: 100%;
max-width: 1400px;
padding: 0 60px;
}
/* Left Column: Cover Art & Progress Ring */
.artwork-container {
position: relative;
flex-shrink: 0;
width: 450px;
height: 450px;
cursor: pointer;
perspective: 1200px;
}
.artwork {
width: 100%;
height: 100%;
border-radius: 32px;
background-image: url('papa.png');
background-size: cover;
background-position: center;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85),
0 0 100px rgba(255, 255, 255, 0.02);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
transform-style: preserve-3d;
}
.artwork-container:hover .artwork {
transform: scale(1.04) rotateY(-4deg) rotateX(3deg);
box-shadow: 0 40px 95px rgba(0, 0, 0, 0.95),
0 0 120px rgba(255, 255, 255, 0.05);
}
/* SVG Circular Timeline */
.progress-ring-svg {
position: absolute;
top: -16px;
left: -16px;
width: 482px;
height: 482px;
pointer-events: none;
transform: rotate(-90deg);
}
.progress-ring-circle {
fill: none;
stroke: rgba(255, 255, 255, 0.04);
stroke-width: 3.5;
}
.progress-ring-circle-bar {
fill: none;
stroke: rgba(255, 255, 255, 0.5);
stroke-width: 3.5;
stroke-dasharray: 1482; /* 2 * PI * r (approx) */
stroke-dashoffset: 1482;
transition: stroke-dashoffset 0.15s linear;
stroke-linecap: round;
}
/* Right Column: High-Fidelity Lyrics Engine */
.lyrics-container {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: 380px;
position: relative;
}
/* Dynamic Lyric Lines Layout */
.lyric-wrapper {
position: relative;
display: flex;
flex-direction: column;
}
.lyric-line {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.35;
position: relative;
transform-origin: left center;
}
/* Ultra Smooth Active Line Entry Animation */
.lyric-line.active {
color: var(--text-active);
text-shadow: 0 0 40px rgba(255, 255, 255, 0.25),
0 0 15px rgba(255, 255, 255, 0.15);
margin-bottom: 28px;
animation: lineFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
pulseGlow 3.5s ease-in-out infinite alternate;
}
/* Shimmering Dynamic Translucent State for Upcoming Line */
.lyric-line.next {
font-size: 30px;
background: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.28) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.35;
animation: shimmerEffect 4s linear infinite, lineFadeInNext 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Dissolve Particle Container Layer */
.dissolve-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Ghost Line Structure for Particle Scatter */
.ghost-line {
position: absolute;
font-size: 38px;
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.35;
color: #ffffff;
white-space: nowrap;
}
.ghost-line span {
display: inline-block;
transform-origin: center;
animation: particleScatter 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Animations Definition */
@keyframes lineFadeIn {
0% {
opacity: 0;
transform: translateY(25px) scale(0.96);
filter: blur(12px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1.01);
filter: blur(0px);
}
}
@keyframes lineFadeInNext {
0% {
opacity: 0;
transform: translateY(15px) scale(0.98);
filter: blur(6px);
}
100% {
opacity: 0.35;
transform: translateY(0) scale(1);
filter: blur(0px);
}
}
@keyframes particleScatter {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
filter: blur(0px);
}
40% {
filter: blur(2px);
}
100% {
transform: translate(var(--mx), var(--my)) rotate(var(--rot)) scale(0.75);
opacity: 0;
filter: blur(16px);
}
}
@keyframes pulseGlow {
0% { text-shadow: 0 0 30px rgba(255,255,255,0.18), 0 0 10px rgba(255,255,255,0.1); }
100% { text-shadow: 0 0 50px rgba(255,255,255,0.35), 0 0 20px rgba(255,255,255,0.2); }
}
@keyframes shimmerEffect {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* Minimal Meta HUD */
.track-meta {
position: absolute;
top: 45px;
right: 60px;
font-family: monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.25);
z-index: 4;
}
.hud-controls-hint {
position: absolute;
bottom: 45px;
left: 60px;
font-family: monospace;
font-size: 10px;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.2);
z-index: 4;
text-transform: uppercase;
}
.play-hint {
position: absolute;
bottom: 45px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
z-index: 4;
pointer-events: none;
font-weight: 600;
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* State System Modifiers */
.paused .artwork {
transform: scale(0.96) !important;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7) !important;
}
</style>
</head>
<body class="paused">
<div class="ambient-bg" id="ambientBg"></div>
<div class="noise"></div>
<div class="track-meta">
CARDINPARIS // ПАПА
</div>
<div class="hud-controls-hint">
[Space] Pause • [← / →] ±15s
</div>
<div class="player-wrapper">
<div class="artwork-container" id="artContainer" onclick="togglePlay()">
<svg class="progress-ring-svg">
<circle class="progress-ring-circle" cx="241" cy="241" r="236"></circle>
<circle class="progress-ring-circle-bar" id="progressRing" cx="241" cy="241" r="236"></circle>
</svg>
<div class="artwork"></div>
</div>
<div class="lyrics-container">
<div class="dissolve-container" id="dissolveContainer"></div>
<div class="lyric-wrapper">
<div id="line-current" class="lyric-line active">Нажмите пробел или обложку</div>
<div id="line-next" class="lyric-line next">Приготовьтесь...</div>
</div>
</div>
</div>
<div class="play-hint" id="playHint">CLICK COVER OR SPACE TO PLAY</div>
<audio id="audioTrack" src="01. cardinparis - папа.mp3" preload="auto"></audio>
<script>
const audio = document.getElementById('audioTrack');
const playHint = document.getElementById('playHint');
const currentLineEl = document.getElementById('line-current');
const nextLineEl = document.getElementById('line-next');
const progressRing = document.getElementById('progressRing');
const dissolveContainer = document.getElementById('dissolveContainer');
const ambientBg = document.getElementById('ambientBg');
const radius = progressRing.r.baseVal.value;
const circumference = 2 * Math.PI * radius;
progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
progressRing.style.strokeDashoffset = circumference;
const lyrics = [
{
"start": 1.838,
"end": 2.747,
"text": "хохолстрик"
},
{
"start": 14.618,
"end": 18.073,
"text": "Я беру индустрию, я ебу её в рот"
},
{
"start": 18.299,
"end": 20.735,
"text": "Я ебу её в рот, я ебу её"
},
{
"start": 21.564,
"end": 23.301,
"text": "Посылаю нахуй долбоёбов"
},
{
"start": 24.424,
"end": 26.367,
"text": "Вы все уёбищные, мне плохо"
},
{
"start": 27.118,
"end": 29.672,
"text": "Мне хуёво с вас, когда смотрю ваши сниппеты"
},
{
"start": 29.851,
"end": 31.929,
"text": "Вы такие кринжовые"
},
{
"start": 32.993,
"end": 35.226,
"text": "Вы такие кринжовые"
},
{
"start": 35.846,
"end": 38.194,
"text": "Вы ебаные додики"
},
{
"start": 38.5,
"end": 40.864,
"text": "Я папнул в индустрии, ведь я реально крут"
},
{
"start": 41.693,
"end": 44.491,
"text": "Вы папнули, потому что люди любят говно"
},
{
"start": 44.898,
"end": 46.051,
"text": "И слушают его"
},
{
"start": 46.473,
"end": 47.533,
"text": "Долбоёб, заткнись"
},
{
"start": 47.707,
"end": 49.604,
"text": "Да, ты тупой, сук, заткнись"
},
{
"start": 50.084,
"end": 53.493,
"text": "Отмените Елюплагга за пропаганду LGBT"
},
{
"start": 53.683,
"end": 55.266,
"text": "Просто нахуй иди, блять"
},
{
"start": 55.506,
"end": 58.442,
"text": "У меня есть сука, об этом все знают"
},
{
"start": 58.586,
"end": 61.024,
"text": "И я really даю, то, чего не ждёте вы"
},
{
"start": 61.438,
"end": 62.561,
"text": "То, чего не ждёте вы"
},
{
"start": 62.913,
"end": 64.012,
"text": "То, чего не ждёте вы"
},
{
"start": 65.155,
"end": 67.17,
"text": "Не хочу дружить с толстым человеком"
},
{
"start": 67.906,
"end": 70.066,
"text": "Блять, я не про него вообще"
},
{
"start": 70.994,
"end": 73.092,
"text": "Просто хочу жить я без человек"
},
{
"start": 73.499,
"end": 74.38,
"text": "Просто нахуй всех"
},
{
"start": 74.926,
"line_break": true,
"end": 76.122,
"text": "Похуй на всех"
},
{
"start": 76.439,
"end": 77.763,
"text": "Я точно заберу"
},
{
"start": 77.933,
"end": 79.14,
"text": "Ведь я поменял игру, сука"
},
{
"start": 79.307,
"end": 80.596,
"text": "Ведь я поменял игру, сука"
},
{
"start": 82.605,
"end": 86.49,
"text": "Отсоси мой хуй, если отжимаешься меньше двадцати раз"
},
{
"start": 86.626,
"end": 87.984,
"text": "Ты — тощий еблан"
},
{
"start": 88.155,
"end": 90.891,
"text": "А у нас есть мускулы, муску-муску"
},
{
"start": 93.147,
"end": 101.077,
"text": "Я Пре Пре-пре"
}
];
function togglePlay() {
if (audio.paused) {
audio.play().catch(e => console.log("Playback interaction deferred:", e));
document.body.classList.remove('paused');
playHint.style.opacity = '0';
playHint.style.transform = 'translate(-50%, 10px)';
} else {
audio.pause();
document.body.classList.add('paused');
playHint.innerText = "PAUSED";
playHint.style.opacity = '1';
playHint.style.transform = 'translate(-50%, 0)';
}
}
// Keyboard System Controls
window.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
e.preventDefault();
togglePlay();
} else if (e.code === 'ArrowLeft') {
e.preventDefault();
audio.currentTime = Math.max(0, audio.currentTime - 15);
triggerBgFlash();
} else if (e.code === 'ArrowRight') {
e.preventDefault();
audio.currentTime = Math.min(audio.duration || 0, audio.currentTime + 15);
triggerBgFlash();
}
});
function triggerBgFlash() {
ambientBg.style.transform = 'scale(1.06)';
setTimeout(() => {
ambientBg.style.transform = 'scale(1.02)';
}, 200);
}
// High Fidelity Dissolve Particle Generator
function generateDissolve(text, targetEl) {
if (!text || text.includes("Нажмите") || text === "• • •") return;
const ghost = document.createElement('div');
ghost.className = 'ghost-line';
ghost.style.top = targetEl.offsetTop + 'px';
ghost.style.left = targetEl.offsetLeft + 'px';
// Map characters into individual physical vectors
ghost.innerHTML = text.split('').map(char => {
if (char === ' ') return '<span> </span>';
// Exploding dispersion metrics
const moveX = (Math.random() - 0.5) * 160;
const moveY = -(Math.random() * 80 + 40);
const rotate = (Math.random() - 0.5) * 80;
return `<span style="--mx: ${moveX}px; --my: ${moveY}px; --rot: ${rotate}deg;">${char}</span>`;
}).join('');
dissolveContainer.appendChild(ghost);
setTimeout(() => ghost.remove(), 900);
}
// Sync and Engine Core
let lastCurrentText = "";
let lastNextText = "";
audio.addEventListener('timeupdate', () => {
const currentTime = audio.currentTime;
if (audio.duration) {
const percent = currentTime / audio.duration;
progressRing.style.strokeDashoffset = circumference - (percent * circumference);
}
let currentIndex = -1;
// Locate current block based on timeline sequence
for (let i = 0; i < lyrics.length; i++) {
if (currentTime >= lyrics[i].start) {
currentIndex = i;
}
}
let currentStr = "";
let nextStr = "";
if (currentIndex === -1) {
// Strictly initial state before lyrics trigger
currentStr = "• • •";
nextStr = lyrics[0] ? lyrics[0].text : "";
} else {
// Active timeline logic: retains last text during gaps natively
currentStr = lyrics[currentIndex].text;
nextStr = lyrics[currentIndex + 1] ? lyrics[currentIndex + 1].text : "";
}
// Render modifications with visual cache layers
if (currentStr !== lastCurrentText) {
generateDissolve(lastCurrentText, currentLineEl);
// Re-trigger hardware-accelerated fluid CSS line introduction
currentLineEl.style.animation = 'none';
currentLineEl.offsetHeight; // Flush Pipeline DOM reflow
currentLineEl.innerText = currentStr;
currentLineEl.style.animation = 'lineFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards, pulseGlow 3.5s ease-in-out infinite alternate';
lastCurrentText = currentStr;
}
if (nextStr !== lastNextText) {
nextLineEl.style.animation = 'none';
nextLineEl.offsetHeight;
nextLineEl.innerText = nextStr;
nextLineEl.style.animation = 'lineFadeInNext 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards, shimmerEffect 4s linear infinite';
lastNextText = nextStr;
}
});
audio.addEventListener('ended', () => {
document.body.classList.add('paused');
playHint.innerText = "REPLAY";
playHint.style.opacity = '1';
playHint.style.transform = 'translate(-50%, 0)';
progressRing.style.strokeDashoffset = circumference;
});
</script>
</body>
</html>