该死的温柔（套用黑黑的视频背景歌词同步）
<style>.mama { left: -340px; width: 1280px; height: 750px; top: 150px;background: lightblue url('https://pic.imgdb.cn/item/62ab46ff0947543129d10e3d.jpg') no-repeat center / cover; position: relative; overflow: hidden;}
.vid { position: absolute; width: 100%; height: 1000px; 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,250,250,.4) linear-gradient(to right bottom, rgba(0,0,0,.75),rgba(255,255,255,.4)); box-shadow: 1px 1px 1px #000; position: absolute; }
.lrcbox { min-width: 360px; font: normal 1.1em / 1.5em sans-serif; color: #eee; text-shadow: 1px 1px 1px #3783e0; }
.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: #222; font-weight: bold; font-size: 1.2em; }
</style>
<div class="mama">
<video class="vid" src="https://s138.ananas.chaoxing.com/sv-w7/video/e1/b6/cd/75c9982fbcb015628012279477c2a371/sd.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://wj.zp68.com/lxx/yunhua/2022/07/01/gsdwr.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.01','该死的温柔--演唱：群星'],
['7.40','LRC编辑：小辣椒'],
['17.45','你这该死的 温柔'],
['20.78','让我心在痛 泪在流'],
['24.19','就在和你说 分手以后'],
['27.78','想忘记 已不能够'],
['30.92','你这该死的 温柔'],
['34.08','让我止不住 颤抖'],
['37.78','哪怕有再多的 借口'],
['41.12','我都无法再去 牵你的手'],
['47.43','R:让 我们走完这一次完美的结局'],
['50.93','好像当初的约定爱着对方一直到老'],
['54.19','问自己 爱情的游戏还有没有规则'],
['57.60','要怎么面对着问题 说没问题'],
['60.98','心里在流泪 骗自己'],
['63.19','可是你却对我说'],
['64.90','宇：说好泪不流'],
['67.75','缘份已尽的时候流'],
['71.25','你不再要 借口'],
['74.22','风停了 雨顿了'],
['77.39','你一定要 走'],
['81.20','我还站在记忆里'],
['84.16','在感 受'],
['87.29','你这该死的 温柔'],
['90.78','让我心在痛 泪在流'],
['94.18','就在和你说分手以后'],
['97.78','想忘记 已不能够'],
['101.07','你这该死的 温柔'],
['104.11','让我止不住 颤抖'],
['107.75','哪怕有再多的 借口'],
['111.02','我都无法再去 牵你的手'],
['117.30','问自己 爱情的游戏还有没有规则'],
['120.98','要怎么面对着问题 说没问题'],
['124.01','心里在流泪 骗自己'],
['126.64','可是你却对我说'],
['128.35','说好 从此后'],
['131.92','说好 泪不流'],
['134.63','缘份 已尽的时候'],
['137.81','你不再要借口'],
['140.95','风停了 雨顿了'],
['144.05','你 一定要走'],
['147.75','我还站在记忆里'],
['150.90','在 感受'],
['154.37','你这该死的 温柔'],
['157.51','让我心在痛 泪在流'],
['161.03','就在和你说分手以后'],
['164.39','想忘记 已不能够'],
['167.53','你这该死的 温柔'],
['170.74','让我止不住 颤抖'],
['174.48','哪怕有再多的借口'],
['177.55','我都无法再去 牵你的手'],
['184.45','你这该死的 温柔'],
['187.40','让我心在痛 泪在流'],
['190.78','就在和你说 分手以后'],
['194.30','想忘记 已不能够'],
['197.42','你这该死的 温柔'],
['200.78','让我止不住 颤抖'],
['204.41','哪怕有再多的 借口'],
['207.69','我都无法再去 牵你的手'],
['214.82','哦..哦~'],
['220.66','牵你的 手'],
['223.61','牵你的 手'],
['233.67','谢谢欣赏']
];
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>
<br><br><br><br><br><br><br><br><br><br><br><br> @马黑黑
谢谢黑黑的源码教程 黑黑老师的代码好，小辣椒的手儿也很巧，很有看点{:4_203:} 这动感的画面真好，我没听到音乐……{:4_203:} 小辣椒，我没有听见歌曲呢？ 千羽 发表于 2022-6-17 21:05
黑黑老师的代码好，小辣椒的手儿也很巧，很有看点
千羽，这个是前几天黑黑的教程，小辣椒一直拖到今天才完成的 千羽 发表于 2022-6-17 21:06
这动感的画面真好，我没听到音乐……
怎么没有音乐？ 加林森 发表于 2022-6-17 21:11
小辣椒，我没有听见歌曲呢？
我听到的啊。@马黑黑 黑黑这个是什么原因啊，我自己听到的啊 小辣椒 发表于 2022-6-17 21:13
怎么没有音乐？
嗯，没听到，等会儿换个i浏览器看看{:4_203:} 小辣椒 发表于 2022-6-17 21:13
我听到的啊。@马黑黑 黑黑这个是什么原因啊，我自己听到的啊
是不是画面太大了？我看不见同步的了呢？ 音频在我这不能正常播放，需要点击源码的链接，播放后回到这里刷新帖子才可以进入正常状态 奇怪了，我错误在哪里呢？ 千羽 发表于 2022-6-17 21:06
这动感的画面真好，我没听到音乐……
音频来源有些异常，似乎是防盗链的或是速度受限的 山人 发表于 2022-6-17 21:18
音频在我这不能正常播放，需要点击源码的链接，播放后回到这里刷新帖子才可以进入正常状态
谢谢山人，你感觉我错误在哪里呢？ 马黑黑 发表于 2022-6-17 21:19
音频来源有些异常，似乎是防盗链的或是速度受限的
我换链接 马黑黑 发表于 2022-6-17 21:19
音频来源有些异常，似乎是防盗链的或是速度受限的
嗯，所以俺就没听见音乐{:4_181:} 加林森 发表于 2022-6-17 21:11
小辣椒，我没有听见歌曲呢？
队长你再听一下，要刷新，否则有缓存 马黑黑 发表于 2022-6-17 21:19
音频来源有些异常，似乎是防盗链的或是速度受限的
黑黑我换了音乐链接你再听一下 小辣椒 发表于 2022-6-17 21:27
黑黑我换了音乐链接你再听一下
现在秒开 千羽 发表于 2022-6-17 21:21
嗯，所以俺就没听见音乐
正常哈，现在正常了