论坛 › 欢乐水吧 › 最后的人不是你(Live 合唱版) TO：亚伦

小辣椒 发表于 2023-9-5 12:14

最后的人不是你(Live 合唱版) TO：亚伦

<style>
#papa { margin: 150px 0 0 calc(50% - 721px); width: 1280px; height: 680px; background: url('https://xlaj.cn/assets/file/zp/20230905113147.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#img_border{width:40%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: -1;background: url('https://xlaj.cn/assets/file/zp/20230905113212.jpg') no-repeat center/cover;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
50% {opacity: 1;transform: scale(1);filter:hue-rotate(60deg)contrast(120%)brightness(120%);}
51% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform:scale(4)rotateY(0deg);}}

#vid { position: absolute; width: 120%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
li-zi { position: absolute; top: 0; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
        @keyframes drop { to { top: 100%; } }

</style>
<div id="papa">
<video id="vid" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/xtq.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/2250-audiofreehighqps/FB/26/GMCoOSEIyROyACAAAAJUw4WU.flac" autoplay loop></audio>
<script>      
(function() {
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/oscpp_lrc.js';
      script.charset = 'utf-8';
      document.head.appendChild(script);
      let geci = [];
      script.onload = () => {
                HCPlayer({papa: '#papa',
                        lrcAr: geci,
                        lrc_css: 'filter:drop-shadow(#ffffff 0.5px 0 0)drop-shadow(#ffffff 0 0.5px 0)drop-shadow(#ffffff -0.5px 0 0) drop-shadow(#ffffff 0 -0.5px0); font:normal 3em 华文新魏; --bg: #800000;top:65%; color: #000080;',
                         fs_css: 'top: 90%; right: 6.5%;color: #ddd; background: #271416;',
                        player_css: `
                              bottom: 3.0%;left: 32%;
                              --discBg:url('https://xlaj.cn/assets/file/zp/20230905113059.png') no-repeat center/cover;
                              --discSize: 40px;
                              --hh: 120px;
                        `,
                        pinpu: {num: 300, size: 1, gap: 0.5, color1: '#ff0000', color2: '#ffffff'},
                });
      };
})();
Array.from({length: 70}).forEach((item) => {
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --dur: ${0.4 + Math.random() * 0.4}s;
                        --delay: ${Math.random() * -0.8}s;
                        width: ${1 + Math.round(Math.random())}px;
                        height: ${8 + Math.random() * 30}px;
                        left: ${Math.random() * 100}%;
                `;
                papa.appendChild(item);
        });

img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');

setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `最后的人不是你(Live 合唱版)-丁乙

词：陈一龙

曲：陈一龙

编曲：王亚东

混音：王亚东

吉他：杨春

和声：小佑

录音：赵会涛

制作人：刘浩

出品人：刘浩

OP：乐豪文化

也许我一开始

就不该遇见你

也许我这辈子

不该爱上你

那曾经的甜蜜

已慢慢成回忆

现在只剩下我

哭泣在夜里

窗外的风吹起

雨落一滴滴

可是我的伞下

再也没有你

如今你在哪里

谁又爱着你

可惜陪我最后

的人不是你

也许我一开始

就不该遇见你

也许我这辈子

不该爱上你

那曾经的甜蜜

已慢慢成回忆

现在只剩下我

哭泣在夜里

窗外的风吹起

雨落一滴滴

可是我的伞下

再也没有你

如今你在哪里

谁又爱着你

可惜陪我最后

的人不是你

窗外的风吹起

雨落一滴滴

可是我的伞下

再也没有你

如今你在哪里

谁又爱着你

可惜陪我最后

的人不是你

`;

/*变量 ：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());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

小辣椒 发表于 2023-9-5 12:16

亚伦套一个你的代码，我中间加了动图一键可以停止图片不能停止动，后来我换了一个jpg上去，效果不错{:4_173:}

@亚伦影音工作室

小辣椒 发表于 2023-9-5 12:17

亚伦现在修改黑黑的代码流畅了许多了{:4_199:}

梦油 发表于 2023-9-5 14:33

本帖最后由 梦油 于 2023-9-6 15:26 编辑

小辣椒朋友下午好！我不会唱，但我很喜欢这支歌。

红影 发表于 2023-9-5 15:01

这些动态真漂亮，还能一键暂停。欣赏亲爱的好制作。亚伦老师收礼开心{:4_187:}

虎妞 发表于 2023-9-5 20:35

难怪你那么会听歌，你这帖子里的歌儿都很好听，你是不没事儿就听歌啊？

虎妞 发表于 2023-9-5 20:35

真是漂亮，养眼啊{:4_199:}

虎妞 发表于 2023-9-5 20:37

小辣椒 发表于 2023-9-5 12:16
亚伦套一个你的代码，我中间加了动图一键可以停止图片不能停止动，后来我换了一个jpg上去，效果不错{:4_173 ...

亲，你太厉害，出手就是精品啊{:4_199:}

马黑黑 发表于 2023-9-5 20:47

{:4_199:}

风中飞尘 发表于 2023-9-5 21:07

好听 不错哈哈哈{:7_294:}

小辣椒 发表于 2023-9-6 12:24

梦油 发表于 2023-9-5 14:33
小辣椒朋友下午好！我你会唱，但我很喜欢这支歌。

梦油好，不会唱没关系就听歌{:4_173:}

小辣椒 发表于 2023-9-6 12:26

红影 发表于 2023-9-5 15:01
这些动态真漂亮，还能一键暂停。欣赏亲爱的好制作。亚伦老师收礼开心

亲爱的，这个也是测试一下效果，动图可以停止，但动不能停止，现在改的jpg效果也是不错

小辣椒 发表于 2023-9-6 12:28

虎妞 发表于 2023-9-5 20:35
难怪你那么会听歌，你这帖子里的歌儿都很好听，你是不没事儿就听歌啊？

亲爱的，我其实每次做帖的时候就是一面欣赏歌曲一面做播放器的，各种音乐轮流听，其实纯音乐最好听，但这个要歌词同步我就不能用纯音了

小辣椒 发表于 2023-9-6 12:28

虎妞 发表于 2023-9-5 20:35
真是漂亮，养眼啊

哈哈，我也是瞎捣鼓的{:4_170:}

小辣椒 发表于 2023-9-6 12:29

虎妞 发表于 2023-9-5 20:37
亲，你太厉害，出手就是精品啊

没有的，我也是一直跟黑黑老师在学习的

小辣椒 发表于 2023-9-6 12:30

马黑黑 发表于 2023-9-5 20:47


黑黑好~~喝点茶然后去午休一下{:4_180:}

小辣椒 发表于 2023-9-6 12:30

风中飞尘 发表于 2023-9-5 21:07
好听 不错哈哈哈

当然好听啊，你的这个是无损音乐的{:4_178:}

马黑黑 发表于 2023-9-6 12:37

小辣椒 发表于 2023-9-6 12:30
黑黑好~~喝点茶然后去午休一下

应该是午休后喝茶{:4_170:}

红影 发表于 2023-9-6 13:45

小辣椒 发表于 2023-9-6 12:26
亲爱的，这个也是测试一下效果，动图可以停止，但动不能停止，现在改的jpg效果也是不错

是的，现在的这个都能停止呢{:4_204:}

小辣椒 发表于 2023-9-6 20:15

马黑黑 发表于 2023-9-6 12:37
应该是午休后喝茶

还特别讲究，怕喝茶会睡不着了吧

查看完整版本: 最后的人不是你(Live 合唱版) TO：亚伦