《风吹散过往》

寒冬残荷 发表于 2026-2-6 20:46

本帖最后由寒冬残荷于 2026-2-7 08:58 编辑 <br /><br />

<style>
#papa{position:relative; margin:30px 30px; left:calc(50% - 81px); transform:translateX(-50%); width:clamp(600px,90vw,1400px); height:auto;aspect-ratio:16/9; box-shadow:0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; overflow:hidden; display:grid; place-items:center; user-drag:none; user-select:none; background-image:url('https://pic1.imgdb.cn/item/6940e21d0dd29e7e22418803.gif'); background-repeat: repeat; background-color: #000;z-index:0;}
#fullscreen {position:absolute; top:3%; right:3%; font:normal 2em 楷体; color:#ff0000; cursor:pointer; z-index:10;opacity:0;}
#papa:hover #fullscreen {display:block; opacity:1; }
#video1 {position:absolute; width:100%; height:100%; object-fit:cover; -webkit-mask:linear-gradient(to right top, red 5%, transparent 92%, transparent); transform:rotateX(0deg); pointer-events:none;left:0px;z-index:1}
#shiping { position: absolute; width: 450px; height: 800px; overflow: hidden; cursor: pointer;margin-top:0px ;z-index:2;}
.video-bg {width:100%; height: 100%; float: left; -webkit-mask: radial-gradient(closest-side, red, red, transparent); transform:rotateX(0deg); pointer-events:none;}
.stop .video-bg {animation-play-state: paused;}
#play-pause-btn {position:absolute; bottom: 10px; left:6%; width:30px; height:30px; cursor:pointer; z-index:99; background:url('https://pic1.imgdb.cn/item/6974abbe12d4e117ead3fb9d.jpg') center/cover no-repeat; border-radius:50%;}
#play-pause-btn.paused {background-image: url('https://pic1.imgdb.cn/item/6974abb412d4e117ead3fb5e.jpg') }
#tmsg {position: absolute; font:normal 14px sans-serif; color: #00ff00; bottom: 15px; right:2.5%; }
#prog {position:absolute; width:80%; height:6px; cursor:pointer; bottom: 20px; margin:0px 10%; border-radius:9px; background: #eee; z-index:99;}
#lrc{left: 14%;bottom: 110px;}
#lrcc {right:15%; bottom: 30px;text-align:right;}
#lrc,#lrcc{ --state: paused; --motion: cover2; --tt: 2s; --bg: linear-gradient(180deg, #880000, #880000); border:0px solid black; position: absolute; z-index: 2; font:normal 3.5em 楷体; color: #ff0000; white-space: pre; -webkit-background-clip: text; filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0); z-index: 20;}
#lrcc::before,#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}
@keyframes cover2 {}
.spwz1 {position:absolute; top:20px; left:50px; color:#ff0000; text-align:center; font: normal 50px/1.2 华文行楷; z-index:1; overflow:hidden; writing-mode: vertical-rl; text-orientation: upright; height:300px; width:70px; border:0px solid #000; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgb(255,0,0); background-image:url('https://z3.ax1x.com/2021/09/13/4PAYtI.gif'); background-repeat: repeat;z-index:9;}
</style>

<div id="papa" >
<span id="fullscreen">全屏</span>
<audio id="aud" src="https://www.dda5.com/plug/down.php?ac=mp3&id=34f33ca2ac74445e41622df6eb9cc988" autoplay loop ></audio>
<video autoplay="" id="video1" loop="" muted="" playsinline src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6dda0115f.mp4"> </video>
<div id="shiping">
<video autoplay="" id="video-bg" class="video-bg" loop="" muted="" playsinline src="https://img1.oldkids.cn/upload/2025/08/11/blog_260802952_20250811153623950.mp4" > </video>
</div>
<div class="spwz1">风吹散过往</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<div id="play-pause-btn" title="播放/暂停"></div>
<div id="prog"></div>
<div id="tmsg">00:00|00:00</div>
</div>
<div style="height:70px;"> </div>
<span id="lrcStr" style="visibility: hidden;">
《风吹散过往》
演唱：恰恰恰恰恰
风轻轻吹散太多的过往
吹散了太多的时光
无论是忧伤或者是迷茫
再回首都值得珍藏
雨轻轻带走了太多的彷徨
大雾散去会有阳光
这趟人生路上难免多沧桑
慢慢走无需太慌张
你看那季节来来又往往
写下来日和方长
只愿这一生人间走一趟
不负岁月的滚烫
你看那命运摇摇又晃晃
脚下路始终在向前方
世事多无常也算是平常
活的够荒唐才不荒唐
雨轻轻带走了太多的彷徨
大雾散去会有阳光
这趟人生路上难免多沧桑
慢慢走无需太慌张
你看那季节来来又往往
写下来日和方长
只愿这一生人间走一趟
不负岁月的滚烫
你看那命运摇摇又晃晃
脚下路始终在向前方
世事多无常也算是平常
活的够荒唐才不荒唐
</span>
<script >
(function(){
let fs = true;
const papa = document.getElementById('papa');
const aud = document.getElementById('aud');
const lrc = document.getElementById('lrc');
const lrcc = document.getElementById('lrcc');
const fullscreen = document.getElementById('fullscreen');
const playPauseBtn = document.getElementById('play-pause-btn'); // 播放暂停按钮
const prog = document.getElementById('prog');
const tmsg = document.getElementById('tmsg');
const videoBg = document.getElementById('video-bg'); // 唱歌视频元素
const video1 = document.getElementById('video1'); // 背景视频元素
const VIDEO_URL_A = 'https://img2.oldkids.cn/upload/2026/01/28/blog_260802952_20260128223353956.mp4'; // 指定时间段的视频地址
const VIDEO_URL_B = 'https://img1.oldkids.cn/upload/2025/08/11/blog_260802952_20250811153623950.mp4'; // 其他时间段的视频地址
let currentVideoUrl = VIDEO_URL_B; // 记录当前使用的视频地址，避免频繁切换
let mState = () => {
if(aud.paused) {
lrc.style.setProperty("--state","paused");
lrcc.style.setProperty("--state","paused");
videoBg.classList.add('stop');
video1.pause(); // 实际暂停背景视频
videoBg.pause(); // 实际暂停唱歌视频
papa.style.setProperty('--state', 'paused');
playPauseBtn.classList.add('paused'); // 按钮添加paused类，切换图片
} else {
lrc.style.setProperty("--state","running");
lrcc.style.setProperty("--state","running");
videoBg.classList.remove('stop');
video1.play(); // 实际播放背景视频
videoBg.play(); // 实际播放唱歌视频
papa.style.setProperty('--state', 'running');
playPauseBtn.classList.remove('paused'); // 移除paused类，恢复播放图片
}
};
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = val % 60;
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
const checkAndSwitchVideo = () => {
const currentTime = aud.currentTime;
let targetUrl = VIDEO_URL_B;

//0-24.63
//120-144.72
//216.66-236

if (
(currentTime >=0 && currentTime <= 24.63) ||
(currentTime >=120 && currentTime <= 144.72) ||
(currentTime >=216.66 && currentTime <=236.8)

)
{
targetUrl = VIDEO_URL_A;
}
if (targetUrl !== currentVideoUrl) {
currentVideoUrl = targetUrl;
videoBg.src = currentVideoUrl;
// 保持视频的播放属性
videoBg.autoplay = true;
videoBg.loop = true;
videoBg.muted = true;
videoBg.playsinline = true;
// 切换后恢复播放状态（如果音频正在播放）
if (!aud.paused) {
videoBg.play();
}
}
};
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('seeked', () => {
calcKey();
checkAndSwitchVideo(); // 进度跳转后也检测视频地址
});/*监听进度跳转事件*/
aud.addEventListener('playing', () => calcKey());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
tmsg.innerText = toMin(aud.currentTime) + '|' + toMin(aud.duration);
checkAndSwitchVideo(); // 实时检测时间段并切换视频
});
let cKey = 0;
aud.addEventListener('timeupdate', () => {
for (let j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
playPauseBtn.addEventListener('click', () => {
if(aud.paused) {
aud.play();
} else {
aud.pause();
}
});
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
};
fullscreen.onclick = () => {
fs ? (
fullscreen.innerText = '退出',
papa.requestFullscreen().catch(err => console.log('全屏失败：', err))
) : (
fullscreen.innerText = '全屏',
document.exitFullscreen()
);
fs = !fs;
};
let mKey = 0, averAdd = 0.3;
let lrcTime = (ar) => {
let tmpAr = [];
for(let j = 0; j < ar.length - 1; j ++) {
tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = (tmpAr.reduce((a,b) => a + b, 0) / (tmpAr.length || 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(let x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'').trim();
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]/g,'');
let time = x.match(re);
if(time != null) {
for(let y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(let z in tmp) {
sec += tmp * calcRule;
}
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
let showLrc = (time) => {
let lrca=lrcAr;
let lrcb=lrcAr.length==mKey+1?"":lrcAr;
let Y=String(mKey/2).indexOf(".");
if (Y == -1) {
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
} else{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
let calcKey = () => {
for (let j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
let lrcAr = getLrcAr(lrcStr.innerHTML);
mState();
checkAndSwitchVideo();
})();
</script>

也曾年轻 发表于 2026-2-6 21:58

https://pic.rmb.bdstatic.com/bjh/news/20fc9a8156f2c6bcf0dff73cfb6897c7.gif

梦江南 发表于 2026-2-7 08:40

欣赏版主的深情演唱。{:4_187:}

寒冬残荷 发表于 2026-2-7 08:54

也曾年轻发表于 2026-2-6 21:58

老师，早上好！感谢点赞！{:5_106:}

寒冬残荷 发表于 2026-2-7 08:56

也曾年轻发表于 2026-2-6 21:58

我这是在学双行LRC歌词（仿KTV歌词）和视频对口型{:5_106:}

寒冬残荷 发表于 2026-2-7 09:03

梦江南发表于 2026-2-7 08:40
欣赏版主的深情演唱。

早上好！感谢您的鼓励和支持！我这是学用代码对口型的，不是我演唱，我若唱得这么好就可以当歌星发财啦！{:5_106:}

寒冬残荷 发表于 2026-2-7 09:12

也曾年轻发表于 2026-2-6 21:58

昨晚的代码两个视频中16:9的使用滤镜代码，我在测试时正常，放到这里不正常（不显示），今早我修改了。但我不明白为什么？因为这里好像允许使用滤镜的呀！学音画代码，理论知识和实际应用有一些矛盾！

寒冬残荷 发表于 2026-2-7 11:23

也曾年轻发表于 2026-2-6 21:58

我这个帖子的代码目的是学习双行LRC歌词和视频的对口型。视频对口型我用了两个AI生成的小视频，一个是唱歌时的，一个是唱歌停顿时的。

红影发表于 2026-2-7 18:21

漂亮的制作，欣赏寒冬残荷好帖{:4_199:}

偶然~ 发表于 2026-2-8 11:50

来欣赏寒冬残荷的精品佳作！

偶然~ 发表于 2026-2-8 11:50

视频制作大气！

偶然~ 发表于 2026-2-8 11:50

偏偏喜欢你国语版也动听

偶然~ 发表于 2026-2-8 11:50

情感真挚，唱入心扉。

偶然~ 发表于 2026-2-8 11:50

声如天籁，陶醉其中。

偶然~ 发表于 2026-2-8 11:50

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2026-2-8 11:50

期待寒冬残荷佳作频出！

偶然~ 发表于 2026-2-8 11:50

感谢你带来的精彩，辛苦了！祝您和家人岁岁安康，幸福吉祥！

页: [1]

花潮论坛's Archiver

《风吹散过往》