傲雷影儿 发表于 2025-12-28 10:35

【影.弦雨】影视金曲《铁血丹心》

本帖最后由 傲雷影儿 于 2025-12-28 10:45 编辑 <br /><br />影视金曲《铁血丹心》<br>


制作/傲雷影儿

<TABLE style="POSITION: relative; WIDTH: 1000px; TOP: 50px; LEFT: -190px" cellSpacing=0 cellPadding=10 width="100%">
<TBODY>
<TR>
<TD width="100%">
<DIV align=center><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1226571">
<meta charset="UTF-8">
<style>
#papa {
      margin: 0px 0 0 calc(px);
      width: 1067px;
      height: 900px;
      background: lightgreen url('1') no-repeat center/cover;
      box-shadow: 3px 3px 5px #333;
      position: relative;
}

.inmg { position:absolute; width:100%; height: 900px;TOP:0%;LEFT: 0%;}

#mplayer {
      position: absolute;
      width: 80px;
      height: 80px;
      right: 930px;
      top: 85%;
      border-radius: 50%;
      cursor: pointer;
      animation: rot 8s linear infinite;
}
#lrc {position: absolute;top: 780px;left: 50%;
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(180deg, hsla(120, 96%, 60%, .85), hsla(120, 95%, 95%, .85));
      transform: translate(-50%);
      font: bold 2.6em sans-serif;
      color: snow;
      white-space: pre;
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;      
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      filter: inherit;
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }


</style>

<div id="papa">

<marqueeid="m" behavior="alternate"scrollamount="5"height=900>
<img alt="" src="https://www.junzhuan.com/data/attachment/album/202512/27/192101dggm3gluk68fpguf.jpg" title="" style="width: 1067px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202512/27/192101oi7kissf3fccssda.jpg" title="" style="width: 1067px;height: 900px;;"/><img alt=""src="https://www.junzhuan.com/data/attachment/album/202512/27/192101s85615g2wspp1bml.jpg" title="" style="width: 1067px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202512/27/192101vdhm5z85hvvnvzp7.jpg" title=""style=" width: 1067px;height: 900px;" /><img alt=""src="https://www.junzhuan.com/data/attachment/album/202512/27/192102l6gglhggzdwudla2.jpg" title="" style="width: 1067px;height: 900px;"/><img alt=""src="https://www.junzhuan.com/data/attachment/album/202512/27/192103tgx55cuo7gu03zgx.jpg" title=""style=" width: 1067px;height: 900px;"/><img alt="" src="https://www.junzhuan.com/data/attachment/album/202512/27/192103fzsznqfg2fzzh2gs.jpg" title="" style="width: 1067px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202512/27/192103fk1gyrgpc3yk6kzk.jpg" title=""style=" width: 1067px;height: 900px;" />
</marquee>

<marqueeclass="inmg" direction="down" height="550" behavior="alternate" id="m4" style="transform: rotateY(180deg);"><marqueeid="m1" scrollamount="15"><imgsrc="https://www.junzhuan.com/data/attachment/album/202503/11/170421e2wvwvy4myvzy48d.gif"height="40" /></marquee></marquee>

<marqueeclass="inmg" direction="down"
height="550"
behavior="alternate"
id="m3"><marquee id="m2" scrollamount="23" ><imgsrc="https://www.junzhuan.com/data/attachment/album/202503/11/170421e2wvwvy4myvzy48d.gif"height="40" /></marquee></marquee>

      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <img id="mplayer" src="https://www.junzhuan.com/data/attachment/album/202512/27/192555phxpgxxppjso0spg.png" alt="" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2066977525.mp3" loop autoplay></audio>
</div>



<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `作词 邓伟雄
作曲 顾嘉辉
演唱 罗文 甄妮
制作 傲雷影儿
依稀往梦似曾见
心内波澜现
抛开世事断仇怨
相伴到天边
逐草四方沙漠苍茫(冷风吹天苍苍)
哪惧雪霜扑面(藤树相连)
射雕引弓塞外奔驰(猛风沙野茫茫)
笑傲此生无厌倦(藤树两缠绵)
天苍苍野茫茫(应知爱意似流水)
万般变幻(斩不断理还乱)
身经百劫也在心间
恩义两难断
啊啊啊啊啊…
哪惧雪霜扑面(藤树相连)
恩义两难断

`;

/*变量 :mKey - 当前歌词索引;mFlag :调用关键帧动画索引;averAdd :平均值补偿*/
let mKey = 0, mFlag = true, 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 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) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*函数 :处理当前歌词索引 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 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 = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script></td></tr></table>



</DIV></TD></TR></TBODY></TABLE><BR><BR><BR><BR><BR><BR>

傲雷影儿 发表于 2025-12-28 10:35

《铁血丹心》是1983年TVB版电视剧《射雕英雄传之铁血丹心》的主题曲,是由邓伟雄作词,顾嘉辉作曲,罗文、甄妮合唱的粤语流行歌曲,1983年1月1日发行,该曲收录于专辑《射雕英雄传》中。《铁血丹心》前奏一出来就是连续急促上行的弦乐和铺天盖地黄沙般的和声,家国爱情,大气阳刚。该歌曲曾获新时代国际电视节全国十佳电视剧金曲。任贤齐 、赖美云、南北组合翻唱过这首歌。

红影 发表于 2025-12-28 18:34

人物秀美,歌曲好听,欣赏影儿好帖{:4_199:}

偶然~ 发表于 2025-12-31 15:12

来欣赏傲雷影儿的精品佳作!

偶然~ 发表于 2025-12-31 15:12

制作大气磅礴!

偶然~ 发表于 2025-12-31 15:12

太棒了!玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花~【*偶然 献花给你啦】

偶然~ 发表于 2025-12-31 15:12

期待佳作频出!

偶然~ 发表于 2025-12-31 15:12

感谢傲雷影儿带来的精彩,辛苦了!祝您和家人岁岁安康,幸福吉祥!元旦快乐!

偶然~ 发表于 2025-12-31 15:13

时光匆匆向前,
明天就是元旦。
告别二零二五,
迎接新的一年。
感恩二零二五,
开启新的一年。
一跆微笑向前,
所念所盼如愿。

小辣椒 发表于 2026-1-3 15:35

影儿原来代码制作也是做的这么漂亮,{:4_199:}

小辣椒 发表于 2026-1-3 15:35

欣赏影儿的精彩分享{:4_171:}
页: [1]
查看完整版本: 【影.弦雨】影视金曲《铁血丹心》