进度可调+透明遮罩的圆环播放器

马黑黑 · 发表于 2022-8-29 12:27

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-8-29 12:36 编辑

00:00
00:00 lrc歌词

马黑黑 · 发表于 2022-8-29 12:29

本帖最后由马黑黑于 2022-8-29 12:35 编辑

源码：

<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: 20px; 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; right: 50px; bottom: 50px; font: normal 14px sans-serif; }
#lrctext { position: absolute; left: 20px; top: 20px; font: bold 24px sans-serif; }
</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','耶利亚女郎 - 歌词省略'],['240.00','谢谢支持'] ]
aud.src = 'https://music.163.com/song/media/outer/url?id=150852.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[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 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>