论坛 › 翻唱朗诵 › 《多少人再没遇见》

寒冬残荷 发表于 2025-10-19 13:57

《多少人再没遇见》

<style>
#papa {position:relative; background: url('https://pic1.imgdb.cn/item/68a53b5958cb8da5c83bc777.jpg')no-repeat center/cover; margin:90px auto 45px calc(50% - 721px); width:1280px;height:720px; box-shadow:3px 3px 20px #000; z-index:1; display:grid; place-items:center;overflow: hidden;}

#vid {position:absolute; z-index: 2;width:100%; height:100%; object-fit:cover; mix-blend-mode:soft-light; margin-top:0px; transform:rotateX(0deg); pointer-events:none;}
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: .3; cursor: pointer; z-index: 111}

.lrc{position:absolute; top:5%; left:7%; width:60%; height: 78%; z-index:9; overflow:hidden; display:block; margin:20px -150px;}

.lrc #ullrc{width:100%; padding:0; list-style:none; transition:0.3s all ease; margin: 0;}
/*普通歌词的字体、大小，为0则不显示，只有一行当前（动态）歌词*/
.lrc #ullrc li{height:50px; line-height:50px; font-family:KaiTi; font-size:24px; color:#000078; font-weight: normal;transition: .3s all ease;list-style-type: none; text-align:center;display: block;width: 100%;filter:drop-shadow(#00bfff 1px 0 0) drop-shadow(#00bfff 0 1px 0) drop-shadow(#00bfff -1px 0 0) drop-shadow(#00bfff 0 -1px 0); margin: 0 auto;}
/* 当前歌词的大小、颜色 */
.lrc #ullrc li.active{font-size:44px; font-weight: 900;color:#0000ff; text-align:center; transform:translate(0%,0%);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);}

#bt{ width: 200px; overflow: hidden; color: #00ffff; position: absolute; left:77%;bottom: 2%; font-size: 15px; z-index: 9;}

</style>

<div id="papa">
<span id="fullscreen">全屏欣赏</span>
<video id="vid" src="https://cccimg.com/view.php/ad563345f1bfd334e9e7d03d200188ea.mp4" autoplay loop></video>
<div class="lrc"><ul id="ullrc"></ul></div>
<css-doodle id="mplayer">
:doodle {z-index:80 ; @grid: 2 / 260px 60px; position: absolute; color: var(--color); bottom: 5%;left: 72%; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: DeepSkyBlue; --state: paused; }
/* 时间信息 : 左 */
@nth(1) { @place: 10% 80%; :after { content: var(--ttmsg1); } }
/* 控制器 */
@nth(2) { @size: var(--size); clip-path: @shape( points: 360; r: abs.sin.tan(sin(3.5t)*1.14); ); @place: 45% 35%; background: var(--color); animation: rot 6s infinite linear var(--state); }
/* 时间信息 : 右 */
@nth(3) { @place: 80% 80%; :after { content: var(--ttmsg2); } }
/* 进度条 */
@nth(4) { @place: 40% 80%; @size: 100% 2px; background: #bbb; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: var(--color); } }
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://up.mediy.cn/%E5%A4%9A%E5%B0%91%E4%BA%BA%E5%86%8D%E6%B2%A1%E6%9C%89%E9%81%87%E8%A7%81_ebfb136b0127e59f85a777945ad6d542.mp3" autoplay loop ></audio>
<span id="bt">多少人再没遇见</span>
</div>
<div style="height:100px;"></div>

<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>

<script>
(function() {let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
});
mplayer.onclick = () => {
if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
if(clickIdx === 2) aud.currentTime = progChg;
}
mplayer.onmousemove = (e) => {
let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
mplayer.style.cursor = cursors;
if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
}
})();
</script>
<script >
var lrc = `翻唱《多少人再没遇见》
作词：苏心淇
作曲：珞岩
翻唱：寒冬残荷
LRC歌词：寒冬残荷
青春在散场时来不及说再见
那时以为还会有很多的时间
人生却一转眼已经沧海桑田
过去时光只能用来怀念
有一份单纯还停留在从前
每当我想起你心里就很温暖
一起曾说过的那些美好心愿
不知道你后来是否都已实现
多少人一别后就再也没遇见
匆匆半生流年
总是感到莫名伤感
人生有聚有散
过了一天少一天
我们都要平安
多想还能见一面
　　
有一份单纯还停留在从前
每当我想起你心里就很温暖
一起曾说过的那些美好心愿
不知道你后来是否都已实现
多少人一别后就再也没遇见
匆匆半生流年
总是感到莫名伤感
人生有聚有散
过了一天少一天
我们都要平安
多想还能见一面
多少人一别后就再也没遇见
匆匆半生流年
总是感到莫名伤感
人生有聚有散
过了一天少一天
我们都要平安
多想还能见一面
我们都要平安
多想还能见一面
感谢聆听！

`;
function $(id) {
return document.getElementById(id);
}
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 50, lrc_ul_height = 160;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
lrc.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>lrc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => lrc.style.animationPlayState = 'paused');
</script>

寒冬残荷 发表于 2025-10-19 13:58

周末不用带孙玩一下代码{:5_117:}

红影 发表于 2025-10-19 14:19

这样的歌名看着就让人莫名感慨，多少人再没遇见，为什么要有争执有矛盾，能在一起多不容易啊{:4_204:}

红影 发表于 2025-10-19 14:21

听听这样的歌曲跟着感慨一下很不错，寒冬残荷的演唱很真诚，休息天，静静聆听好歌{:4_199:}

红影 发表于 2025-10-19 14:23

漂亮的歌词同步，右边还有个演唱动图，演唱好，帖子制作也很好。
给寒冬残荷点赞{:4_199:}

寒冬残荷 发表于 2025-10-19 14:42

红影 发表于 2025-10-19 14:19
这样的歌名看着就让人莫名感慨，多少人再没遇见，为什么要有争执有矛盾，能在一起多不容易啊

谢谢红影管理的鼓励支持！

哎呀，我是老年人，周末闲了看到这样的歌曲喜欢（因为有共鸣）就乱喊喊！你们年青人不会有莫名感慨的！

寒冬残荷 发表于 2025-10-19 14:46

红影 发表于 2025-10-19 14:23
漂亮的歌词同步，右边还有个演唱动图，演唱好，帖子制作也很好。
给寒冬残荷点赞

背景是一个视频，是把我的照片用即梦AI让照片开口{:5_106:}。老了怕忘记所学的，就全操作一遍：唱歌、AI做视频、制作LRC歌词、播放器代码……

红影 发表于 2025-10-19 16:03

寒冬残荷 发表于 2025-10-19 14:42
谢谢红影管理的鼓励支持！

哎呀，我是老年人，周末闲了看到这样的歌曲喜欢（因为有共鸣）就乱喊喊！你 ...

能引起共鸣的歌曲，大家都会喜欢，这个没分别的{:4_187:}

红影 发表于 2025-10-19 16:04

寒冬残荷 发表于 2025-10-19 14:46
背景是一个视频，是把我的照片用即梦AI让照片开口。老了怕忘记所学的，就全操作一遍：唱歌、AI ...

原来是这么全面的技能集合，原来寒冬残荷这么漂亮，太赞了{:4_199:}

樵歌 发表于 2025-10-19 17:03

声音通道很开阔，共鸣很好，像有只音箱一样{:4_204:}

樵歌 发表于 2025-10-19 17:05

辛苦啦，周末好好休闭一下，唱一首喜欢的歌，大家听了都开心{:4_190:}

寒冬残荷 发表于 2025-10-19 17:13

红影 发表于 2025-10-19 16:04
原来是这么全面的技能集合，原来寒冬残荷这么漂亮，太赞了

影子，用AI生视频/图，多丑的都能变美呀！{:5_106:}

寒冬残荷 发表于 2025-10-19 17:16

樵歌 发表于 2025-10-19 17:03
声音通道很开阔，共鸣很好，像有只音箱一样

谢谢樵歌管理的鼓励支持！

用《全民K歌》唱录的，它有效果处理（交人民币成VIP）！{:5_117:}

寒冬残荷 发表于 2025-10-19 17:18

樵歌 发表于 2025-10-19 17:05
辛苦啦，周末好好休闭一下，唱一首喜欢的歌，大家听了都开心

为儿女辛苦！辛苦并快乐着！{:5_117:}

漫云儿 发表于 2025-10-19 17:30

第一次听这歌好听！{:4_199:}
视屏左边我手机看不到。

寒冬残荷 发表于 2025-10-19 17:45

漫云儿 发表于 2025-10-19 17:30
第一次听这歌好听！
视屏左边我手机看不到。

谢谢漫云儿美女临帖！

我是乱喊的，主要是想学论坛的播放器代码，不知道上哪要MP3链接地址，就使用我在《全民K歌》乱喊的歌曲了，开始我也不敢，但最后想反正在网上被笑我也看不到{:5_117:}

寒冬残荷 发表于 2025-10-19 17:46

漫云儿 发表于 2025-10-19 17:30
第一次听这歌好听！
视屏左边我手机看不到。

我的代码宽高使用了固定值，手机应该看不了吧？！

樵歌 发表于 2025-10-19 17:52

寒冬残荷 发表于 2025-10-19 17:18
为儿女辛苦！辛苦并快乐着！

你真是个好母亲，好奶奶！{:4_204:}

漫云儿 发表于 2025-10-19 17:53

寒冬残荷 发表于 2025-10-19 17:45
谢谢漫云儿美女临帖！

我是乱喊的，主要是想学论坛的播放器代码，不知道上哪要MP3链接地址，就使用我 ...

是唱的好听！多唱唱。

樵歌 发表于 2025-10-19 17:55

寒冬残荷 发表于 2025-10-19 17:16
谢谢樵歌管理的鼓励支持！

用《全民K歌》唱录的，它有效果处理（交人民币成VIP）！

人家歌唱家都要在后台一句一句的修音呢。有好多在台上对囗型，就是这个道理{:4_173:}

查看完整版本: 《多少人再没遇见》