*迎双节*致敬人民子弟兵！

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

迎双节致敬人民子弟兵！

本帖最后由亚伦影音工作室于 2025-9-29 20:35 编辑 <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/68da0b64c5157e1a8842f7e2.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;}
#lrc{right:5%;top: 8%;}#lrcc {right:10%;top: 22%;}
#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%;} }
#player {margin:0 auto;position: absolute;top:5%; left:6%;width: 400px;height: 400px;cursor: pointer;animation: spin 0.15s infinite linear;}
.leaf {position: absolute;width: 20%;height: 20%;clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);border:2px solid #ffffff;transform-origin: 200% 200%;}
.leaf:nth-of-type(1) {background: #fff000;transform: rotate(45deg)translate(70px);}
.leaf:nth-of-type(2) {background:#fff000;transform: rotate(90deg)translateX(70px);}
.leaf:nth-of-type(3) {background:#fff000;transform: rotate(135deg)translateX(70px);}
.leaf:nth-of-type(4) {background:#fff000;transform: rotate(180deg)translateX(70px);}
.leaf:nth-of-type(5) {background:#fff000;transform: rotate(288deg)translate(220px,200px)scale(2);}
@keyframes spin {0% { transform: rotate(0deg);filter:hue-rotate(360deg) ;}}
#mplayer { position: absolute; text-align: center; top: 86%; z-index: 60;color:#ffffff;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 300px; height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#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.ananas.chaoxing.com/sv-w9/audio/4b/73/c7/ed8d2d0aca69f260e69b35fea55d5e1c/audio.mp3" type="audio/mp3" /></audio>
<div id="player">
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div>
<div id="mplayer" data-tt="00:00 00:00">
<img id="btnplay" src="https://pic1.imgdb.cn/item/68bd13c058cb8da5c885c690.svg" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" 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);
player.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>player.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>player.style.animationPlayState = 'paused');
</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 13:56

本帖最后由亚伦影音工作室于 2025-9-29 14:07 编辑

我的脊梁
作曲：刀郎作词：小强
想问雪山借那一道脊梁
铸座界碑为你守望
用胸膛去触摸你的疆土
我就在那片冰原上站岗
想问苍鹰借那一双翅膀
掠过云端把你仰望
用热血去铸刻你的名字
我就在那座界碑生长
你总是随手把经幡系在雪峰之上
万缕风马飞扬着你神圣的光芒
我踏着风雪跋涉过千里荒凉
只为守护你的模样
你总是不经意把星月嵌进冰川之上
万丈寒光闪烁着你永恒的信仰
我迎着风雪跋涉千里苍茫
只为守护你荣光
谁与界碑共浴风雨风雪同守一方天
谁与界碑共枕寒夜寒冬长住千百年
从未诉说我是你的屏障
但你却是我的梦喔！

梦油发表于 2025-9-29 14:23

双节快乐！

偶然~ 发表于 2025-9-29 14:38

这首歌好听，据说我的楼兰原作词人要告这首歌的填词人

偶然~ 发表于 2025-9-29 14:38

制作大气

偶然~ 发表于 2025-9-29 14:39

欣赏了，感谢亚伦影音工作室带来的精彩，辛苦了。

小辣椒 发表于 2025-9-29 16:16

亚伦影音工作室发表于 2025-9-29 13:56
我的脊梁
作曲：刀郎作词：小强
想问雪山借那一道脊梁

我给你做吧

小文发表于 2025-9-29 16:19

高档，喜欢！{:4_204:}

彩云归 发表于 2025-9-29 16:42

亚伦影音工作室出品
想问雪山借那一道脊梁
铸座界碑为你守望
用胸膛去触摸你的疆土
我就在那片冰原上站岗
想问苍鹰借那一双翅膀
掠过云端把你仰望
用热血去铸刻你的名字
我就在那座界碑生长
你总是随手把经幡系在雪峰之上
万缕风马飞扬着你神圣的光芒
我踏着风雪跋涉过千里荒凉
只为守护你的模样
你总是不经意把星月嵌进冰川之上
万丈寒光闪烁着你永恒的信仰
我迎着风雪跋涉千里苍茫
只为守护你荣光
谁与界碑共浴风雨风雪同守一方天
谁与界碑共枕寒夜寒冬长住千百年
从未诉说我是你的屏障
但你却是我的梦喔！
迎双节致敬人民子弟兵制作！

小辣椒 发表于 2025-9-29 16:49

我的脊梁
想问雪山借那一道脊梁
铸座界碑为你守望
用胸膛去触摸你的疆土
我就在那片冰原上站岗
想问苍鹰借那一双翅膀
掠过云端把你仰望
用热血去铸刻你的名字
我就在那座界碑生长
你总是随手把经幡系在雪峰之上
万缕风马飞扬着你神圣的光芒
我踏着风雪跋涉过千里荒凉
只为守护你的模样
你总是不经意把星月嵌进冰川之上
万丈寒光闪烁着你永恒的信仰
我迎着风雪跋涉千里苍茫
只为守护你荣光
谁与界碑共浴风雨风雪同守一方天
谁与界碑共枕寒夜寒冬长住千百年
从未诉说我是你的屏障
但你却是我的梦喔！
我的楼兰的原调

樵歌发表于 2025-9-29 19:29

小辣椒发表于 2025-9-29 16:49

等等。一行行的数字还不同。。。你这个是从哪里取得的呀{:4_203:}

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

小辣椒发表于 2025-9-29 16:16
我给你做吧

谢谢辣椒

红影发表于 2025-9-29 22:13

制作漂亮，迎双节，向子弟兵致敬。
欣赏亚伦老师好帖{:4_199:}

杨帆发表于 2025-10-1 17:00

漂亮！祝亚伦老师国庆快乐{:4_191:}

页: [1]

花潮论坛's Archiver

迎双节致敬人民子弟兵！