我来人间看场戏

杨帆发表于 2026-7-26 12:58

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Zhi+Mang+Xing&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<title>我来人间看场戏</title>
<style>
#papa{position:relative;display:grid;place-items:center;margin:30px 0;width:1280px;height:750px;left:calc(50% - 81px);transform:translateX(-50%);box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;user-select:none;background:#000 url('https://638183.freep.cn/638183/small/2026/srx.webp') no-repeat center/cover;font-family:"ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif";--state:running;}
#playBtnImg{position:absolute;left:20px;top:20px;width:120px;height:120px;cursor:pointer;z-index:20;transform-origin:50% 50%;will-change:transform;animation:flas 0.8s linear infinite var(--state);}
.vid1,.vid2{position:absolute;z-index:-1;pointer-events:none;object-fit:cover;object-position:center;mix-blend-mode:screen;will-change:transform;}
.vid1{left:-10%;top:-10%;width:120%;height:120%;mask:linear-gradient(to bottom,red 50%,transparent 68%);-webkit-mask:linear-gradient(to bottom,red 50%,transparent 68%);}
.vid2{left:-10%;top:-10%;width:120%;height:120%;mask:linear-gradient(to top,red 25%,transparent 58%);-webkit-mask:linear-gradient(to top,red 25%,transparent 58%);}
.text-box{position:absolute;left:90%;top:10%;height:100%;writing-mode:vertical-rl;text-orientation:mixed;}
.text{font:bold 50px 'Microsoft YaHei',sans-serif;color:#8A2BE2;margin:10px 0;text-shadow:0 0 1px #000,2px 2px 6px #333;display:inline-block;transform-origin:50% 50%;-webkit-transform-origin:center center;width:56px;height:56px;line-height:56px;text-align:center;vertical-align:middle;will-change:transform;backface-visibility:hidden;}
.ani{animation:circle 2s linear;color:gold;animation-play-state:var(--state);}
@keyframes circle{to{transform:rotate(360deg);}}
#wrapper{position:absolute;top:80%;left:calc(50% - 400px);width:800px;height:60px;font:bold 68px/1.2 'Long Cang','Zhi Mang Xing','ZCOOL KuaiLe','Ma Shan Zheng','华文琥珀',PingFang SC,'Segoe UI',cursive;letter-spacing:4px;text-orientation:mixed;white-space:normal;text-align:center;z-index:20;pointer-events:none;--state:running;}
.char{display:inline-block;padding:4px 0;opacity:0;transform:translate(var(--x),var(--y)) rotate(270deg);filter:drop-shadow(rgba(0,0,0,0.1) 1px 0 1px) drop-shadow(rgba(0,0,0,0.1) 0 1px 1px) drop-shadow(rgba(0,0,0,0.1) -1px 0 1px) drop-shadow(rgba(0,0,0,0.1) 0 -1px 1px);animation:fadeIn 0.7s var(--delay) forwards var(--state),flas 0.8s linear infinite var(--state);}
@keyframes fadeIn{100%{transform:translate(0,0) rotate(0deg);opacity:1;}}
@keyframes flas{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);}}
#fullscreen{position:absolute;left:25px;bottom:25px;color:DarkGray;font-size:25px;border:none;background:transparent;padding:4px 8px;border-radius:4px;z-index:18;cursor:pointer;opacity:0;transition:opacity 0.3s;}
#fullscreen:hover{font-style:italic;}
#statusDisplay{position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:25%;top:15%;color:#8A2BE2;}
</style>

<div id="papa">
<div class="text-box"></div>
<div id="wrapper"></div>
<button id="fullscreen">全屏欣赏</button>
<div id="statusDisplay">加载中...</div>
<img id="playBtnImg" src="https://upfile.mp3.wf/view.php/1c7e48bad4098a166234b5528d0c8740.png" alt="" />

<video class="vid1" src="https://img2.tukuppt.com/video_show/2629112/00/02/06/5b509bb0793dd.mp4" loop preload="auto" playsinline muted></video>
<video class="vid2" src="https://media-volc.jianpian.info/2769333/article/20240530/f8542970088c4206ae6f478762bb3cd5.mp4" loop preload="auto" playsinline muted></video>

</div>
<script>
const vids = document.querySelectorAll('video');
let lyricData = [];
let curkey = -1;
const OFFSET = 0.25;
let audioElement = null;
const wrapper = document.getElementById('wrapper');
const playBtnImg = document.getElementById('playBtnImg');
const textBox = document.querySelector('.text-box');
const papa = document.getElementById('papa');
const statusDisplay = document.getElementById('statusDisplay');
const fullscreen = document.getElementById('fullscreen');

function formatTime(seconds) {
const abs = Math.abs(seconds);
const m = Math.floor(abs/60);
const s = Math.floor(abs%60);
return `${seconds<0?'-':''}${m}:${s<10?'0':''}${s}`;
}

const songLrc = `
我来人间看场戏
演唱：影子
词：松松
曲：王莹莹
编曲：姜凯升
和声：雪无影
录音：鲁晓锋
混音：鲁晓锋
制作公司：萤火同尘
监制：王莹莹
OP：萤火同尘
演唱：影子
长了一颗黛玉的心
却生来只有八戒的命
没住进红楼梦的大观园
在西天路上奔着命
想结交那三国里
桃源把酒的好兄弟
却活成一部西游记
和魑魅魍魉斗着戏
我来人间看场戏
回首人已在戏里
两手空空来又去
悲欢坎坷皆是命
走过一生风和雨
苦难何止八十一
在老天安排的角色里
要怎么活出我自己
想结交那三国里
桃源把酒的好兄弟
却活成一部西游记
和魑魅魍魉斗着戏
我来人间看场戏
回首人已在戏里
两手空空来又去
悲欢坎坷皆是命
走过一生风和雨
苦难何止八十一
在老天安排的角色里
要怎么活出我自己
我来人间看场戏
回首人已在戏里
是是非非一场梦
悲欢离合难再续
如果前世已看过
所有苦难和分离
今生定有值得的事
让你为了它出席
`;

function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
   if(reg.test(item)) {
         let result = item.match(reg);
         let tmsg = +result * 60 + +result + +result / 1000;
         let rawText = result.trim();
         let pureText = rawText.split('→').trim();
         lrcAr.push();
   }
});
return lrcAr;
};

function getCurrentLyricIndex(time) {
let left = 0, right = lyricData.length - 1;
let targetIdx = 0;
while(left <= right) {
   let mid = Math.floor((left + right) / 2);
   if(lyricData <= time) {
         targetIdx = mid;
         left = mid + 1;
   } else {
         right = mid - 1;
   }
}
return targetIdx;
}

function showLrc(str, targetElm) {
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach(char => {
   const span = document.createElement('span');
   span.textContent = char;
   span.classList.add('char');
   const x = (Math.random() - 0.5) * 30;
   const y = (Math.random() - 0.5) * 30;
   const randomDelay = Math.random() * 0.5;
   let randomColor = Math.floor(Math.random()*16777215).toString(16).padStart(6,'0');
   span.style.cssText = `
color: #${randomColor};
--x: ${x}px;
--y: ${y}px;
--delay: ${randomDelay}s;
`;
   frg.appendChild(span);
});
targetElm.appendChild(frg);
}

function syncLyric() {
if(!audioElement || lyricData.length === 0) return;
const nowTime = audioElement.currentTime + OFFSET;
const idx = getCurrentLyricIndex(nowTime);
if(idx !== curkey) {
   curkey = idx;
   showLrc(lyricData, wrapper);
}
}

function bindAudioSync() {
if(!audioElement) return;
audioElement.addEventListener('timeupdate',()=>{
   const current = audioElement.currentTime;
   const remaining = audioElement.duration - current;
   const stateText = audioElement.paused ? "已暂停" : "播放中";
   statusDisplay.innerHTML = `<span style="color:#CC00FF">${stateText}：</span><span style="color:#FF0088">${formatTime(-remaining)}</span>`
});

function loopSync() {
   if(!audioElement.paused) syncLyric();
   requestAnimationFrame(loopSync);
}
loopSync();
audioElement.onseeked = () => {
   curkey = -1;
   syncLyric();
};
audioElement.onended = () => {
   curkey = -1;
   audioElement.currentTime = 0;
   audioElement.play();
}
}

function renderBottomText() {
const txtAr = '我来人间看场戏'.split('');
let spans = [];
textBox.innerHTML = '';
txtAr.forEach( (t,k) => {
   const s = document.createElement('span');
   s.textContent = t;
   s.className = k === 0 ? 'text ani' : 'text';
   spans.push(s);
   s.onanimationend = () => {
         s.classList.remove('ani');
         spans[(k+1) % txtAr.length].classList.add('ani');
   };
   textBox.appendChild(s);
});
return spans;
}

class AudioPlayer {
constructor() {
   this.audioObj = null;
   this.rotateAnimateId = null;
   this.textSpans = [];
   this.rotateAngle = 0;
   this.init();
}
init() {
   lyricData = lrc2HC(songLrc);
   this.audioObj = new Audio("http://music.163.com/song/media/outer/url?id=2736317256.mp3");
   this.audioObj.preload = "auto";
   this.audioObj.loop = false;
   audioElement = this.audioObj;
   bindAudioSync();
   this.textSpans = renderBottomText();
   playBtnImg.addEventListener('click', (e) => {
         e.stopPropagation();
         this.togglePlayPause();
   })
   this.audioObj.onloadeddata = () => {
         this.play();
         playBtnImg.title = "暂停";
         syncLyric();
   };
   this.startRotate();
}
updateTitleTip() {
   playBtnImg.title = this.audioObj.paused ? "播放" : "暂停";
}
startRotate() {
   if(this.rotateAnimateId) return;playBtnImg.style.transformOrigin = '50% 50%';

   const an = () => {
         this.rotateAngle -= 0.01;
         playBtnImg.style.transform = `rotate(${this.rotateAngle}rad)`;

         this.rotateAnimateId = requestAnimationFrame(an);
   }
   this.rotateAnimateId = requestAnimationFrame(an);
}
stopRotate() {
   if(this.rotateAnimateId) cancelAnimationFrame(this.rotateAnimateId);
   this.rotateAnimateId = null;
}
play() {
   this.audioObj.play().catch(e => console.log("自动播放拦截", e));
   vids.forEach(vid => vid.play());
   this.textSpans.forEach(span => span.style.animationPlayState = 'running');
   papa.style.setProperty('--state','running');wrapper.style.setProperty('--state','running');
   this.updateTitleTip();
}
pause() {
   this.audioObj.pause();
   vids.forEach(vid => vid.pause());
   this.textSpans.forEach(span => span.style.animationPlayState = 'paused');
   papa.style.setProperty('--state','paused');wrapper.style.setProperty('--state','paused');
   this.updateTitleTip();
}
togglePlayPause() {
   if(this.audioObj.paused) {
         this.play();
         if(!this.rotateAnimateId) this.startRotate();
   } else {
         this.pause();
         this.stopRotate();
   }
}
}

const player = new AudioPlayer();

let fs = true,fsTimer;
fullscreen.onclick = ()=>{
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
});
playBtnImg.onanimationiteration = () => playBtnImg.style.setProperty('filter', `hue-rotate(${30 + Math.random() * 180}deg)`);
papa.addEventListener('contextmenu', e => e.preventDefault());
</script>
</body>
</html>

梦江南 发表于 2026-7-26 15:31

学得真快，黑黑老师的图片，特效都用上了。帖子里的转场图片很漂亮，文字特效很。厉害!{:4_187:}

梦江南 发表于 2026-7-26 15:33

谢谢杨帆带来的精彩音画，这歌词很有趣。{:4_204:}{:4_199:}

梦油发表于 2026-7-26 17:12

人生如戏，戏如人生。

红影发表于 2026-7-26 20:43

我来人间看场戏，回首却已在戏里，两手空空来又去，这便是所有人的命运吧。
很有感慨的歌曲，制作也漂亮，欣赏杨帆好帖{:4_199:}

红影发表于 2026-7-26 20:45

这首歌很有意思，的确，我们来人世一趟，肯定是生命里有值得的事，让我们为了这个而来到人世。
欣赏杨帆好帖，制作漂亮，歌曲好听{:4_199:}

杨帆发表于 2026-7-26 22:31

梦江南发表于 2026-7-26 15:31
学得真快，黑黑老师的图片，特效都用上了。帖子里的转场图片很漂亮，文字特效很。厉害!

鼓捣着玩呢，谢谢江南鼓励~那是一个视频呦{:4_187:}

杨帆发表于 2026-7-26 22:32

梦油发表于 2026-7-26 17:12
人生如戏，戏如人生。

是，谢谢梦兄鼓励，过好当下每一天{:4_190:}

杨帆发表于 2026-7-26 22:34

红影发表于 2026-7-26 20:43
我来人间看场戏，回首却已在戏里，两手空空来又去，这便是所有人的命运吧。
很有感慨的歌曲，制作也漂亮， ...

问好影子，谢谢鼓励，祝开心每一天{:4_204:}

霜染枫丹 发表于 2026-7-26 23:14

赞佩扬帆的好帖，技术含量让我望尘莫及。歌曲很好听，喜欢。{:4_204:}{:4_190:}

杨帆发表于 2026-7-27 11:51

本帖最后由杨帆于 2026-7-27 11:52 编辑

霜染枫丹发表于 2026-7-26 23:14
赞佩扬帆的好帖，技术含量让我望尘莫及。歌曲很好听，喜欢。
谢谢枫丹老师喜欢与鼓励，不过您太谦虚了，并没什么技术含量，看马老师教程自己鼓捣就行~祝珍惜当下，活出自己{:4_204:}

梦油发表于 2026-7-27 14:19

杨帆发表于 2026-7-26 22:32
是，谢谢梦兄鼓励，过好当下每一天

是的，忘掉昨天，过好今天，迎接明天。

红影发表于 2026-7-27 21:05

杨帆发表于 2026-7-26 22:34
问好影子，谢谢鼓励，祝开心每一天

感谢杨帆的好帖，给你点赞{:4_187:}

页: [1]

花潮论坛's Archiver

我来人间看场戏