论坛 › 欢乐水吧 › 多层叠加画面不可控《离别开出花 》 就是南方凯

亚伦影音工作室 发表于 2024-2-22 14:15

多层叠加画面不可控《离别开出花 》 就是南方凯

本帖最后由 亚伦影音工作室 于 2024-2-22 22:07 编辑 <br /><br /><style>
#papa {margin: 150px -300px;width: 1164px;height: 580px;background:url(https://pic.imgdb.cn/item/64fea316661c6c8e546b86ca.png)repeat center/100% 100%,url(https://pic.imgdb.cn/item/645114660d2dde57772b5006.gif) no-repeat 68% 30%/40px 50px,url(https://pic.imgdb.cn/item/65b76cfb871b83018ab9b60e.png) no-repeat 70% 50%/100px 200px,url('https://pic.imgdb.cn/item/65a67b84871b83018a2709d4.png') no-repeat 60% 90%/220px 300px,url(https://pic.imgdb.cn/item/65d6e2059f345e8d032e3cef.gif)0 0 /50% 65%, url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a5c0fba99074e4a1f3e4089238c0777e.jpg') no-repeat center/80% 90%; z-index: 1;display: grid; overflow: hidden;position: relative;}
#mplayer {top:42%; left:90%;z-index: 2;position: absolute;background: #FAFAD2;border: 2px double #000000;box-shadow: 0 0 6px #ff0000;cursor: pointer;width: 90px;height: 90px;border-radius: 50%;animation: mm 0.3s infinite ;}
@keyframes mm {to { box-shadow: 0 0 30px white; }}
#lrc{left: 20%;top: 72%;}#lrcc {left: 80%;transform: translate(-102%);top: 80%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#ee0000 35%,#ee0000 65%,#eE0000 90%);filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);position: absolute;z-index: 6;font:normal 2.5em 华文新魏;color: #000078;white-space: pre;-webkit-background-clip: text; background:url('https://pic.imgdb.cn/item/64538a110d2dde5777c587a0.gif') 0px 0px/50% 100%;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
</style>
<div id="papa"><span id="mplayer" title="播放/暂停"></span><div id="lrc" data-lrc=""></div><div id="lrcc" data-lrc=""></div> </div>
<audio id="aud" src="https://mp3.t57.cn:7087/kwlink_d.php?id=284892811" autoplay loop></audio>
<script>
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused') : (mplayer.style.animationPlayState = 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<span id="lrcStr" style="visibility: hidden;">
离别开出花 - 就是南方凯
曲Composer：李浩瑞
词Lyricist：李浩瑞
制作人Producer：亚伦
编曲Arranger：谭侃侃
出品：亚伦影音工作室
坐上那朵离家的云霞
飘去无人知晓的天涯
背着妈妈说的那句话
孩子人生其实不复杂
喔眼泪轻轻地擦
别管那多嘴乌鸦
咽下那些风沙
你才能慢慢长大
要错过几个她
用你最好的年华
这是青春的代价
当离别开出花
伸出新长的枝桠
像冬去春又来
等待心雪融化
你每次离开家
带着远方的牵挂
那城市的繁华
盖住了月牙
当离别开出花
它生长在悬崖
在最高的山顶
才听得见回答
没什么好害怕
孩子放心去飞吧
在你的身后
有个等你的家
坐上那朵离家的云霞
飘去无人知晓的天涯
背着妈妈说的那句话
孩子人生其实不复杂
喔眼泪轻轻地擦
别忘那童年梦话
散在远方的花
也随风慢慢长大
要错过几个她
用你最真的年华
这是青春的回答
当离别开出花
伸出新长的枝桠
像冬去春又来
等待心雪融化
你每次离开家
带着远方的牵挂
那城市的繁华
盖住了月牙
当离别开出花
它生长在悬崖
在最高的山顶
才听得见回答
没什么好害怕
孩子放心去飞吧
在你的身后
有个等你的家
当离别开出花
伸出新长的枝桠
像冬去春又来
等待心雪融化
你每次离开家
带着远方的牵挂
那城市的繁华
盖住了月牙
当离别开出花
它生长在悬崖
在最高的山顶
才听得见回答
没什么好害怕
孩子放心去飞吧
在你的身后
有个等你的家
</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');
      lrc.style.setProperty('--state', 'running');
    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');
      lrcc.style.setProperty('--state', 'running');
    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"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.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());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

红影 发表于 2024-2-22 19:15

这个歌词衬图片的制作有趣。电池式按钮也漂亮。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-2-22 19:18

这个歌词有意思，下面好像有7朵花，歌词长了就把它们拉伸了，反之则缩紧，要是能随字数自动添加多好啊{:4_173:}

樵歌 发表于 2024-2-22 21:21

多层美的叠加，锦上添花！

小辣椒 发表于 2024-2-22 21:25

亚伦新的创意不断{:4_178:}

小辣椒 发表于 2024-2-22 21:26

欣赏亚伦精彩的制作{:4_171:}

查看完整版本: 多层叠加画面不可控《离别开出花 》 就是南方凯