幸存者联盟：喜马拉雅
<style>.mama { left: -214px; width: 1024px; height: 600px; background: lightblue url('/data/attachment/forum/202206/14/195036p8p8loz4ddemkmmz.jpg') no-repeat center / cover; position: relative; overflow: hidden;}
.vid { position: absolute; width: 100%; height: 800px; top: -200px; object-fit: cover; opacity: .35;}
.wrap { left: 20px; bottom: 20px; width: fit-content; height: fit-content; padding: 10px; display: flex;align-items: center; gap: 8px; background: rgba(0,200,200,.6) linear-gradient(to right bottom, rgba(0,0,0,.75),rgba(255,255,255,.4)); box-shadow: 2px 2px 2px #000; position: absolute; }
.lrcbox { min-width: 360px; font: normal 1.1em / 1.5em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
.progress { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: conic-gradient(from 180deg,tan 0%,transparent 0%); cursor: pointer; position: relative; }
.progress::before { position: absolute; content: attr(data-per); width: 100%; height: 100%; border-radius: 50%; background: transparent radial-gradient(#eee,transparent); text-align: center; font: normal 15px / 90px sans-serif; }
.lighten { color: #fff; font-weight: bold; font-size: 1.2em; }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="wrap">
<div class="progress" data-per="0%"></div>
<div class="lrcbox"> Loading ...</div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1937714725.mp3" autoplay="autoplay" loop="loop">old browser</audio>
<script>
let lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
progress = document.querySelector('.progress');
let lrcAr = [
['0.00','作词 : 幸存者联盟'],
['0.09','作曲 : 幸存者联盟'],
['13.54','没人想听你开口 根本不配跟我 battle'],
['16.87','没有资格做个爱豆 你不属于这劝你快走'],
['20.36','我是危险的怪兽 没空跟谁在那怀旧'],
['23.66','无人能把我猜透 他们的把柄在手'],
['26.91','竞争太激烈 被淘汰的弱者们声嘶力竭'],
['30.11','我被上帝加持过了可以为你们辟邪'],
['33.50','不害怕山崩地裂 得不到我青睐的心在滴血'],
['37.36','沉沦在这悲惨世界 主宰那些懦夫简直小菜一碟'],
['40.82','我在喜马拉雅 你在我的胯下'],
['44.29','黑特打打杀杀 loser的天快塌啦'],
['47.99','站在悬崖 遥望前方的路四通发达'],
['51.37','俯瞰天下 播的种子正在生根发芽'],
['54.83','这是北京的Drill 不是违心的傀儡'],
['56.60','你是归影的黑 欲望未泯的贼'],
['57.82','一帮嘴硬的鬼 活得没心没肺'],
['59.91','水穷水尽得垂 烧成灰烬的玫瑰'],
['61.60','电闪雷鸣的黑夜 死于非命的卑'],
['63.34','如影随形的悲 听它悲情地吠'],
['64.95','背着罪名地追 意犹未尽的泪'],
['66.70','每一种丑恶都有它对应的美'],
['68.62','包装得优雅 他手下的牛马'],
['70.30','毫无筹码 被扣押和丢下'],
['72.02','担惊受怕 被抽打谁来救驾'],
['73.67','心狠手辣 他谋划着谋杀'],
['75.35','金钱捡不来 悔恨千不该'],
['77.09','骗到柬埔寨 囚禁三年五载'],
['78.71','贪婪变阻碍 深陷苦海'],
['80.37','眼看着他们恶魔原形现出来'],
['82.28','啪啪啪啪'],
['83.96','在你头上暴扣三下'],
['85.65','俯瞰重灾区崩塌'],
['87.28','如这烂圈子臭虫该被轰炸'],
['88.94','金玉其外 败絮其中'],
['90.82','大多数听众就如笼中蛆虫'],
['92.58','悸动地记诵 激动地异动'],
['94.35','发疯般繁衍附炎所剩的腐肉'],
['97.43','都想给自己找个爸爸'],
['101.34','跪在地上叫着我妈妈'],
['102.98','我们是精神的财阀 给你淌血的伤口上包扎'],
['106.10','爱恨交加的岁月给我留下刀疤'],
['107.74','看它狡诈的脸上露出了獠牙'],
['109.87','我在喜马拉雅 你在我的胯下'],
['112.81','黑特打打杀杀 loser的天快塌啦'],
['116.28','站在悬崖遥 望前方的路四通发达'],
['120.00','俯瞰天下 播的种子正在生根发芽'],
['123.43','丧心病狂的狗 别在那吠了 别在那吠了'],
['126.62','各种恶习和丑陋 把文化废了 把文化废了'],
['130.12','该轮到谁了 触犯了规则 众目睽睽将你包围着'],
['133.12','好困想睡了 在天空飞着 他们只配被我支配着'],
['136.78','亲爱的神父 给我宽恕 我精神也常得不到满足'],
['140.16','现实残酷 义无反顾 我的灵魂已经疮痍满目'],
['143.54','不是圣人也不是叛徒 七情六欲将我牢牢缠住'],
['146.78','感谢上帝总对我袒护 死后让我在天堂漫步'],
['150.54','我在喜马拉雅 你在我的胯下'],
['154.05','黑特打打杀杀 loser的天快塌啦'],
['157.18','站在悬崖 遥望前方的路四通发达'],
['161.20','俯瞰天下播的种子正在生根发芽'],
['163.46','飞吧飞吧展开翅飞吧'],
['168.53','飞吧飞吧展开翅飞吧'],
['172.01','飞吧飞吧展开翅飞吧'],
['175.47','勇闯天涯荣耀头衔早被我拿下']
];
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime, str = '';
setProgress(aud.duration,tt);
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
if(j > 0) str = lrcAr + '<br>';
str += '<span class="lighten">' + lrcAr + '</span>';
if(j < lrcAr.length - 1) str += '<br>' + lrcAr;
lrcbox.innerHTML = str;
}
}
})
progress.onclick = () => aud.paused ? aud.play() : aud.pause();
function setProgress(task,current) {
if(task <= 0 || current <= 0) return false;
let prog = 100 * current / task;
progress.style.background = `conic-gradient(from 180deg,tan ${prog}%,transparent ${prog}%)`;
progress.setAttribute('data-per',prog.toFixed(2) + '%');
}
</script> 巍然屹立、望而却步。
黑黑朋友遴选的歌曲太棒了。 黑黑老师的图很有看点，送花花加点赞{:4_187:}{:4_199:} 千羽 发表于 2022-6-14 21:04
黑黑老师的图很有看点，送花花加点赞
晚上好{:4_190:} 好制作，飘逸的云彩，横着飘。山顶的云又在飘。播放器也戴框了。真漂亮！{:4_199:} 马黑黑 发表于 2022-6-14 21:07
晚上好
嗯，晚上好{:4_181:} 加林森 发表于 2022-6-14 21:12
好制作，飘逸的云彩，横着飘。山顶的云又在飘。播放器也戴框了。真漂亮！
这个播放器是简化版，不能控制播放进度 千羽 发表于 2022-6-14 21:12
嗯，晚上好
俺这个没有羽图的美好意境 马黑黑 发表于 2022-6-14 21:14
俺这个没有羽图的美好意境
哈哈，谦虚开始……{:4_189:} 马黑黑 发表于 2022-6-14 21:13
这个播放器是简化版，不能控制播放进度
哦。这个应该是吟唱的吧。 加林森 发表于 2022-6-14 21:19
哦。这个应该是吟唱的吧。
说唱乐
千羽 发表于 2022-6-14 21:18
哈哈，谦虚开始……
美德，美德 马黑黑 发表于 2022-6-14 21:26
美德，美德
发扬光大，继续{:4_173:} 马黑黑 发表于 2022-6-14 21:26
说唱乐
好快的是的哦。 加林森 发表于 2022-6-14 21:31
好快的是的哦。
它有所指额 千羽 发表于 2022-6-14 21:27
发扬光大，继续
必须的必须的 马黑黑 发表于 2022-6-14 21:39
它有所指额
是的。明白的。 加林森 发表于 2022-6-14 21:42
是的。明白的。
挺好的 马黑黑 发表于 2022-6-14 21:45
挺好的
{:4_181:}