醉美水芙蓉 发表于 2023-10-15 12:28:27

Angel of Love

<style>
#papa { margin: 0 0 0 calc(40% - 593px); width: 1164px; height: 680px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/cf2df24107098128992c31a06c305076.mp4.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:100%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: -1;background: url('') 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: 125%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
</style>

<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/454cb805fc0fbc3ff83eee27992cbffa_preview.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://shuifurong.s3-us-east-1.ossfiles.com/MUSIC/Angel.mp3" 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: 101%; right: 42%;font:normal 2em 华文新魏; ',
                        player_css: `
                              bottom: 6.2%;left: 30%;
                              --discBg:url('https://pic.imgdb.cn/item/6430f41f0d2dde577706d0ec.png') no-repeat center/cover;
                              --discSize: 40px;
                              --hh: 120px;
                        `,
                        pinpu: {num: 300, size: 1, gap: 0.5, color1: '#ff0000', color2: '#ffcccc'},
                });
      };
})();
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 = `Lian Ross - Angel of Love (Extended Version)
Lyrics by：Luis Rodriguez
Composed by：Luis Rodriguez
The way you look into my eyes
Just makes me want to fly
As if your smile gives wings to my heart
I love you
Baby tell me this is real
I never thought my wounds could heal
It's magic how you make it feel
So right my love
All moments with you
Are lasting for a lifetime
Your love feels so true
You always make my heart shine
Even when you're far away
I have you beside me
I can feel it night and day
Hear me say
You are my angel of love
You always walk a step behind
On you I can rely
Cause you belong to me
And I to you I love you
Never ever let this end
I follow you and take your hand
And finally we understand
The power of love
All moments with you
Are lasting for a lifetime
Your love feels so true
You always make my heart shine
Even when you're far away
I have you beside me
I can feel it night and day
Hear me say
You are my angel of love
My angel of love
Oh feels so true
Even when you're far away
I have you beside me
I can feel it night and day
Hear me say
You are my angel of love
My angel of love
You are my angel of love

`;

/*变量 ：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-12-27 15:32:14

这个作品漂亮！！！！

1643091610 发表于 2024-1-21 16:36:06

这个作品漂亮！！！！
页: [1]
查看完整版本: Angel of Love