这几天有点累，朋友们休息了吧！
老黑，明天见。。。所有的朋友明天见！谢谢大家！{:5_110:}睡觉去了！{:5_110:}好好休息多保重。 本帖最后由 加林森 于 2022-6-18 23:28 编辑 <br /><br />梦油 发表于 2022-4-24 09:11
好好休息多保重。
上午好！
<style>
/* 帖子外层 */
.outer { left: -214px; width: 1024px; height: 600px; background: #ccc url('https://pic.imgdb.cn/item/62ad98200947543129e965e2.jpg') no-repeat center / cover; overflow: hidden; position: relative; }
/* 视频 */
.vid { position: absolute; top: -54px; width: 1187px; height: 660px; object-fit: cover; opacity: .25; }
/* 频谱+进度外层 */
.mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
/* 频谱外层 */
.wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
/* 进度显示器 */
.mama meter { width: 90px; position: relative; }
/* 频谱 */
.wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
/* 频谱伪元素 顶帽 */
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
/* 歌词同步显示框 */
.lrcbox { transform: translate(20px, 20px); font: bold 1.2em / 1.5em sans-serif; color: #fff; text-shadow: 1px 1px 1px #000; position: absolute; }
/* 频谱顶帽动画 */
@keyframes up { from { top: -6px; } to { top: -16px; } }
</style>
<div class="outer">
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/71/5b48ae2e6ad5d.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
<div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=226313.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mama = document.querySelector('.mama'),
wrap = document.querySelector('.wrap'),
lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
prog = (tt, cc) => 100 * cc / tt;
let lrcAr = [
['0.08','Careless Whisper'],
['0.11','歌手：邓丽君'],
['2.92','作词 : Michae/Andrew']
['3.33','作曲 : George'],
['5.62','编曲 : Ridgeley'],
['27.70','I feel so unsure'],
['28.98','我的心空虚迷茫'],
['34.70','As I take your hand'],
['40.78','那天挽起你的手'],
['45.71','And lead you to the dance floor'],
['48.85','领你渐步入舞池'],
['53.43','As the music dies'],
['55.32','乐声消失后'],
['58.64','Something in your eyes'],
['60.42','你眼中的神情'],
['63.62','Calls to mind a silver screen'],
['66.44','让我想起银幕上的爱'],
['68.33','And all its sad goodbyes'],
['71.13','是悲伤的结局'],
['74.00','I'm never gonna dance again'],
['78.52','我永远不会再跳舞'],
['89.63','Guilty feet have got no rhythm'],
['91.98','内疚地跳乱了舞步'],
['96.29','Though it's easy to pretend'],
['98.98','伪装自己很简单'],
['103.46','I know you're not a fool'],
['106.10','但你也不是傻瓜'],
['109.29','I should have known better than to cheat a friend'],
['111.55','我知道不该骗朋友'],
['114.11','And waste the chance that I'd been given'],
['116.61','而且失去了给我的机会'],
['119.10','So I'm never gonna dance again'],
['121.18','我永远不会再跳舞'],
['123.60','The way I danced with you'],
['125.60','像我和你那样跳舞'],
['134.17',',ime can never mend'],
['136.29','时间不能弥补'],
['138.87','The careless whispers of a good friend'],
['141.23','朋友满不在乎的轻声细语'],
['143.35','To the heart and mind'],
['146.64','从心灵到大脑'],
['166.01','Ignorance is kind'],
['168.07','无视对方已经是安慰'],
['170.91','There's no comfort in the truth'],
['172.40','真相残酷'],
['174.65','Pain is all you'll find'],
['176.69','只有痛苦'],
['178.66','I'm never gonna dance again'],
['180.69','我永远不会再跳舞'],
['183.14','Guilty feet have got no rhythm'],
['185.17','内疚地跳乱了舞步'],
['187.06','Though it's easy to pretend'],
['188.54','伪装自己很简单'],
['190.02','I know you're not a fool'],
['191.76','但你也不是傻瓜'],
['205.34','I should have known better than to cheat a friend'],
['217.79','我知道不该骗朋友'],
['222.66','And waste the chance that I'd been given'],
['225.30','而且失去给我的机会'],
['227.68','So I'm never gonna dance again'],
['228.54','我永远不会再跳舞']
];
Array.from({length: 10}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.left = key * 6 + key * 3 + 'px';
ele.style.height = num(10,60) + 'px';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(10, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
lrcbox.innerHTML = lrcAr;
}
}
})
</script>
加林森 发表于 2022-4-24 09:34
上午好！
加林森朋友下午好！年纪大了要多休息，别太累。 梦油 发表于 2022-4-24 13:10
加林森朋友下午好！年纪大了要多休息，别太累。
好的好的，谢谢梦油老友！ 加林森 发表于 2022-4-24 13:32
好的好的，谢谢梦油老友！
不客气 梦油 发表于 2022-4-24 14:19
不客气
嗯嗯。
页:
[1]