在那遥远的地方（学习黑黑机器人效果播放器）
<style>
#papa { left: -414px; width: 1400px; height: 750px;top: 150px;background: snow url('https://pic1.imgdb.cn/item/634c096c16f2c2beb1a2436e.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; }
#mplayer { position: absolute; top: 620px; left: 610px; width: 700px; height: 60px; font: normal 14px sans-serif; }
#mplayer::before, #mplayer::after { position: absolute; width: 100%; height: 50%; color: snow; margin: 15px 0; }
#mplayer::before { content: attr(data-cur); }
#mplayer::after { content: attr(data-dur); text-align: right; }
#btnplay { position: absolute; left: calc(50% - 15px); bottom: 25px; width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(red, magenta, blue, aqua, lime, yellow, red); cursor: pointer; z-index: 2; animation: rot linear 4s infinite; }
#prog { --posX: 0px; position: absolute; bottom: 10px; width: 100%; height: 1px; background: #eee; cursor: pointer; }
#prog::before, #prog::after { position: absolute; content: ''; left: 0; }
#prog::before { width: var(--posX); height: 1px; background: red; }
#prog::after { left: var(--posX); top: calc(50% - 6px); width: 3px; height: 10px; background: silver; }
#tit { position: absolute; bottom: 220px; right: 60px; font: bold 2.5em sans-serif; color: snow; text-shadow: 2px 2px 3px #212121; }
#dt1{ position: absolute; width: 544px; height: 333px; top: -12px; left: 606px; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<img id="dt1" src="https://pic1.imgdb.cn/item/62f232a416f2c2beb1d93890.gif" alt="" />
<div id="tit">在<br>那<br>遥<br>远<br>的<br>地<br>方</div>
<div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="prog"></span><span id="btnplay"></span></div>
</div>
<script>
let aud = new Audio();
aud.src = 'https://wj.zp68.com/lxx/yunhua/20210508/005.mp3';
aud.autoplay = true;
aud.loop = true;
if (aud.paused) btnplay.style.animationPlayState = 'paused';
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
mplayer.onmousemove = (e) => {mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default';}
mplayer.onclick = (e) => {if (e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => aud.play());
aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);});
let mState = () => btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
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; };
papa.oncontextmenu = () => false;
</script>
<br><br><br><br><br><br><br><br><br><br> @马黑黑
黑黑，简单的我先做了{:4_170:}
小辣椒 发表于 2022-10-16 21:46
@马黑黑
黑黑，简单的我先做了
这个确实简单 小辣椒 发表于 2022-10-16 21:46
@马黑黑
黑黑，简单的我先做了
简单也是一种美，而且是很受欢迎的美。你又做得如此的好，用支付宝小鸡的话说，你真的是好棒呢{:4_173:} 马黑黑 发表于 2022-10-16 21:52
简单也是一种美，而且是很受欢迎的美。你又做得如此的好，用支付宝小鸡的话说，你真的是好棒呢
哈哈~~~笑S了{:4_170:} 马黑黑 发表于 2022-10-16 21:51
这个确实简单
主要今天脑子先理顺一下，容易的先做了 小辣椒 发表于 2022-10-16 21:53
哈哈~~~笑S了
你在支付宝养小鸡吗 小辣椒 发表于 2022-10-16 21:54
主要今天脑子先理顺一下，容易的先做了
有个适应 马黑黑 发表于 2022-10-16 21:54
你在支付宝养小鸡吗
没有，那有这种时间 小辣椒 发表于 2022-10-16 21:55
没有，那有这种时间
不花什么时间的，玩玩还能做公益，挺好 马黑黑 发表于 2022-10-16 21:54
有个适应
主要没有用歌词同步速度会快一点 马黑黑 发表于 2022-10-16 21:55
不花什么时间的，玩玩还能做公益，挺好
肯定不会去玩的{:4_173:} 画面清晰，歌曲好听，制作精良，在下佩服！佩服！！！！！！ 小辣椒 发表于 2022-10-16 21:56
肯定不会去玩的
那要少一个鸡油了{:4_170:} 小辣椒 发表于 2022-10-16 21:56
主要没有用歌词同步速度会快一点
歌词同步是要制作、细调的 马黑黑 发表于 2022-10-16 22:02
歌词同步是要制作、细调的
这个得花时间做了 马黑黑 发表于 2022-10-16 22:02
那要少一个鸡油了
那有时间去玩这些啊 小辣椒 发表于 2022-10-16 22:04
那有时间去玩这些啊
不玩就不玩吧 马黑黑 发表于 2022-10-16 22:16
不玩就不玩吧
黑黑我准备下了，明天见 小辣椒 发表于 2022-10-16 22:22
黑黑我准备下了，明天见
明儿见
页:
[1]
2