天边的卓玛（DJ 版）,单图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 单图音画 › 天边的卓玛（DJ 版）

醉美水芙蓉 发表于 2023-9-12 19:41:19

天边的卓玛（DJ 版）

<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"> </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-12 19:49:41

很漂亮的帖，欣赏点赞！:victory:

醉美水芙蓉 发表于 2023-9-12 20:05:49

宇神无敌发表于 2023-9-12 19:49
很漂亮的帖，欣赏点赞！

谢谢朋友支持！

顶不顶个球 发表于 2023-9-15 14:37:07

这个作品漂亮！！！！

醉美水芙蓉 发表于 2023-9-15 17:27:26

顶不顶个球发表于 2023-9-15 14:37
这个作品漂亮！！！！

谢谢朋友支持！

翁奕童苑 发表于 2023-9-19 21:14:34

这个作品漂亮！！！！

醉美水芙蓉 发表于 2023-9-19 21:50:08

翁奕童苑发表于 2023-9-19 21:14
这个作品漂亮！！！！

谢谢老师支持！

确认过眼神 发表于 2023-10-3 09:59:47

这个作品漂亮！！！！

醉美水芙蓉 发表于 2023-10-3 21:56:54

确认过眼神发表于 2023-10-3 09:59
这个作品漂亮！！！！

谢谢朋友支持！

蓝叶发表于 2023-11-28 22:44:43

这个作品漂亮！！！！

页: [1] 2

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