论坛 › 欢乐水吧 › 天边的卓玛（DJ 版）

醉美水芙蓉 发表于 2023-9-5 22:00

天边的卓玛（DJ 版）

本帖最后由 醉美水芙蓉 于 2023-9-5 22:00 编辑 <br /><br /><style type="text/css">#mydiv {
      margin: 0 0 0 calc(50% - 593px);
      display: grid;
      place-items: center;
      width: 1164px;
      height: 680px;
      border: 1px solid gray;
      background: linear-gradient(to right bottom, rgba(100,100,var(--bb),.5) 0, rgba(calc(255 - var(--bb)),0,0,.35) 50%), url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/0d98fc9756f8fc7c636ee4b9b9a0519a.mp4.jpg') no-repeat center/cover;
      overflow: hidden;
      position: relative;
      --state: running;
}
#flyBox { --w: 200px; width: var(--w);overflow: hidden; color: #cccccc; position: absolute; left:16%;bottom: 56%; font-size: 14px;z-index: 1; }
#flyBox div { word-break: keep-all; white-space: nowrap; animation: flyy 10s linear infinite; background:#0000}
@keyframes flyy { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
yin-fu {
      position: absolute;
      top: 30%;left:21%;
      font: bold 30px sans-serif;
      opacity: 1;
      animation: fly 10s var(--delay) infinite var(--state);
}
@keyframes fly { to { transform: rotate(var(--deg)) translateY(-400px); opacity: 0; } }
</style>
<div id="mydiv">
<div id="flyBox">
<div>天边的卓玛（DJ 版）</div>
</div>
</div>

<p>
<audio autoplay="" id="aud" loop="" src="https://www.qqmc.com/mp3/music279631007.mp3">&nbsp;</audio>
<script>

let script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
mydiv.appendChild(script);

let num = 0, step = 10;
let degAr = ,
      yinfu = ['\u2669','\u266f','\u266d','\u266c','\u266b','\u266a','\u263d','\u263c','\u00a7','\u266e','\u266f'];
let geci = [];

let flash = () => {
      num += step;
      if(num > 255 || num < 0) step = -step;
      mydiv.style.setProperty('--bb', num);
};

Array.from({length: 20}).forEach((item,key) => {
      item = document.createElement('yin-fu');
      let idx = Math.floor(Math.random() * yinfu.length);
      item.innerText = yinfu;
      item.style.cssText += `
                color: #${Math.random().toString(16).substr(-6)};
                --deg: ${degAr}deg;/*${60 - Math.random() * 120}deg;*/
                --delay: ${Math.random() * -10}s;
      `;
      mydiv.appendChild(item);
});

setInterval(()=> {
      if(aud.paused) return false;
      flash();
},10);

script.onload = () => {
      HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: 'top: 88%;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 3.5em 华文新魏; --bg: #800000; color: #000080;',
                fs_css: 'top: 10%;left:81%; --bg: transparent;',
                player_css: `
                        top: 27%; left:13%;
                        border-width: 0;
                        color: #fff;
                        --size: 20%;
                        --bRad: 50%;
                        --track: gray;
                        --prog: orange;
                        --btnBg:url('https://pic.imgdb.cn/item/6430f41f0d2dde577706d0ec.png') no-repeat center/cover;
                `,
                lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
      });
};

</script><script >
(function() {
/*原始lrc歌词*/
let lrcStr = `天边的卓玛（DJ 版）
作词：红风谢桐
作曲：孟文豪
演唱：云朵
编曲：小刚
和声编写：姜糖
和声：姜糖&酷音合唱团
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-5 22:06

好火热的唯美画面，漂亮的播放器和彩色圆，音乐也很好听，芙蓉棒棒哒{:4_187:}

醉美水芙蓉 发表于 2023-9-5 22:16

千羽 发表于 2023-9-5 22:06
好火热的唯美画面，漂亮的播放器和彩色圆，音乐也很好听，芙蓉棒棒哒

谢谢千羽鼓励！晚上好！

红影 发表于 2023-9-5 22:59

水芙蓉美女也做好这个最新效果了，真快{:4_199:}

醉美水芙蓉 发表于 2023-9-6 06:22

红影 发表于 2023-9-5 22:59
水芙蓉美女也做好这个最新效果了，真快

我只会超作业！

小文 发表于 2023-9-6 08:10

女人眼中美的女人总是甜美型的，很多时候不入男人的眼。也不知道为什么，就是这种感觉。图上这个女士很美说不上，但不美也不对。就像女人总爱减服，可是都不知道男人大多数喜欢稍胖的女性，而不是瘦的那种样子。T台上那些货，根本算不上女人，与我画的石膏像一样是死物罢了。美在于谐和，律动间流溢着才情的韵味。这种韵致的美，才是女性的大美。像我的姑姑般的美，是那种无以复加的至美。少一份甜熟，而多一分冷傲，是我喜欢的美。哈哈，不知所云，问好好贴！

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

醉美水芙蓉 发表于 2023-9-6 06:22
我只会超作业！

这个做得很美，很赞的{:4_187:}

醉美水芙蓉 发表于 2023-9-6 11:50

小文 发表于 2023-9-6 08:10
女人眼中美的女人总是甜美型的，很多时候不入男人的眼。也不知道为什么，就是这种感觉。图上这个女士很美说 ...

感谢小文点评欣赏！

小辣椒 发表于 2023-9-6 20:03

问好水芙蓉，今天才看见这个制作，很漂亮的{:4_199:}

小辣椒 发表于 2023-9-6 20:04

播放器下面滚动字尺寸还可以改短一点，现在超出了

醉美水芙蓉 发表于 2023-9-6 22:06

小辣椒 发表于 2023-9-6 20:04
播放器下面滚动字尺寸还可以改短一点，现在超出了

谢谢小辣椒精彩点评！

查看完整版本: 天边的卓玛（DJ 版）