雪线之上【填词有误】

亚伦影音工作室 发表于 2025-9-29 22:26

本帖最后由亚伦影音工作室于 2025-10-7 10:42 编辑 <br /><br /><style>
#papa { margin: 10px -300px ; width: 1286px; height: 720px;background: linear-gradient(123deg, #FB0000 15%,rgba(248, 0, 0, 0) 75%),url(https://pic1.imgdb.cn/item/68da9671c5157e1a88465625.jpg) no-repeat center/cover; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;border-radius: 0px 0px;--state: running;}
#lrc{right:5%;top: 8%;}#lrcc {right:10%;top: 16%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;letter-spacing: 1px;font:normal 2.4em 华文隶书;color: #000;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;z-index: 9;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);background-clip: text; /* 重设背景剪裁风格（重要） */-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0;}to { height: 100%;} }
#wx{ position: absolute;width: 400px; height: 400px;overflow:hidden;left: 2%; top: 10%;}
#photo { position: absolute;width: 60px; height: 60px;animation: rot 0.15s linear infinite var(--state);transform-origin: 50% center;z-index: 10; cursor: pointer; }
#photo:nth-of-type(1) { left: 5%; top: 20%; width: 180px; height: 180px; }
#photo:nth-of-type(2) { left: 45%; top: 10%; }
#photo:nth-of-type(3) { left: 62%; top: 25%; }
#photo:nth-of-type(4) { left: 62%; top: 45%; }
#photo:nth-of-type(5) { left: 45%; top: 60%; }
@keyframes rot {0% { filter:hue-rotate(100deg) ;}}
#mplayer { position: absolute; text-align: center; top: 86%; z-index: 60;color:#ffffff;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 1%;bottom: 10px;width: 98%;text-align-last: justify;}
#mprog { width: 350px; height: 2px;-webkit-appearance: none;background-color: transparent;
         outline: none; cursor: pointer;border-radius: 0px; }

#mprog::-webkit-slider-container {
height: 8px;border-radius: 50px;
overflow: hidden;
}
#mprog::-webkit-slider-runnable-track {
height: 2px;border-radius: 0px;
background: #555;
}
#mprog::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
border: 1px solid transparent;
margin-top: -4px;
border-image: linear-gradient(#000,#000) 0 fill / 5.5 11 5.5 0 / 0px 0px 0 2000px;
}
#btnplay { width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
@keyframes rotating { to { transform: rotate(360deg);} }

</style>
<div id="papa">
<audio id="aud"autoplay="autoplay" loop="loop" src="https://s2.cldisk.com/sv-w7/audio/4b/3c/5e/b5d56757100237aa33d2aafe66980dfb/audio.mp3" type="audio/mp3" /></audio>
<div id="wx"><img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /> <img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /> <img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /> <img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /> <img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /></div>
<div id="mplayer" data-tt="00:00 00:00">
<img id="btnplay" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="100"value="0" title="调节进度" />
</div>
<div id="lrc" data-lrc="《我的楼兰》新填词">《我的楼兰》新填词</div>
<div id="lrcc" data-lrc="雪线之上">雪线之上</div>
</div>

<script>
var mseek = false;
var mState = () => aud.paused ?
( btnplay.style.setProperty('--state', 'paused'), btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'), btnplay.title = '点击暂停' );
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;
}
aud.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = aud.currentTime / aud.duration * mprog.max;
mplayer.dataset.tt = toMin(aud.currentTime) + ' ' + toMin(aud.duration);
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => aud.currentTime = aud.currentTime = mprog.value / mprog.max * aud.duration;
btnplay.onclick = () => aud.paused ? (aud.play(),paused) :( aud.pause(),running);
mState = () => papa.style.setProperty('--state',aud.paused ? 'paused' : 'running');
aud.onplaying = aud.onpause = () => mState();
</script>
<span id="lrcStr" style="visibility: hidden;">
雪线之上
雪线之上化作山巅的云
刺刀挑起夜幕的星
崖边高地密密冰雪脚印
守护是这里唯一的口令
氧气稀薄催生爱的茂密
在冻土下长出根系
你用胸膛抵挡寒流侵袭
界碑已温暖融化在心底
谁说昆仑不语他记得你年复一年
身上迷彩晕染朝霞暮烟的缠绵
当风雪雕刻你青春容颜
你身化作祖国的剑
谁说冰川无情它映照你铮铮誓言
每道冰痕裂缝都是岁月的印鉴
若有亲人问起边关的流年
仰望星辰已是团圆
每当篝火舔舐你坚毅的背影
雪莲花突然开满了你褪皮的掌心
所有牺牲都化如沉默山脉
却让春天永远到来
巡逻的路浇筑生命脉线
呼吸伴随祖国节拍
无数寒冷陪伴孤寂长夜
肉身站成不灭的峰台
谁说昆仑不语他记得你年复一年
身上迷彩晕染朝霞暮烟的缠绵
当风雪雕刻你青春容颜
你身化作祖国的剑
谁说冰川无情它映照你铮铮誓言
每道冰痕裂缝都是岁月的印鉴
若有亲人问起边关的流年
仰望星辰已是团圆
每当篝火舔舐你坚毅的背影
雪莲花突然开满了褪皮的掌心
所有牺牲都化如沉默山脉
却让春天永远到来

</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let arr="";
   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) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=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');

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');

lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 mKey*/
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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
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;
   };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

亚伦影音工作室 发表于 2025-9-29 22:26

本帖最后由亚伦影音工作室于 2025-10-1 20:42 编辑 <br /><br />雪线之上
词:文武可可
···

亚伦影音工作室 发表于 2025-9-29 22:29

雪线之上
词:文武可可微调:风中飘逸
雪线之上化作云遮山巅
刺刀挑起星光点点
崖边高地密密冰雪脚印
守护是这里唯一的信念
氧气稀薄催生爱的纷繁
在冻土上长出藤蔓
你用胸膛抵挡寒流侵袭
界碑已温暖融化在心田
谁说昆仑不语他记得你年复一年
身上迷彩晕染朝霞暮烟的缠绵
当风雪雕刻你青春容颜
你身化作祖国的剑
谁说冰川无情它映照你铮铮誓言
每道冰痕裂缝都是岁月的印鉴
若亲人问起边关的流年
仰望星辰已是团圆
每当篝火舔舐背影炼就你坚毅
褪皮掌心突然开满灿烂的雪莲
所有牺牲都沉默如山脉
却让祖国春天永远
巡逻的路浇筑生命脉线
呼吸节奏与国同颤
无数寒冷陪伴孤寂长夜
肉身站成烽台新的狼烟
谁说昆仑不语他记得你年复一年
身上迷彩晕染朝霞暮烟的缠绵
当风雪雕刻你青春容颜
你身化作祖国的剑
谁说冰川无情它映照你铮铮誓言
每道冰痕裂缝都是岁月的印鉴
若亲人问起边关的流年
仰望星辰已是团圆
每当篝火舔舐背影炼就你坚毅
褪皮掌心突然开满灿烂的雪莲
所有牺牲都沉默如山脉
却让祖国春天永远

红影发表于 2025-9-29 23:29

又一首新填词的歌曲，好像前面的帖子也是新填词的呢{:4_187:}

杨帆发表于 2025-9-30 00:01

制作精美，效果精彩，谢谢亚伦老师经典分享{:4_191:}

小辣椒 发表于 2025-10-4 22:18

亚纶这个效果很漂亮的，五角星可以停止{:4_178:}

止戈为武 发表于 2025-10-11 20:32

精彩

页: [1]

花潮论坛's Archiver

雪线之上【填词有误】