《月满西楼》（一个人的中秋，没事做乱喊两句）

寒冬残荷 发表于 2025-10-6 13:36

本帖最后由寒冬残荷于 2025-10-6 16:22 编辑 <br /><br /><style>
#papa {position:relative; margin:90px auto 45px calc(50% - 881px); width:1600px;height:900px; box-shadow:3px 3px 20px #000; z-index:1; display:grid; place-items:center;overflow: hidden; background:#ffffff url('https://pic1.imgdb.cn/item/68a53b5958cb8da5c83bc777.jpg') no-repeat center/cover; opacity:1}
#mdiv {z-index: 10; --size: 0px;--color: teal;position: relative;left: calc(-35% - var(--size) / 2);top: 230px;width: var(--size);height: var(--size);display: grid;place-items: center;animation: rot 8s linear infinite ;cursor: pointer; font-size: 66px;}
#mdiv::before, #mdiv::after {position: absolute;content: '';width: 0;height: 0;border-style: solid;border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);border-color: var(--color) transparent;border-radius: 100% 100% 100% 100%;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#f00; opacity:.5; cursor: pointer; z-index: 111}
#vid {position:absolute; z-index: 2;width:100%; height:100%; object-fit:cover; margin:0px; pointer-events:none;}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #FF0000, #000000, #FF00FF);position: absolute;z-index: 6;left: 50%; top: 78%;transform: translate(-50%);font:normal 4em STKaiti; font-weight:700; color:#FF0000; white-space:pre; -webkit-background-clip:text; filter:drop-shadow(#FFFFFF 2px 0 0)drop-shadow(#FFFFFF 0 2px 0)drop-shadow(#FFFFFF -2px 0 0) drop-shadow(#FFFFFF 0 -2px 0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="papa">
<div id="mdiv" title="">❤️</div>
<div data-lrc=" " id="lrc" title="歌词显示"> </div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://cccimg.com/view.php/bb4262678915ea064c02187e4cb8d9fd.mp3" autoplay loop ></audio>
<video id="vid" src="https://cccimg.com/view.php/6f77aa3bd109c06a09fc1ffe14a03457.mp4" autoplay loop muted ></video>
</div>
<div style="height:60px;"></div>

<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play()):(aud.pause(),vid.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script >
(function() {
let lrcStr = `
《月满西楼》
作词:（宋）李清照
作曲:苏越
翻唱:寒冬残荷
红藕香残玉簟秋
轻解罗裳独上兰舟
云中谁寄锦书来
雁子回时月满西楼
　
花自飘零水自流
一种相思两处闲愁
此情无计可消除
才下眉头却上心头
却上心头

红藕香残玉簟秋
轻解罗裳独上兰舟
云中谁寄锦书来
雁子回时月满西楼

花自飘零水自流
一种相思两处闲愁
此情无计可消除
才下眉头却上心头
却上心头
花自飘零水自流
一种相思两处闲愁
此情无计可消除
才下眉头却上心头
却上心头
感谢聆听
`;
let mKey = 0, mFlag = true, averAdd = 0.3;
let lrcTime = (ar) => { let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) { if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (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(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
let calcKey = () => {
for (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 toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mdiv.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mdiv.style.animationPlayState = 'running');
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
let lrcAr = getLrcAr(lrcStr);
})();
</script>

寒冬残荷 发表于 2025-10-6 13:47

本帖最后由寒冬残荷于 2025-10-6 13:52 编辑

背景视频为AI文生视频，上传在彩虹外链网盘，此贴的mp3文件也是放在此盘，因没舍得付费使用，有时读取文件读不了。{:5_114:}

小辣椒 发表于 2025-10-6 14:19

寒冬残荷发表于 2025-10-6 13:47
背景视频为AI文生视频，上传在彩虹外链网盘，此贴的mp3文件也是放在此盘，因没舍得付费使用，有时读取文件 ...

是的，出来速度有点慢，刷新几次看见了

小辣椒 发表于 2025-10-6 14:23

这个原视频做的非常漂亮，你这个就可以直接视频做背景，加歌词上去

小辣椒 发表于 2025-10-6 14:23

欣赏老师的精彩制作和好声音{:4_208:}

红影发表于 2025-10-6 14:48

这个视频漂亮，演唱更是好听，这个内容很适合中秋的满月呢。
欣赏寒冬残荷好歌，节日快乐{:4_199:}

寒冬残荷 发表于 2025-10-6 15:55

小辣椒发表于 2025-10-6 14:23
这个原视频做的非常漂亮，你这个就可以直接视频做背景，加歌词上去

小辣椒美女管理员，谢谢你的鼓励和支持！开始是直接用视频做背景的，但我这里视频总是打不开，我怕大家也和我一样才加了一张背景图呀！{:5_106:}

寒冬残荷 发表于 2025-10-6 17:23

红影发表于 2025-10-6 14:48
这个视频漂亮，演唱更是好听，这个内容很适合中秋的满月呢。
欣赏寒冬残荷好歌，节日快乐

谢谢美女红影管理员的鼓励和支持！祝你中秋节快乐！

樵歌发表于 2025-10-6 17:28

寒冬残荷发表于 2025-10-6 13:47
背景视频为AI文生视频，上传在彩虹外链网盘，此贴的mp3文件也是放在此盘，因没舍得付费使用，有时读取文件 ...

很流畅的，谢谢你的特殊的最美的中秋祝福！{:4_204:}

樵歌发表于 2025-10-6 17:30

气息饱满，声音浑厚，嗓子干净，不但动听，还很有韵味！{:4_178:}

樵歌发表于 2025-10-6 17:32

视频也做得极好，其中一帧帧的画面完全　切合中秋的意境。厉害得不要不要的！{:4_176:}

樵歌发表于 2025-10-6 17:32

那天你说的帖子，我没找到。{:4_203:}

樵歌发表于 2025-10-6 17:33

这下子可是真真的听是美女的声音了，该不会错吧{:4_170:}

樵歌发表于 2025-10-6 17:35

小辣椒发表于 2025-10-6 14:23
这个原视频做的非常漂亮，你这个就可以直接视频做背景，加歌词上去

快点教我做简单的音画和歌词同步{:4_179:}

小辣椒 发表于 2025-10-6 19:55

寒冬残荷发表于 2025-10-6 15:55
小辣椒美女管理员，谢谢你的鼓励和支持！开始是直接用视频做背景的，但我这里视频总是打不开，我怕大家也 ...

现在看见原视频了，非常的漂亮，谢谢老师分享{:4_171:}

小辣椒 发表于 2025-10-6 19:58

樵歌发表于 2025-10-6 17:35
快点教我做简单的音画和歌词同步

樵哥哥，这个是AI图制作的视频，直接加了歌词同步，你应该先学会剪影的视频制作，再加歌词就可以了

寒冬残荷 发表于 2025-10-6 20:26

樵歌发表于 2025-10-6 17:30
气息饱满，声音浑厚，嗓子干净，不但动听，还很有韵味！

谢谢樵管的鼓励和支持！我会继续努力，不辜负您的期望！{:5_106:}

寒冬残荷 发表于 2025-10-6 20:34

樵歌发表于 2025-10-6 17:33
这下子可是真真的听是美女的声音了，该不会错吧

我嗓子像男人声，你认为我是男的也正常！

至于美女不敢当，这辈子“美女”与我无关！{:5_106:}

寒冬残荷 发表于 2025-10-6 20:36

樵歌发表于 2025-10-6 17:32
那天你说的帖子，我没找到。

你说这话是搞笑的吧？！（就点击我的那句话便可跳到我的那个帖子去）

澜天发表于 2025-10-6 21:16

刷新了几次
只看到题目
先占个座
明天再来听
中秋快乐
{:4_204:}

页: [1] 2

花潮论坛's Archiver

《月满西楼》（一个人的中秋，没事做乱喊两句）