论坛 › 欢乐水吧 › 《美丽的漓江河》甜妹紫烟

焱鑫磊 发表于 2023-10-6 22:38

《美丽的漓江河》甜妹紫烟

本帖最后由 焱鑫磊 于 2023-10-10 23:19 编辑 <br /><br /><style>
#papa { margin: 80px -330px ; width: 1250px; height: 700px; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
@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://i.mp3.wf/view.php/20a06bfe44de956e599721f539440aee.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/5d45f1acac829c7845a3bbad283f08fa.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:80%; 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: 40px;
                        `,
                        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-10-6 22:53

漂亮的视频背景，一叶小舟徜徉在山水间{:4_199:}

红影 发表于 2023-10-6 22:54

这个带光盘频谱播放器用在这里也很美。欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-10-6 22:55

红影 发表于 2023-10-6 22:53
漂亮的视频背景，一叶小舟徜徉在山水间

红影过来喝一杯！{:4_176:}

红影 发表于 2023-10-6 22:58

焱鑫磊 发表于 2023-10-6 22:55
红影过来喝一杯！

这歌也很好听，跟焱鑫磊一起听歌饮酒{:4_176:}

焱鑫磊 发表于 2023-10-6 22:59

红影 发表于 2023-10-6 22:58
这歌也很好听，跟焱鑫磊一起听歌饮酒

{:4_172:}

亦是金 发表于 2023-10-6 23:43

好帖，好歌，好制作！{:4_187:}欣赏学习了！

焱鑫磊 发表于 2023-10-7 09:07

亦是金 发表于 2023-10-6 23:43
好帖，好歌，好制作！欣赏学习了！

问好！{:4_187:}

查看完整版本: 《美丽的漓江河》甜妹紫烟