【翻唱】《人生就这么一晃》（套用马老师代码）
本帖最后由 寒冬残荷 于 2025-12-4 21:33 编辑 <br /><br /><style>#pa {position: relative;margin:90px auto 45px calc(50% - 721px); width: 1280px ;height: 720px;display: grid;place-items: center;z-index: 1;border:#d0d0d0 15px inset; border-top:#e0e0e0 15px inset; border-bottom:#adadad 15px inset; overflow: hidden; }
#wrapper {position: absolute;padding: 0px;font: bold 2rem/1.2 sans-serif;text-shadow: 1px 1px 1px gray;bottom: 20px;z-index: 12;}
.char {display: inline-block;padding: 0 ;opacity: 0;transform: translate(var(--x), var(--y));animation: fadeIn 0.3s var(--delay) forwards;}
@keyframes fadeIn {to {transform: translate(0, 0);opacity: 1;}}
#vid{position: absolute; width: 100%; height: 100%; object-fit:contain; padding-top: 0px; z-index: 1;}
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#000; opacity: .3; cursor: pointer; z-index: 11}
#mdiv {position: absolute; width: 60px; height: 60px; overflow: hidden; border-radius:50%; bottom:20px; left:20px; cursor: pointer; z-index: 11; animation: rot 6s infinite linear; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="pa">
<video id="vid" src="http://txmov2.a.kwimgs.com/ksc1/fESiPUiTtRHq_ovWXTulnkyJ6pBHy_Yk8pnryk6EsOZj70UstHrmUMTCIE75GOjfdzOMe3_rKvPrFNo5gZLsqy4gkqk9oXRVGzbxuvea4m6Pvqtp5Odf0_z8sIuhkL-di3ZSxSeNbDk40VTxXT6I8c2TkOkYjeR0p4OwjtkReduoEvSNOHMvyosAAYhVgq70.mp4" autoplay loop muted style="width: 100%; height: 100%;"></video>
<img id="mdiv" src="https://pic1.imgdb.cn/item/692d4f84c2ca2fe15cef15e0.png" alt="" />
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=lCard4lr_2uefll1&shareuid"autoplay></audio>
<div id="wrapper">花潮马老师的音乐MV播放器</div>
</div>
<script>
const gc = `《人生就这么一晃》\n翻唱：寒冬残荷\n岁月的风霜印上了我脸庞\n你是否还记得我曾经年轻的模样\n花样的年华也曾像花一样的绽放\n蓦然回首容颜已经失去了柔光\n时光的枫叶在枝头上摇晃\n你是否记得我们曾经共度的时光\n一辈子说短也不短说长它也不长\n不知不觉我们已经走进了夕阳\n人生就这么一晃晃成一头白发苍苍\n不再问世态是多么的炎凉\n去讨斤又还两\n恩怨情仇轻轻的放下\n化作天上淡淡月光\n红尘的路上谁没有饮尽寒来暑往\n人生就这么一晃\n晃成一头白发苍苍\n不再问命运有多么的曲折\n是惩罚是奖赏\n静静回望过往的时光\n眷恋还是那么的长\n昔日的浓情我和你一起慢慢品尝\n\n时光的枫叶在枝头上摇晃\n你是否记得我们曾经共度的时光\n一辈子说短也不短说长它也不长\n不知不觉我们已经走进了夕阳\n人生就这么一晃\n晃成一头白发苍苍\n不再问世态是多么的炎凉\n去讨斤又还两\n恩怨情仇轻轻的放下\n化作天上淡淡月光\n红尘的路上谁没有饮尽寒来暑往\n人生就这么一晃\n晃成一头白发苍苍\n不再问命运有多么的曲折\n是惩罚是奖赏\n静静回望过往的时光\n眷恋还是那么的长\n昔日的浓情我和你一起慢慢品尝\n谢谢观赏！`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play()):(aud.pause(),vid.pause(),vido.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 = '退出全屏', pa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
@马黑黑 谢谢马老师！我喜欢这款的代码！{:5_117:} 来欣赏寒冬残荷的精品佳作！
演绎精彩
歌声唯美动听
声音悦耳, 情感浓深
我这人懒惰，再加上时间有限（家务忙），用花潮歌词要多一步，需找到马老师的那个网页来转换歌词…… 声音圆润自如，音质优美
寒冬残荷唱得太棒了！我听的都醉了！
音画制作大气唯美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢寒冬残荷带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 歌儿唱的好，帖子做的好，谢谢残荷精彩分享{:4_204:} 寒冬残荷朋友的演唱有滋有味，欣赏了。谢谢寒冬残荷朋友！ 这个的视频又用的寒冬残荷年轻时的照片吧，漂亮。
这首歌的歌词很好，十分实在。演唱也特别好。{:4_187:}
寒冬残荷太棒了，唱得好，帖子做得也好，很赞呐{:4_199:} 欣赏老师精美音画与深情演唱！向您学习，恭祝幸福康乐！ 声音通透圆润，非常好听！{:4_199:} 气息稳定，声线连续，非常会唱歌！帖子特别是歌词同步做得好。{:4_204:} 偶然~ 发表于 2025-12-4 12:28
声音圆润自如，音质优美
谢谢偶然管管的鼓励和支持！问好！
页:
[1]
2