论坛 › 欢乐水吧 › 等你归来（黑黑系列播放器重新做--1）

小辣椒 发表于 2023-2-9 12:51

等你归来（黑黑系列播放器重新做--1）

<style>
#papa {
      --state: paused;
      margin: auto;
      left: -435px;
      width: 1447px;
      height: 715px;
      top: 150px;
      background: #666 url('https://pic.imgdb.cn/item/63e0be184757feff333170bc.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;
      font-size: 14px;
      bottom: 30px;
}

#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;
      width: 260px;
      height: 6px;
      border-radius: 6px;
      background: snow;
      opacity: .65;
      cursor: pointer;
      position: relative;
}

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

#lrc {
      --motion: cover1;
      --tt: 5s;
      position: absolute;
      top: 25px;
      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(60, 0%, 0%, .45), hsla(60, 100%, 50%, .75));
      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; }
}

#dt2{ position: absolute; width: 20px; height: 20px; top: 136px; left: 103px; }
#dt3{ position: absolute; width:150px; height: 98px; top: 600px; left: 1250px; }



</style>

<div id="papa">


<img id="dt2" src="https://pic.imgdb.cn/item/63e0be394757feff3331b047.gif" alt="" />
       <img id="dt3" src="https://pic.imgdb.cn/item/60f538895132923bf8b78ddb.gif" alt=""style=" " />

      <div id="lrc" data-lrc="HCPlayer">HCPlayer</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://wx.ttt.dj/data/nfs//mp3/dngl.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>

小辣椒 发表于 2023-2-9 12:56

@马黑黑

黑黑特别喜欢这个频谱播放器，这个是你的最后频谱定版，我稍微改了一下播放器的尺寸

还有喜欢这个有闪动的代码，但我不会修改这个闪动的尺寸，我特意用了这个有黑白相间的图图，想显示闪动的效果，但还想再增加一点，代码不会改，最好还闪动的厉害一点{:4_170:}

上次是有个图片会闪动，是不是一个道理？

小辣椒 发表于 2023-2-9 12:58

感谢黑黑这么多的源码教程分享，昨天看了一下太多了。。。。。{:4_178:}

小辣椒 发表于 2023-2-9 13:07

一个一个慢慢做出来，这个是我最喜欢之一{:4_189:}

庶民 发表于 2023-2-9 14:15

大制作，大格局，欣赏。

梦油 发表于 2023-2-9 14:23

时明时暗的画面增加了美图的神秘色彩，特别是在暗处飞舞的小燕子，更使画面增添了几分魅力。

红影 发表于 2023-2-9 16:09

这样背景和歌曲十分吻合，太棒了，明暗变化更让帖子有了别样的意味。亲爱的真棒{:4_199:}

红影 发表于 2023-2-9 16:13

这个播放器进度可调，特别好。程响的这首歌也特别好听，亲爱的歌词同步做的好{:4_187:}

马黑黑 发表于 2023-2-9 17:14

小辣椒 发表于 2023-2-9 12:56
@马黑黑

黑黑特别喜欢这个频谱播放器，这个是你的最后频谱定版，我稍微改了一下播放器的尺寸


关键帧动画，你说的闪动效果，无关于元素或图片的尺寸，它只是变化元素或图片的一些特性（如本帖的 opacity 属性）。哪一个元素调用 keyframes 动画，只要属性合适与它，都行。

雨中悄然 发表于 2023-2-9 18:38

图片超级有质感，动画光影极美{:4_187:}
小辣椒无论代码还是图片，都是一流

千羽 发表于 2023-2-9 19:30

这个播放器很吸眼球，美美哒{:4_187:}

千羽 发表于 2023-2-9 19:47

小辣椒的背景图和标题的制作都是很不错的，放上纹理后画面就很质感了，小辣椒心灵手巧，做啥都是一流的{:4_187:}

千羽 发表于 2023-2-9 19:50

动图的加入让画面更有灵动感，小辣椒棒棒哒{:4_179:}

小辣椒 发表于 2023-2-9 20:40

马黑黑 发表于 2023-2-9 17:14
关键帧动画，你说的闪动效果，无关于元素或图片的尺寸，它只是变化元素或图片的一些特性（如本帖的 opaci ...

好的，明白了，以后再实践几次

小辣椒 发表于 2023-2-9 20:40

庶民 发表于 2023-2-9 14:15
大制作，大格局，欣赏。

谢谢庶民欣赏，快去收礼{:4_187:}

小辣椒 发表于 2023-2-9 20:41

梦油 发表于 2023-2-9 14:23
时明时暗的画面增加了美图的神秘色彩，特别是在暗处飞舞的小燕子，更使画面增添了几分魅力。

谢谢梦油，这个就是黑黑代码的魅力所在

小辣椒 发表于 2023-2-9 20:42

红影 发表于 2023-2-9 16:09
这样背景和歌曲十分吻合，太棒了，明暗变化更让帖子有了别样的意味。亲爱的真棒

亲爱的，我也是想了好久，这个播放器效果用什么图图，也是测试了几次的

小辣椒 发表于 2023-2-9 20:44

红影 发表于 2023-2-9 16:13
这个播放器进度可调，特别好。程响的这首歌也特别好听，亲爱的歌词同步做的好

这个播放器有进度条，可以调节音乐时间我也是很喜欢的，这首歌前段时间就想做的，发现这个图图可以用歌词比较长的就用上了

小辣椒 发表于 2023-2-9 20:45

雨中悄然 发表于 2023-2-9 18:38
图片超级有质感，动画光影极美
小辣椒无论代码还是图片，都是一流

悄然没有的，我图图也是做不好的，凡是漂亮的图图都是以前做的

小辣椒 发表于 2023-2-9 20:48

千羽 发表于 2023-2-9 19:30
这个播放器很吸眼球，美美哒

千羽晚上好{:4_187:}

查看完整版本: 等你归来（黑黑系列播放器重新做--1）