别负痴情这一场
<meta charset="UTF-8"><style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa {
--offsetX: 81px;
--bg: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/424bf1e9709b90daf6208aa962a673e4_preview.webp') no-repeat center/cover;
color: white;
}
pa::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: url('') no-repeat center/cover;
mask: linear-gradient(to right top, rgba(0,0,0,.5) 35%, rgba(0,0,0,.8) 55%);
-webkit-mask: linear-gradient(90deg, rgba(0,0,0,.5) 35%, rgba(0,0,0,.8) 55%);
z-index: -1;
}
.player {
width: 480px;
left:37%;
bottom: 20px;
}
.btnFs {
top: -1125px;
right: 20px;
}
#msvg {
position: absolute;
width: 6vw;
height: 6vw;
left: 50%;
bottom:10%;
transition: .75s;
opacity: var(--opacity);
}
.lyrics-container {
position: absolute;
bottom: 20%;
left: 55%;
transform: translateX(-50%);
width: 90%;
max-width: 800px;
max-height: 120px;
overflow: hidden;
text-align: center;
color: white;
font-family: 'Microsoft YaHei', sans-serif;
text-shadow:
0 0 8px rgba(0, 0, 0, 0.9),
0 0 4px rgba(0, 0, 0, 0.9),
1px 1px 2px rgba(0, 0, 0, 0.9),
-1px -1px 2px rgba(0, 0, 0, 0.9);
z-index: 10;
background: transparent !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 0;
padding: 10px 20px;
}
.lyric-line {
line-height: 1.5;
margin: 10px 0;
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0.3;
font-size: 1.2em;
transform: scale(0.95);
filter: blur(0.5px);
}
.lyric-line.active {
opacity: 1;
font-size: 1.8em;
font-weight: bold;
color: #fffacd;
text-shadow:
0 0 15px rgba(218,112,214, 0.9),
0 0 10px rgba(218,112,214, 0.7),
0 0 5px rgba(218,112,214, 0.5),
1px 1px 3px rgba(0, 0, 0, 0.1);
transform: scale(1.05);
filter: blur(0px);
}
.lyric-line.previous {
opacity: 0.7;
font-size: 1.4em;
transform: scale(1.0);
filter: blur(0px);
}
.lyric-line.next {
opacity: 0.5;
font-size: 1.0em;
transform: scale(0.9);
}
.lyric-line.inactive {
opacity: 0;
max-height: 0;
margin: 0;
overflow: hidden;
}
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2475824/00/08/27/5d1c25a2656d6.mp4" autoplay loop muted></video>
<div id="lyricsBox" class="lyrics-container"></div>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="rot brightness">
<title>播放/暂停(Alt+X)</title>
<circle cx="0" cy="0" r="190" fill="transparent"></circle>
</g>
</svg>
</div>
<script>
const lrcLyrics = `别负痴情这一场
词：烟嗓吉他哥
曲：烟嗓吉他哥
LRC编辑：醉美水芙蓉
曾许余生朝夕共白头
誓言跨过距离亦无求
满心欢喜只为一人停留
人间风景不及你的回眸
世间风流与我无瓜葛
一腔热忱念你朝暮不休
怎料爱意匆匆轻易放开手
满心温柔尽数化作离愁
别负痴情这一场岁月不肯休
只想与你相伴岁岁共长久
此生的牵挂从来只有你啊
怎忍心留我一人孤独念旧
别负痴情这一场岁月不肯休
曾经偏爱全都是敷衍拼凑
我深夜难眠尝尽相思苦忧
你怎舍得让我含泪独自放手
世间风流与我无瓜葛
一腔热忱念你朝暮不休
怎料爱意匆匆轻易放开手
满心温柔尽数化作离愁
别负痴情这一场岁月不肯休
只想与你相伴岁岁共长久
此生的牵挂从来只有你啊
怎忍心留我一人孤独念旧
别负痴情这一场岁月不肯休
曾经偏爱全都是敷衍拼凑
我深夜难眠尝尽相思苦忧
你怎舍得让我含泪独自放手
谢谢欣赏`;
var options = {
pa: '.pa',
urls: [['https://www.joy127.com/url/150978.mp3', '别负痴情这一场']],
btns: ,
lyrics: lrcLyrics
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
function tzRun() {
let backgroundControl = {
isDynamic: false,
dynamicBg: 'url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/424bf1e9709b90daf6208aa962a673e4_preview.webp) no-repeat center/cover',
staticBg: 'url(https://wj.zp68.com/lxx/yunhua/2026/03/14/22.jp) no-repeat center/cover',
init: function() {
this.pa = document.querySelector('.pa');
this.updateBackground();
},
updateBackground: function() {
if (this.isDynamic) {
this.pa.style.setProperty('--bg', this.dynamicBg);
} else {
this.pa.style.setProperty('--bg', this.staticBg);
}
},
syncWithMusic: function(audioElement) {
if (!audioElement) return;
audioElement.addEventListener('play', () => {
this.isDynamic = true;
this.updateBackground();
});
audioElement.addEventListener('pause', () => {
this.isDynamic = false;
this.updateBackground();
});
}
};
AudPlayer.prototype.parseLyrics = function(lrcText) {
const lines = lrcText.split('\n');
const lyricArr = [];
const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2})\]/;
lines.forEach(line => {
const match = line.match(timeRegex);
if (match) {
const [, minutes, seconds, milliseconds] = match;
const timeInSeconds = parseInt(minutes) * 60 + parseInt(seconds) + parseInt(milliseconds) / 100;
const text = line.replace(timeRegex, '').trim();
if (text) {
lyricArr.push({ time: timeInSeconds, text });
}
}
});
lyricArr.sort((a, b) => a.time - b.time);
this.lyrics = lyricArr;
this.currentLyricIndex = 0;
};
AudPlayer.prototype.createLyricsContainer = function() {
if (!this.lyrics || this.lyrics.length === 0) return;
this.lyricsBox = document.getElementById('lyricsBox');
if (!this.lyricsBox) {
this.lyricsBox = document.createElement('div');
this.lyricsBox.id = 'lyricsBox';
this.lyricsBox.className = 'lyrics-container';
this.pa.appendChild(this.lyricsBox);
}
this.lyricsBox.innerHTML = '';
this.lyricLines = [];
this.lyrics.forEach((lyric, index) => {
const lineElem = document.createElement('div');
lineElem.className = 'lyric-line';
lineElem.textContent = lyric.text;
lineElem.dataset.index = index;
this.lyricsBox.appendChild(lineElem);
this.lyricLines.push(lineElem);
});
};
AudPlayer.prototype.updateLyrics = function(currentTime) {
if (!this.lyrics || this.lyricLines.length === 0) return;
let newIndex = this.currentLyricIndex;
while (newIndex < this.lyrics.length - 1 && this.lyrics.time <= currentTime) {
newIndex++;
}
while (newIndex > 0 && this.lyrics.time > currentTime) {
newIndex--;
}
if (newIndex !== this.currentLyricIndex) {
this.lyricLines.forEach(line => {
line.classList.remove('active', 'previous', 'next', 'inactive');
});
if (this.lyricLines) {
this.lyricLines.classList.add('active');
}
if (newIndex > 0 && this.lyricLines) {
this.lyricLines.classList.add('previous');
}
if (newIndex < this.lyrics.length - 1 && this.lyricLines) {
this.lyricLines.classList.add('next');
}
this.lyricLines.forEach((line, idx) => {
if (idx !== newIndex && idx !== newIndex - 1 && idx !== newIndex + 1) {
line.classList.add('inactive');
}
});
this.currentLyricIndex = newIndex;
if (this.lyricLines) {
this.lyricsBox.scrollTo({
top: this.lyricLines.offsetTop - this.lyricsBox.offsetHeight / 2 + this.lyricLines.offsetHeight,
behavior: 'smooth'
});
}
}
};
const originalBindAudEvents = AudPlayer.prototype.bindAudEvents;
AudPlayer.prototype.bindAudEvents = function() {
originalBindAudEvents.call(this);
this.aud.addEventListener('timeupdate', () => {
this.updateLyrics(this.aud.currentTime);
});
};
const originalConstructor = AudPlayer.prototype.constructor;
AudPlayer = class extends AudPlayer {
constructor(t = {}) {
super(t);
if (t.lyrics) {
this.parseLyrics(t.lyrics);
this.createLyricsContainer();
}
}
};
var aud = new AudPlayer(options);
var dr = window._dr(msvg);
dr.circle(0,0,15,'lightblue', 'white', 2).addTo(g1);
dr.circle(0, 160, 30, 'lightblue', 'white', 2).addTo(g1).rotates(7);
dr.circle(0, 100, 25, 'lightblue', 'white', 2).addTo(g1).rotates(7);
dr.circle(0, 50, 20, 'lightblue', 'white', 2).addTo(g1).rotates(7);
backgroundControl.init();
backgroundControl.syncWithMusic(aud.aud);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script>
页:
[1]