|
|
楼主 |
发表于 2022-8-29 22:07
|
显示全部楼层
@小辣椒 这个，按钮归拢在了一起，不易漂移：
- <style>
- #papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: lightblue; user-select: none; position: relative; z-index: 2; }
- #btnwrap { position: absolute; right: 20px; top: 20px; width: 100px; height: 100px; display: grid; place-items: center; }
- #btnwrap span { position: absolute; }
- #h5player { width: 100px; height: 100px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
- #btnplay { left: 15px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
- #btnplay:hover { background: tomato; }
- #btnpause { left: 20px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
- #btnpause:hover { border-color: transparent tomato; }
- #tmsg { left: 40px; font: normal 16px sans-serif; color: #eee; }
- #lrctext { position: absolute; right: 140px; top: 50px; font: bold 1.5em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; }
- </style>
- <div id="papa">
- <div id="btnwrap">
- <span id="h5player"></span>
- <span id="btnplay"></span>
- <span id="btnpause"></span>
- <span id="tmsg">00:00<br>00:00</span>
- </div>
- <div id="lrctext">lrc歌词</div>
- </div>
- <script>
- let aud = new Audio();
- let lrcAr = [ ['0.00','耶利亚女郎 - 歌词省略'],['240.00','谢谢支持'] ]
- aud.src = 'https://music.163.com/song/media/outer/url?id=150852.mp3';
- aud.autoplay = true;
- aud.loop = true;
- btnplay.onclick = () => aud.play();
- btnpause.onclick = () => aud.pause();
- h5player.onmousemove = (e) => h5player.style.cursor = isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
- 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;
- }
- }
- aud.addEventListener('pause', () => btnstate());
- aud.addEventListener('play',() => btnstate());
- aud.addEventListener('timeupdate', () => {
- tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
- 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[j][0]) lrctext.innerHTML = lrcAr[j][1];
- }
- });
- let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
- let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
- 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 22:10
发表于 2022-8-29 23:01
