<style> #conicPlayer { left: 20px; bottom: 20px;display: grid; place-items: center; width: 100px; height: 100px; border-radius:50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer;position: absolute; } #conicPlayer::before { position: absolute;content: attr(data-per); display: grid; place-items: center; width: 90px;height: 90px; border-radius: 50%; background: #DBE3E2; color: seagreen; font:normal 15px sans-serif; white-space: pre; transition: 1.2s; } #lrctext { position: absolute; left: 130px;bottom: 55px; font: bold 1.4em sans-serif; color: orange; text-shadow: 1px 1px2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; } #lrctext:hover, #conicPlayer:hover::before{ color: tomato; } </style> <div id="papa"> <spanid="conicPlayer"data-per="00:00 00:00"></span> <spanid="lrctext">lrc歌词</span> </div> <script> let lrcAr = [ ['00.00','纯音乐'], ['170.00','感谢欣赏'] ]; let aud = new Audio(); aud.src = 'https://music.163.com/song/media/outer/url?id=1855096170.mp3'; aud.autoplay = true; aud.loop = true; conicPlayer.onclick = () => aud.paused ?aud.play() : aud.pause(); aud.addEventListener('timeupdate', () =>{ letcurrent = aud.currentTime / aud.duration * 100; conicPlayer.style.background= `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`; conicPlayer.setAttribute('data-per',toMin(aud.currentTime) + '\n' + toMin(aud.duration)); for(j=0;j<lrcAr.length; j++) { if(aud.currentTime>= lrcAr[j][0]) lrctext.innerText = lrcAr[j][1]; } }); let toMin = (val) => { if(!val) return '00:00'; val= Math.floor(val); letmin = parseInt(val / 60), sec = parseFloat(val % 60); if(min< 10) min = '0' + min; if(sec< 10) sec = '0' + sec; returnmin + ':' + sec; } </script>
|