平凡 发表于 2023-10-11 13:42

王贰浪 解释

<style>
#papa { margin: 100px 0px; width: 1200px; height: 750px; background: url('http://pan.yinhuabbs.cn/view.php/8d839dc3e99ce0f540b0ad12a21b2162.jpg') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 2px #ff0000;overflow:hidden;border-radius:1%;display: grid; place-items: center; z-index: 1; position: relative; hidden;border-radius: 0px 0px;}

@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: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
</style>

<div id="papa">
<div id='dt'><img id="testImg" src="https://img.fy6b.com/2023/10/04/93414ddab59d8.png" width="100%" height="100%"></div>
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/16/54/V-165481-6C0A9FD6.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1979068123.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 2.5em 宋体; --bg: #ff0000;top:91%;left: 15%; color: #ff0000;',
                        fs_css: 'top: -6%; right: 0.5%;font:normal 0em 华文新魏; ',
                        player_css: `
                              bottom: 1.5%;left: 75%;
                              --discBg:url('http://pan.yinhuabbs.cn/view.php/8d839dc3e99ce0f540b0ad12a21b2162.jpg') no-repeat center/cover;
                              --discSize: 50px;
                              --hh: 50px;
                        `,
                        pinpu: {num: 100, 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 = ` 作词 : 杨瑞
作曲 : 杨瑞
编曲 : 王大夫
原来我说的都是你不在意的解释
原来我一个人在自作多情地坚持
过往的一字一句伴着风声在消逝
雨又在窗外瓢泼一整夜
你悄然入梦勾起我的思念
月被漆黑的天藏在另一边
这夜痴情人难眠
那天遥隔云雨又见你一面
那面让我明白不如不再见
可笑穿过人潮你竟站在他身边
原来我说的都是你不在意的解释
原来我一个人在自作多情地坚持
过往的一字一句伴着风声在消逝
再不能长相思
心甘情愿地说着你不在意的解释
可笑却不自知
也许卑微
是我爱你的方式
雨又在窗外瓢泼一整夜
你悄然入梦勾起我的思念
月被漆黑的天藏在另一边
这夜痴情人难眠
那天遥隔云雨又见你一面
那面让我明白不如不再见
可笑穿过人潮你竟站在他身边
原来我说的都是你不在意的解释
原来我一个人在自作多情地坚持
过往的一字一句伴着风声在消逝
再不能长相思
心甘情愿地说着你不在意的解释
可笑却不自知
也许卑微
是我爱你的方式
原来我说的都是你不在意的解释
原来我一个人在自作多情地坚持
过往的一字一句伴着风声在消逝
再不能长相思
心甘情愿地说着你不在意的解释
可笑却不自知
也许卑微
是我爱你的方式
弦乐演奏：星舟爱乐团
和声：熊楚
混音：顾雄
监制：金凡
策划：阿呆&九九
出品：青芒音乐
`;

/*变量 ：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-10-11 20:02

欣赏收藏榕哥的[王贰浪 解释] 非常好听，点赞！

张红 发表于 2023-10-11 20:44

问好榕哥欣赏你的精彩

容轩听雨 发表于 2023-10-11 21:24

嵌入的视频灵动，歌曲动听，赞，问好，秋祺！

蓝魔 发表于 2023-10-11 22:20

欣赏一下，谢谢。

平凡 发表于 2023-10-12 09:57

巫荣云师 发表于 2023-10-11 20:02
欣赏收藏榕哥的[王贰浪 解释] 非常好听，点赞！

谢谢欣赏

平凡 发表于 2023-10-12 09:57

蓝魔 发表于 2023-10-11 22:20
欣赏一下，谢谢。

谢谢欣赏

平凡 发表于 2023-10-12 09:58

容轩听雨 发表于 2023-10-11 21:24
嵌入的视频灵动，歌曲动听，赞，问好，秋祺！

谢谢听雨，问好

平凡 发表于 2023-10-12 09:59

张红 发表于 2023-10-11 20:44
问好榕哥欣赏你的精彩

张红妹子好

午老虎 发表于 2023-10-19 15:11

欣赏一下，谢谢。
页: [1]
查看完整版本: 王贰浪 解释