用动画做播放器按钮

亚伦影音工作室 发表于 2024-9-5 14:54

本帖最后由亚伦影音工作室于 2024-10-19 13:18 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 621px); background:#800 url('https://pic.imgdb.cn/item/66690afed9c307b7e9e8c6f8.jpg')no-repeat center/cover;width: 1164px; height: 600px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#mdiv {top:40%; left:10%;
width: 60px;
height: 60px;
filter: drop-shadow(0 0 1px #fff);
position: relative;
position: absolute;animation: rot 6s linear infinite;
}
#mdiv > span {
position: absolute;
left: -50%;
top: -50%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #006400, #222);
border-radius: 120% 0%;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateY(60px);
}
#mdiv > span:nth-of-type(1) { --deg: 0deg; }
#mdiv > span:nth-of-type(2) {--deg: 72deg;}
#mdiv > span:nth-of-type(3) { --deg: 144deg;}
#mdiv > span:nth-of-type(4) {--deg: 216deg;}
#mdiv > span:nth-of-type(5) {--deg: 288deg;}
@keyframes rot { to { transform: rotate(1turn); } }

#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000;white-space: pre;-webkit-background-clip: text;z-index: 10;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="papa">
<div id="mdiv"><svg id="mysvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"><path id="mypath" d="M331 200 Q200 200,324.5884036346651 240.48122626311812Q200 200,305.9812262631181 276.999868050314Q200 200,276.999868050314 305.9812262631181Q200 200,240.48122626311812 324.5884036346651Q200 200,200 331Q200 200,159.51877373688188 324.58840363466516Q200 200,123.00013194968604 305.9812262631181Q200 200,94.0187737368819 276.999868050314Q200 200,75.41159636533489 240.48122626311812Q200 200,69 200.00000000000003Q200 200,75.41159636533489 159.51877373688185Q200 200,94.01877373688187 123.00013194968604Q200 200,123.00013194968601 94.0187737368819Q200 200,159.51877373688188 75.41159636533489Q200 200,199.99999999999997 69Q200 200,240.4812262631181 75.41159636533487Q200 200,276.9998680503139 94.01877373688187Q200 200,305.9812262631181 123.000131949686Q200 200,324.5884036346651 159.51877373688185Q200 200,331 200" fill="none" stroke="#800" stroke-width="2"></path><circle cx="331" cy="200" r="6" fill="#800" stroke="none"></circle><circle cx="324.5884036346651" cy="240.48122626311812" r="6" fill="#800" stroke="none"></circle><circle cx="305.9812262631181" cy="276.999868050314" r="6" fill="#800" stroke="none"></circle><circle cx="276.999868050314" cy="305.9812262631181" r="6" fill="#800" stroke="none"></circle><circle cx="240.48122626311812" cy="324.5884036346651" r="6" fill="#800" stroke="none"></circle><circle cx="200" cy="331" r="6" fill="#800" stroke="none"></circle><circle cx="159.51877373688188" cy="324.58840363466516" r="6" fill="#800" stroke="none"></circle><circle cx="123.00013194968604" cy="305.9812262631181" r="6" fill="#800" stroke="none"></circle><circle cx="94.0187737368819" cy="276.999868050314" r="6" fill="#800" stroke="none"></circle><circle cx="75.41159636533489" cy="240.48122626311812" r="6" fill="#800" stroke="none"></circle><circle cx="69" cy="200.00000000000003" r="6" fill="#800" stroke="none"></circle><circle cx="75.41159636533489" cy="159.51877373688185" r="6" fill="#800" stroke="none"></circle><circle cx="94.01877373688187" cy="123.00013194968604" r="6" fill="#800" stroke="none"></circle><circle cx="123.00013194968601" cy="94.0187737368819" r="6" fill="#800" stroke="none"></circle><circle cx="159.51877373688188" cy="75.41159636533489" r="6" fill="#800" stroke="none"></circle><circle cx="199.99999999999997" cy="69" r="6" fill="#800" stroke="none"></circle><circle cx="240.4812262631181" cy="75.41159636533487" r="6" fill="#800" stroke="none"></circle><circle cx="276.9998680503139" cy="94.01877373688187" r="6" fill="#800" stroke="none"></circle><circle cx="305.9812262631181" cy="123.000131949686" r="6" fill="#800" stroke="none"></circle><circle cx="324.5884036346651" cy="159.51877373688185" r="6" fill="#800" stroke="none"></circle></svg>

</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://s10.krakenfiles.com/uploads/04-09-2024/YtXNSq0Bj6/music.m4a" autoplay loop></audio>
<script>
mdiv.onclick = () => aud.paused ? aud.play():aud.pause();
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
</script>
<span id="lrcStr" style="visibility: hidden;">
秋风吹起 - 谈柒柒
总是莫名的难过
总是忽然的失落
如果风知道我依然在想你
它会不会笑我
明明可以很洒脱
为何又觉得不妥
你知道我对快乐从没把握
习惯人海里沉默
是不是我一人过得太久了
幸运幸福忘了我
秋意浓洱海边黄叶翩翩落
愁绪晕开全是泡沫
是不是我一人过得太久了
思绪凝霜早浑浊
玉岩路的晚灯依稀照着我
秋风吹起无人似我
总是莫名的难过
总是忽然的失落
如果风知道我依然在想你
它会不会笑我
明明可以很洒脱
为何又觉得不妥
你知道我对快乐从没把握
习惯人海里沉默
是不是我一人过得太久了
幸运幸福忘了我
秋意浓洱海边黄叶翩翩落
愁绪晕开全是泡沫
是不是我一人过得太久了
思绪凝霜早浑浊
玉岩路的晚灯依稀照着我
秋风吹起无人似我
是不是我一人过得太久了
幸运幸福忘了我
秋意浓洱海边黄叶翩翩落
愁绪晕开全是泡沫
是不是我一人过得太久了
思绪凝霜早浑浊
玉岩路的晚灯依稀照着我
秋风吹起无人似我
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
   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) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.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;
            }
   }
});
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;
   };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

梦油发表于 2024-9-5 16:30

欣赏佳作，问候亚伦。

小辣椒 发表于 2024-9-5 20:30

这个是加了黑黑的代码进去了？

小辣椒 发表于 2024-9-5 20:33

今天亚伦怎么没有加特效进去，好像就一个图，一个播放器加歌词，以往你的特效很多的

小辣椒 发表于 2024-9-5 20:33

欣赏亚伦精彩的制作{:4_171:}

彩云归 发表于 2024-9-5 20:50

简洁之美！

绿叶清舟 发表于 2024-9-6 21:55

制作精美，欣赏

世外桃源 发表于 2024-9-7 10:31

欣赏欣赏

世外桃源 发表于 2024-9-7 10:31

美女漂亮，感谢分享

红影发表于 2024-9-8 23:35

五个叶瓣的设计很漂亮。欣赏亚伦老师好帖{:4_187:}

页: [1]

花潮论坛's Archiver

用动画做播放器按钮