【翻唱】《情罪》（套用马老师代码）
本帖最后由 寒冬残荷 于 2025-12-5 13:35 编辑 <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; letter-spacing: 4px; color: skyblue;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 -2px0);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:#fff; 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="https://txmov2.a.kwimgs.com/ksc1/3LC0nvp6n2_19yLm6tkaWCelNkyRPBTotH7_zI097-msgZYrYdpoePdu8UBLw-KBXOCYwtIhAsjxV2BTG3QnpyaMw912XAOrGeaBXvz9lBLawofCE2GXxRG2JeER77dhffWRoUzlOKF36q6RLicdcVQWBHB9CRSLgQkRMzof0-aDFv-Vp7U1NPnnvRrYvK1a.mp4" autoplay loop muted oncontextmenu="return false;"></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=MOKdrGMdv7l0nMTc&shareuid" autoplay></audio>
<div id="wrapper">花潮马老师的音乐MV播放器</div>
</div>
<div style="height:100px;"></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谢谢观看`;
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>
本帖最后由 寒冬残荷 于 2025-12-5 14:59 编辑
喊到大半竟哽咽了，差点喊不完{:5_149:}
遗憾爱还是凄美的谢幕！ 幸福人生内心丰盈
心灵修行动人风景
保持向上发芽心情
心存静好花香满径
智慧开启要拼会赢
开拓进取勇毅前行
快乐日子魂牵梦萦
心如止水宽广心胸
珍惜时光描摹层层
保持热爱情有独衷
早安吉祥乐在其中 来欣赏寒冬残荷的精品佳作！
演绎精彩
歌声唯美
寒冬残荷的歌声悦耳, 情感浓深
声音圆润自如，音质优美
寒冬残荷唱的太棒了！我听的都醉了！
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢寒冬残荷带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 今天才看到抖音上一个老师在教唱这首歌，可惜有事没听几句，这下可好，范本来了！{:4_178:} 听你的气息，听你的声音通道，有点像科班学过的。 感悟代入太到位了，老邓 共情共鸣了。这歌你若是再唱估计要落泪的。。。。。 你的声音浑厚圆润，很适合唱这歌，而且，高得上去，低得下来！很适合这类抒情歌曲，比如草原歌。 演绎极具感染力，声音完美地诠释了歌曲中的情感起伏。和毫不保留的情感释放，{:4_204:} 偶然~ 发表于 2025-12-5 13:52
幸福人生内心丰盈
心灵修行动人风景
保持向上发芽心情
谢谢偶然管管的鼓励和支持！问好！
内心丰盈才幸福！
偶尔的伤感是一种短暂的情感发泄。
科学研究表明，悲伤和忧郁情绪并非总是负面的，它们可以成为情感宣泄的渠道，帮助人们更好地面对生活挑战，并激励个人成长与成就。
未知名 发表于 2025-12-5 14:14
今天才看到抖音上一个老师在教唱这首歌，可惜有事没听几句，这下可好，范本来了！
老师过奖！能得到您（论坛的歌唱大腕之一）的加分鼓励，我心里满是欢喜与感激。
未知名 发表于 2025-12-5 14:15
听你的气息，听你的声音通道，有点像科班学过的。
什么科班呀？{:5_106:}您不见我的留言说是“喊”的，而不是唱。小学时学的音乐课什么也没学到，加上人自卑，连在人前说话的胆都没有，更别说开口唱歌了。
晚年赶上能用手机的好时代，在手机上下载了个《全民K歌》app，躲在家里对着手机乱喊。怕别人笑话，我在APP上一概不加朋友。
未知名 发表于 2025-12-5 14:16
感悟代入太到位了，老邓 共情共鸣了。这歌你若是再唱估计要落泪的。。。。。
我每次唱这首歌都会哽咽唱不完，今天唱到后半部才哽咽，还好能稳定情绪把它唱完了。{:5_149:}
页:
[1]
2