加林森 发表于 2022-8-29 21:40

纯音乐-雨湘蓝


<style>
#papa { left: -20px; width: 800px; height: 600px; background: tan url('https://pic.imgdb.cn/item/630cba4216f2c2beb15820d0.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 470px; 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: 91px; border-radius: 50%; background: #20B2AA; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 525px; font: bold 1.4em sans-serif; color: #2E8B57; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>

<div id="papa">
      <span id="conicPlayer" data-per="00:00
00:00"></span>
      <span id="lrctext">lrc歌词</span>
</div>

<script>
let lrcAr = [
      ['00.00', '雨湘蓝'],
      ['280.00','谢谢欣赏']
];
let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=1327082254.mp3';
aud.autoplay = true;
aud.loop = true;

conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
      let current = 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) lrctext.innerText = lrcAr;
      }
});

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:41

@东篱闲人

东篱闲人 发表于 2022-8-29 21:49

好听，美美的享受。。。{:4_174:}

东篱闲人 发表于 2022-8-29 21:49

你又把那圆圈整上面去啦。。。{:5_106:}

加林森 发表于 2022-8-29 21:51

东篱闲人 发表于 2022-8-29 21:49
你又把那圆圈整上面去啦。。。

搬一下家嘛。{:4_189:}

加林森 发表于 2022-8-29 21:52

东篱闲人 发表于 2022-8-29 21:49
好听，美美的享受。。。

喜欢就好！{:4_190:}

东篱闲人 发表于 2022-8-29 22:14

加林森 发表于 2022-8-29 21:52
喜欢就好！

嗯嗯，喜欢。。。{:4_174:}

马黑黑 发表于 2022-8-29 22:18

队长这个小而美

小辣椒 发表于 2022-8-29 22:26

队长去看看黑黑另一个同样的播放器，不用遮罩伪元素的，你现在的播放器里面颜色不用修改的

加林森 发表于 2022-8-29 22:31

马黑黑 发表于 2022-8-29 22:18
队长这个小而美

合格吧？

加林森 发表于 2022-8-29 22:32

小辣椒 发表于 2022-8-29 22:26
队长去看看黑黑另一个同样的播放器，不用遮罩伪元素的，你现在的播放器里面颜色不用修改的

累死了。今天又去查核酸，整得我都没时间学习了。

加林森 发表于 2022-8-29 22:34

东篱闲人 发表于 2022-8-29 22:14
嗯嗯，喜欢。。。

那就好！

红影 发表于 2022-8-29 22:39

漂亮，圆圈里的颜色调一下就更好了{:4_187:}

加林森 发表于 2022-8-29 22:44

红影 发表于 2022-8-29 22:39
漂亮，圆圈里的颜色调一下就更好了

调不来。告诉我怎么调？

小辣椒 发表于 2022-8-29 22:49

加林森 发表于 2022-8-29 22:32
累死了。今天又去查核酸，整得我都没时间学习了。

队长下了明天做

马黑黑 发表于 2022-8-29 22:50

加林森 发表于 2022-8-29 22:31
合格吧？

{:4_199:}

加林森 发表于 2022-8-29 22:55

小辣椒 发表于 2022-8-29 22:49
队长下了明天做

好的。88

加林森 发表于 2022-8-29 22:56

马黑黑 发表于 2022-8-29 22:50


谢谢老黑！{:4_191:}

青青子衿 发表于 2022-8-29 23:10

加林森将军，帖子有创新。。。{:4_204:}

加林森 发表于 2022-8-29 23:17

青青子衿 发表于 2022-8-29 23:10
加林森将军，帖子有创新。。。

青青晚上好！我只是爱好的！不能&#128170;他们比的！
页: [1]
查看完整版本: 纯音乐-雨湘蓝