小辣椒 发表于 2023-9-5 11:55

丁乙 - 最后的人不是你 (Live合唱版)


<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 11:56

同一首完成。

liumang 发表于 2023-9-5 11:59

小辣椒 发表于 2023-9-5 11:56
同一首完成。

{:5_150:}

liumang 发表于 2023-9-5 12:01

@admin

{:5_146:}


liumang 发表于 2023-9-5 21:37

这个频谱漂亮的

小辣椒 发表于 2023-9-7 14:27

liumang 发表于 2023-9-5 21:37
这个频谱漂亮的

谢谢欣赏

liumang 发表于 2023-9-7 14:32

小辣椒 发表于 2023-9-7 14:27
谢谢欣赏

{:5_146:}

liumang 发表于 2023-9-8 10:46

{:5_126:}

liumang 发表于 2023-9-8 10:47

{:5_119:}
页: [1]
查看完整版本: 丁乙 - 最后的人不是你 (Live合唱版)