梦风雨 发表于 2025-3-9 21:43

此生无憾

本帖最后由 梦风雨 于 2025-3-10 22:33 编辑 <br /><br /><center><font color="#ee110e" size="5" face="华文彩云">
<marquee height="60" width="230">恋晴恋雨又恋歌</marquee><font color="#ee1111" size="5" face="华文彩云">
<marquee direction="right" height="60" width="230">歌恋又雨恋晴恋</marquee></font></font></center>
<div></div>

<style>
.mama { left: 520px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; }
.wrap { width: 60px; height: 60px;box-reflect: right; -webkit-box-reflect: right; position: relative; }
.mama meter { width: 120px; height: 20px; position: relative; }
.wrap span { --ww: 6px; width: var(--ww); height: 6px; bottom: -60px; background-color: rgba(255,0,0,.6); display: inline-block; position: absolute; }
.wrap span:nth-child(2) { left: var(--ww); }
.wrap span:nth-child(3) { left: calc(var(--ww) * 2); }
.wrap span:nth-child(4) { left: calc(var(--ww) * 3); }
.wrap span:nth-child(5) { left: calc(var(--ww) * 4); }
.wrap span:nth-child(6) { left: calc(var(--ww) * 5); }
.wrap span:nth-child(7) { left: calc(var(--ww) * 6); }
.wrap span:nth-child(8) { left: calc(var(--ww) * 7); }
.wrap span:nth-child(9) { left: calc(var(--ww) * 8); }
.wrap span:nth-child(10) { left: calc(var(--ww) * 9); }
</style>

<div class="mama">
      <div class="wrap"></div>
      <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2677000074.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 10}).forEach((ele) => {
      ele = document.createElement('span');
      ele.className = 'sskey';
      ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
      wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

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

aud.addEventListener('timeupdate', () => {
      Array.from(sskey).forEach((ele) => {
                ele.style.height = num(20, 60) + 'px';
      })
      meter.value = prog(aud.duration, aud.currentTime);
})

</script>

红影 发表于 2025-3-9 22:31

好听，感谢梦风雨带来的好歌{:4_187:}

红影 发表于 2025-3-9 22:32

那个小频谱好像位置偏了呢{:4_204:}

梦江南 发表于 2025-3-10 08:50

非常好听的歌曲。

梦风雨 发表于 2025-3-10 22:28

红影 发表于 2025-3-9 22:31
好听，感谢梦风雨带来的好歌

分享聆听歌曲。{:4_191:}

梦风雨 发表于 2025-3-10 22:29

红影 发表于 2025-3-9 22:32
那个小频谱好像位置偏了呢

谢谢的提点。{:4_178:}

梦风雨 发表于 2025-3-10 22:29

梦江南 发表于 2025-3-10 08:50
非常好听的歌曲。

分享聆听歌曲旋律。{:4_191:}

红影 发表于 2025-3-10 23:14

梦风雨 发表于 2025-3-10 22:28
分享聆听歌曲。

嗯嗯，非常好听{:4_187:}

红影 发表于 2025-3-10 23:15

梦风雨 发表于 2025-3-10 22:29
分享聆听歌曲旋律。

看你移动过来了{:4_187:}

绿叶清舟 发表于 2025-3-11 21:44

好听，谢谢风雨分享

梦风雨 发表于 2025-3-15 14:36

红影 发表于 2025-3-10 23:15
看你移动过来了

继续一起分享。{:4_191:}

梦风雨 发表于 2025-3-15 14:36

绿叶清舟 发表于 2025-3-11 21:44
好听，谢谢风雨分享

分享聆听歌曲。{:4_191:}

红影 发表于 2025-3-15 17:12

梦风雨 发表于 2025-3-15 14:36
继续一起分享。

问好梦风雨，下午好{:4_187:}

梦风雨 发表于 2025-3-16 21:16

红影 发表于 2025-3-15 17:12
问好梦风雨，下午好

问好红影，晚上好。{:4_187:}

红影 发表于 2025-3-16 22:34

梦风雨 发表于 2025-3-16 21:16
问好红影，晚上好。

问好风雨，春日快乐{:4_187:}

梦风雨 发表于 2025-3-18 14:27

红影 发表于 2025-3-16 22:34
问好风雨，春日快乐

问好红影，新周快乐.{:4_187:}

红影 发表于 2025-3-18 17:34

梦风雨 发表于 2025-3-18 14:27
问好红影，新周快乐.

问好风雨，下午好{:4_187:}
页: [1]
查看完整版本: 此生无憾