论坛 › 欢乐水吧 › 夜空的星星 （学习黑黑频谱播放器按钮）

小辣椒 发表于 2022-11-1 21:58

夜空的星星 （学习黑黑频谱播放器按钮）

<style>
#papa {
      --state: paused;
      margin: auto;
      left: -337px;
      width: 1262px;
      height: 710px;
      top:150px;
      background: #666 url('https://365.tf/disk/tf/1667374910.gif') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      display: grid;
      place-items: center;
      opacity: .95;
      position: relative;
      z-index: 1;
}

#papa::before {
      position: absolute;
      content: '';
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background: #000;
      opacity: .0;
      animation: darker linear 1.2s infinite alternate;
      transition: all 1.2s;
      animation-play-state: var(--state);
}

#mplayer {
      position: absolute;
      display: grid;
      grid-template-areas: 'cur btnplay dur''prog prog prog';
      gap: 4px;
      place-items: end center;
      left: 800px;
      top: 600px;
      font-size: 14px;
      bottom: 20px;
}

#cur {
      grid-area: cur;
      color: snow;
}

#dur {
      grid-area: dur;
      color: snow;
}

#btnplay {
      grid-area: btnplay;
      display: grid;
      grid-auto-flow: column;
      place-items: end center;
      gap: 0 4px;
      height: 60px;
      cursor: pointer;
}

#btnplay>span {
      background: red;
      width: 4px;
      transition: .6s;
      opacity: .95;
}

#prog {
      --ww: 0px;
      grid-area: prog;
      
      top: -10px;
      width: 300px;
      height: 12px;
      border-radius: 6px;
      background: snow;
      opacity: .65;
      cursor: pointer;
      position: relative;
}

#prog::before {
      position: absolute;
      content: '';
      width: var(--ww);
      height: 12px;
      border-radius: 6px;
      background: snow linear-gradient(90deg, green, red);
      opacity: .65;
}

#lrc {
      --motion: cover1;
      --tt: 5s;
      position: absolute;
      top: 120px;
      font: bold 2.4em sans-serif;
      color: hsl(0, 10%, 90%);
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}

#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: nowrap;
      background: linear-gradient(180deg, hsla(200, 90%,50%, .45), hsla(200, 90%, 50%, .45));
      filter: inherit;
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}

@keyframes cover1 {
      from { width: 0; }
      to { width: 100%; }
}

@keyframes cover2 {
      from { width: 0; }
      to { width: 100%; }
}

@keyframes darker {
      from { opacity: .0; }

      to { opacity: .45; }
}

   #plane1{position: absolute;left: 32px;top: 0;width: 32px;offset-distance: 0;offset-path: path("M0 20 Q300 80, 700 350 T1220 700");animation: move 8s linear infinite;}
#dt2{ position: absolute; width: 32px; height: 32px; top: 250px; left: 450px; }
#dt3{ position: absolute; width:32px; height: 32px; top: 480px; left: 800px; }
#dt4{ position: absolute; width: 32px; height: 32px; top: 200px; left: 650px; }

      @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
      @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
      @keyframes move { to { offset-distance: 100%;} }

</style>
<div id="papa">
               
       <img id="dt2" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
       <img id="dt3" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
       <img id="dt4" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
          <img id="plane1" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />

      <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
      <div id="mplayer">
                <div id="cur">00:00</div>
                <div id="btnplay"></div>
                <div id="dur">00:00</div>
                <div id="prog"></div>
      </div>
      <audio id="aud" src="https://365.tf/disk/tf/1667354046.mp3 " loop autoplay></audio>
</div>

<script>
(function() {
      let mKey = 0,
                mFlag = true;
       let lrcAr = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      for (j = 0; j < 20; j++) {
                let pinpu = document.createElement('span');
                pinpu.className = 'pinpu';
                pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
                btnplay.appendChild(pinpu);
      }
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('timeupdate', () => {
                let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
                prog.style.setProperty('--ww', prg + 'px');
                cur.innerText = toMin(aud.currentTime);
                dur.innerText = toMin(aud.duration);
                setPinpu();
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime >= lrcAr) {
                              cKey = j;
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });
      let calcKey = () => {
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime <= lrcAr) {
                              mKey = j - 1;
                              break;
                        }
                }
                if (mKey < 0) mKey = 0;
                if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
                let time = lrcAr - (aud.currentTime - lrcAr);
                showLrc(time);
      };
      let showLrc = (time) => {
                let name = mFlag ? 'cover1' : 'cover2';
                lrc.innerHTML = lrc.dataset.lrc = lrcAr;
                lrc.style.setProperty('--motion', name);
                lrc.style.setProperty('--tt', time + 's');
                lrc.style.setProperty('--state', 'running');
                mKey += 1;
                mFlag = !mFlag;
      };
      let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), papa.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), papa.style.setProperty('--state', 'running'));
      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;
      };
      let setPinpu = () => {
                let eles = document.querySelectorAll('.pinpu');
                eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
      };
})();
</script>
<br><br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-11-1 21:59

@马黑黑

黑黑学习套用做了一个{:4_173:}

小辣椒 发表于 2022-11-1 22:01

这个频谱想向上次那样加大，一下子弄不好，主要被2边的时间没有分出来，时间问题，速度完成了{:4_170:}

小辣椒 发表于 2022-11-1 22:03

这个播放器移动位置也是比前面的那种复杂一点，前面的我基本熟了一下子就好，这个我还没有搞透。

小辣椒 发表于 2022-11-1 22:06

播放器改了几个数字才移动过来

马黑黑 发表于 2022-11-1 22:15

动感十足，太棒啦

小辣椒 发表于 2022-11-1 22:30

马黑黑 发表于 2022-11-1 22:15
动感十足，太棒啦

真的棒？{:4_203:}

我自己感觉没有做出想要的效果{:4_189:}

马黑黑 发表于 2022-11-1 22:31

小辣椒 发表于 2022-11-1 22:30
真的棒？

我自己感觉没有做出想要的效果

可以了，不是一切都是和预设的一样的，感觉好就行

红影 发表于 2022-11-1 22:32

漂亮，真的是最靓丽的星星呢，亲爱的真棒{:4_199:}

小辣椒 发表于 2022-11-1 22:33

马黑黑 发表于 2022-11-1 22:31
可以了，不是一切都是和预设的一样的，感觉好就行

谢谢黑黑，{:4_189:}

小辣椒 发表于 2022-11-1 22:36

红影 发表于 2022-11-1 22:32
漂亮，真的是最靓丽的星星呢，亲爱的真棒

亲爱的~~图图以前做好的，这个星星复制以前的帖里面的，就做了个歌词同步。感觉频谱位置没有修改好，还在想应该怎么样修改。。。。其实频谱放中间加大，感觉画面也是会被影响，所以就这样算了{:4_173:}

马黑黑 发表于 2022-11-1 22:40

小辣椒 发表于 2022-11-1 22:33
谢谢黑黑，

{:4_191:}

马黑黑 发表于 2022-11-1 22:52

小辣椒 发表于 2022-11-1 22:03
这个播放器移动位置也是比前面的那种复杂一点，前面的我基本熟了一下子就好，这个我还没有搞透。

移动简单的：

#mplayer { position: absolute; left: 10px; top: 10px; ....

小辣椒 发表于 2022-11-1 22:56

马黑黑 发表于 2022-11-1 22:52
移动简单的：

#mplayer { position: absolute; left: 10px; top: 10px; ....

播放器我会移动，就是那时间 4个0

小辣椒 发表于 2022-11-1 22:57

马黑黑 发表于 2022-11-1 22:40


黑黑，今天太迟了，我准备下了，明天见

醉美水芙蓉 发表于 2022-11-1 23:01

马黑黑 发表于 2022-11-1 23:45

小辣椒 发表于 2022-11-1 22:57
黑黑，今天太迟了，我准备下了，明天见

88

马黑黑 发表于 2022-11-1 23:45

小辣椒 发表于 2022-11-1 22:56
播放器我会移动，就是那时间 4个0

那个不用移动的吧，封装好的

红影 发表于 2022-11-2 10:27

小辣椒 发表于 2022-11-1 22:36
亲爱的~~图图以前做好的，这个星星复制以前的帖里面的，就做了个歌词同步。感觉频谱位置没有修改好，还在 ...

可以试试的，稍微加大一些应该会效果不一样。

查看完整版本: 夜空的星星 （学习黑黑频谱播放器按钮）