TO:马黑

亚伦影音工作室 发表于 2023-9-5 19:28

本帖最后由亚伦影音工作室于 2023-9-5 21:11 编辑 <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://pic.imgdb.cn/item/64e9fa3f661c6c8e544f1b3a.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/music198461940.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/6430f89c0d2dde57770c848e.png') no-repeat center/cover;
            `,
            lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
   });
};

</script><script >
(function() {
/*原始lrc歌词*/
let lrcStr = `月亮惹的祸 (DJ正式版) - 宋雅萌
词：十一郎
曲：张宇
编曲/混音：亚明
制作统筹：颖儿
艺人统筹：冼嘉欣
企划统筹：SUMPO/车沅珈
出品：星戈音乐/云中科技
SP：繁星互娱
『繁星互娱 • 经典重启计划』
『酷狗音乐人 • 星曜计划』
我承认都都都是月亮
我承认都是月亮惹的祸
那样的夜色太美你太温柔
才会在刹那之间
只想和你一起到白头
我承认都是誓言惹的祸
偏偏似糖如蜜说来最动人
再怎么心如钢铁也成绕指柔
都是你的错轻易爱上我
让我不知不觉满足
被爱的虚荣
都是你的错你对人的宠
是一种诱惑
都是你的错在你的眼中
总是藏着
让人又爱又怜的朦胧
都是你的错你的痴情梦
像一个魔咒
被你爱过还能为谁蠢动
我承认都都都是月亮
我承认都是月亮惹的祸
那样的夜色太美你太温柔
才会在刹那之间
只想和你一起到白头
我承认都是誓言惹的祸
偏偏似糖如蜜说来最动人
再怎么心如钢铁也成绕指柔
都是你的错轻易爱上我
让我不知不觉满足
被爱的虚荣
都是你的错你对人的宠
是一种诱惑
都是你的错在你的眼中
总是藏着
让人又爱又怜的朦胧
都是你的错你的痴情梦
像一个魔咒
被你爱过还能为谁蠢动
我承认都都都是月亮
我承认都是月亮惹的祸
那样的夜色太美你太温柔
才会在刹那之间
只想和你一起到白头
我承认都是誓言惹的祸
偏偏似糖如蜜说来最动人
再怎么心如钢铁也成绕指柔
我承认都是月亮惹的祸
那样的夜色太美你太温柔
才会在刹那之间
只想和你一起到白头
我承认都是誓言惹的祸
偏偏似糖如蜜说来最动人
`;

/*变量：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></p>

马黑黑 发表于 2023-9-5 20:45

感谢{:4_199:}

红影发表于 2023-9-5 20:57

亚伦老师真快，这个是黑黑的最新效果呢。很赞{:4_199:}

红影发表于 2023-9-5 20:57

滚动字的内容貌似和歌曲不一样呢{:4_173:}

醉美水芙蓉 发表于 2023-9-5 21:04

亚伦影音工作室 发表于 2023-9-5 21:08

马黑黑发表于 2023-9-5 20:45
感谢

老师太客气，我是球现成的！

亚伦影音工作室 发表于 2023-9-5 21:09

红影发表于 2023-9-5 20:57
滚动字的内容貌似和歌曲不一样呢

没顾上修改！

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

亚伦影音工作室发表于 2023-9-5 21:09
没顾上修改！

看到修改好了，辛苦了{:4_187:}

马黑黑 发表于 2023-9-5 22:59

亚伦影音工作室发表于 2023-9-5 21:08
老师太客气，我是球现成的！

{:4_199:}

小文发表于 2023-9-6 07:59

欣赏高手

页: [1]

花潮论坛's Archiver

TO:马黑