论坛 › 动画音画 › 《一朵情花开》胡蜜丹

焱鑫磊 发表于 2023-9-17 23:35

《一朵情花开》胡蜜丹

本帖最后由 焱鑫磊 于 2023-9-17 23:33 编辑 <br /><br /><style>
#papa { margin: 100px -280px ; width: 1164px; height: 680px; background: url('https://pic.imgdb.cn/item/65071a8c661c6c8e546b7b2a.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/65071a8c661c6c8e546b7b2a.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: 120%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
</style>

<div id="papa">
<video id="vid" src="https://www.kumeiwp.com/sub/filestores/2023/09/17/64285ccab65e23843d2b2b2d2b6dfb5c.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/6d534393647159334bde8cb860cbed7e.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:66%; color: #000080;',
                        fs_css: 'top: 4%; right: 1%;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 = `《一朵情花开》胡蜜丹
词：张世东 曲：刘亦敏
LRC歌词制作：焱鑫磊
一轮明月升起来
照在阿妹梳妆台
阿妹的心思你别猜
情歌飞出了窗外
阿哥不要再徘徊
来为阿妹把花戴
阿妹是哥的心头爱
谁也无法来替代
春去春又来
花谢花又开
妹是一朵情花
等着哥来摘
春去春又来
花谢花又开
妹像一朵情花
种在哥心怀
一轮明月升起来
照在阿妹梳妆台
阿妹的心思你别猜
情歌飞出了窗外
阿哥不要再徘徊
来为阿妹把花戴
阿妹是哥的心头爱
谁也无法来替代
春去春又来
花谢花又开
妹是一朵情花
等着哥来摘
春去春又来
花谢花又开
妹像一朵情花
种在哥心怀
春去春又来
花谢花又开
妹是一朵情花
等着哥来摘
春去春又来
花谢花又开
妹像一朵情花
种在哥心怀
妹像一朵情花
种在哥心怀

`;

/*变量 ：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-18 09:10

前景里是美女，背景视频是奔跑的美女，这制作好美。欣赏焱鑫磊好帖{:4_199:}

红影 发表于 2023-9-18 09:11

这个示波加转盘的播放器效果用在这个帖子里也是极好呢，给焱鑫磊点赞{:4_199:}

焱鑫磊 发表于 2023-9-18 10:59

红影 发表于 2023-9-18 09:10
前景里是美女，背景视频是奔跑的美女，这制作好美。欣赏焱鑫磊好帖

美女+美女=美女{:4_172:}

焱鑫磊 发表于 2023-9-18 11:00

红影 发表于 2023-9-18 09:11
这个示波加转盘的播放器效果用在这个帖子里也是极好呢，给焱鑫磊点赞

问候红影好！{:4_187:}

红影 发表于 2023-9-18 11:15

焱鑫磊 发表于 2023-9-18 10:59
美女+美女=美女

美女加倍{:4_173:}

红影 发表于 2023-9-18 11:16

焱鑫磊 发表于 2023-9-18 11:00
问候红影好！

问好焱鑫磊，中午好{:4_187:}

查看完整版本: 《一朵情花开》胡蜜丹