人生没有回头路(DJ 默涵伤感女版)-米灵
本帖最后由 醉美水芙蓉 于 2022-8-30 17:44 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: tan url('https://pic.imgdb.cn/item/630cbc1816f2c2beb1593a00.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
<style>
#papa { margin: auto; width: 750px; height: 560px; box-shadow: 3px 3px 20px #000; background: lightblue; position: relative; }
#h5player { position: absolute; display: grid; place-items: center; width: 100px; height: 100px; right: 900px; bottom: 20px; background: teal; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 90%, red 91%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); cursor: pointer; }
#tmsg { position: absolute; left: 40px; bottom: 50px; font: normal 14px sans-serif; color:#eee;}
#lrctext { position: absolute; left: 300px; top: 560px; font: bold 24px sans-serif; color:#eee}
</style>
<div id="papa">
<span id="tmsg">00:00<br>00:00</span>
<span id="h5player"></span>
<span id="lrctext">lrc歌词</span>
</div>
<script>
let aud = new Audio();
let lrcAr =[
['0.00','人生没有回头路(DJ 默涵伤感女版)-米灵'],
['5.02','词：徐晓岚'],
['10.04','曲：李勇军'],
['15.06','制作人：花僮'],
['20.08','出品人：花僮'],
['26.00','LRC编辑：醉美水芙蓉'],
['31.03','谁能看清我心里有多苦'],
['38.07','谁在乎明天我身在何处'],
['45.08','这一条路究竟有多残酷'],
['53.09','有太多无奈有太多无助'],
['61.03','自己选的路就不要怕苦'],
['68.07','现在退出也没有回头路'],
['76.02','如果不能哭就假装幸福'],
['83.08','任凭这世界无情的摆布'],
['91.05','我从不怕孤独从不认输'],
['98.06','哪怕错得离谱万劫不复'],
['103.00','如果人生路是一场赌注'],
['109.09','那就做一个勇敢的赌徒'],
['117.08','我从不怕孤独从不认输'],
['124.10','默默承受着寒风刺痛骨'],
['129.02','从不怕吃苦从不怕辜负'],
['136.03','如果感觉累了就放下包袱'],
['144.00','我从不怕孤独从不认输'],
['151.02','默默承受着寒风刺痛骨'],
['155.05','从不怕吃苦从不怕辜负'],
['162.06','如果感觉累了就放下包袱'],
['167.03','谢谢欣赏！']
];
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=236986476&.mp3 ';
aud.autoplay = true;
aud.loop = true;
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) { //轨道
let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
} else { //内区域
aud.paused ? aud.play() : aud.pause();
}
}
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.duration) + '\n' + toMin(aud.currentTime);
h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
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;
}
</script>
水芙蓉晚上好。你最好把字体的颜色调另外一个颜色，与背景的颜色相近就好看了。 加林森 发表于 2022-8-29 21:48
水芙蓉晚上好。你最好把字体的颜色调另外一个颜色，与背景的颜色相近就好看了。
还没有找到哪里修改呢？向队长学习呢！ 醉美水芙蓉 发表于 2022-8-29 21:51
还没有找到哪里修改呢？向队长学习呢！
你没有看老黑的教程？ CSS里，
#tmsg { position: absolute; right: 50px; bottom: 50px; font: normal 14px sans-serif; }
可以加入color ：
#tmsg { position: absolute; right: 50px; bottom: 50px; font: normal 14px sans-serif; color: #eee; } 马黑黑 发表于 2022-8-29 22:15
CSS里，
#tmsg { position: absolute; right: 50px; bottom: 50px; font: normal 14px sans-serif; }
黑黑老师时间和播放器分离了？不会调整了？ right: 50px; 改为 left 就好 水芙蓉美女聪明，这个做得漂亮{:4_187:} 马黑黑 发表于 2022-8-29 22:50
right: 50px; 改为 left 就好
谢谢黑黑老师指导已调整好！ 红影 发表于 2022-8-30 08:24
水芙蓉美女聪明，这个做得漂亮
谢谢红影美女支持！ 醉美水芙蓉 发表于 2022-8-30 17:50
谢谢黑黑老师指导已调整好！
这个版本播放其和播放信息是离散的，需要手工调整。你以后可以使用不离散的版本
页:
[1]