亚伦影音工作室 发表于 2023-9-1 15:22

相思的苦谁人知-米灵【控】

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1164px; height: 680px; background: url('https://pic.imgdb.cn/item/64ec3199661c6c8e54c39ffd.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('https://pic.imgdb.cn/item/64ec3199661c6c8e54c39ffd.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: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
</style>

<div id="papa">
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/14/07/V-140794-995A163B.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music291910736.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: 6%; right: 6.5%;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 = `相思的苦谁人知-米灵
词：王月
曲：王月
编曲：姜凯升
和声：小佑
混音：冯鑫阳
制作人：亚伦
发行：影音工作室
多情在慌乱中交织
眷恋无法再掩饰
本是不该的相识
惹得愁眉泪尽湿
无情在谎言中暗示
流泪的人苦情痴
已经无需再多言
转身吧事已至此
单相思啊单相思
寻寻觅觅无休止
花开花落有尽时
相思的苦谁人知
单相思啊单相思
岁岁年年花相似
似梦非梦终不止
相思相见知何日
无情在谎言中暗示
流泪的人苦情痴
已经无需再多言
转身吧事已至此
单相思啊单相思
寻寻觅觅无休止
花开花落有尽时
相思的苦谁人知
单相思啊单相思
岁岁年年花相似
似梦非梦终不止
相思相见知何日
似梦非梦终不止
相思相见知何日
`;

/*变量 ：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-1 16:34

中间的圆环换成光盘图图也挺好看。频谱配色不错。欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2023-9-1 17:08

红影 发表于 2023-9-1 16:34
中间的圆环换成光盘图图也挺好看。频谱配色不错。欣赏亚伦老师好帖

视频背景不适合手机欣赏，下一步用动图！

醉美水芙蓉 发表于 2023-9-1 17:42

醉美水芙蓉 发表于 2023-9-1 17:43

醉美水芙蓉 发表于 2023-9-1 17:44

红影 发表于 2023-9-1 18:51

亚伦影音工作室 发表于 2023-9-1 17:08
视频背景不适合手机欣赏，下一步用动图！

不是说手机上安装合适的浏览器即可么？呵呵，我很少手机玩，还不知道呢{:4_204:}

焱鑫磊 发表于 2023-9-2 12:30

欣赏学习老师佳作！{:4_187:}
页: [1]
查看完整版本: 相思的苦谁人知-米灵【控】