加林森 发表于 2022-8-28 13:56

《知我》- 国风堂 / 哦漏


<style>
#papa { left: -214px; width: 1024px; height: 682px; background: gray url('https://pic.imgdb.cn/item/630afbe616f2c2beb133eb7f.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#player { padding: 10px; position: absolute; top: 20px; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; }
#lrctext { font: bold 1.4em sans-serif; color: #BDB76B; text-shadow: 1px 1px 2px #000; user-select: none; transition: all 1.5s; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnmain { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(0,0,0,.5); border-radius: 50%; cursor: pointer; transition: all 2s; }
#btnmain:hover { background: orange; }
#btnplay {width: 16px; height: 16px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prgline { width: 200px; height: 4px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer;}
#tmsg { font: normal 16px sans-serif; color: orange; user-select: none; text-shadow: 1px 1px 1px #000; transition: 1.5s; }
#tmsg:hover, #lrctext:hover { color: tomato; }
</style>

<div id="papa">
      <div id="player">
                <div id="lrctext">lrc歌词</div>
                <div id="btnwrap">
                        <span id="btnmain"><span id="btnplay"></span><span id="btnpause"></span></span>
                        <span id="prgline"></span><span id="tmsg">00:00 | 00:00</span>
                </div>
      </div>
</div>

<script>
let lrcAr = [
      ['2.24','知我-国风堂 / 哦漏'],
      ['4.24','lrc编辑：加林森'],
        ['34.25','月夕江 皱秋波'],
        ['37.04','满船清梦压星河'],
        ['40.01','但有夜雀 无人和悲歌'],
        ['45.53','削桐作琴 看山色'],
        ['48.84','忽闻有长歌'],
        ['51.23','蓑衣沾露 渔樵夜归客'],
        ['56.24','和青山 奏江河'],
        ['59.78','我知青山江河乐'],
        ['62.93','抚琴为人 无人知我乐'],
        ['68.31','“洋洋兮又复巍峨”'],
        ['71.59','来客忽笑我'],
        ['74.09','声声所念 来人皆可得'],
        ['79.22','徒余留 明月忆往昔'],
        ['83.00','温酒会知音'],
        ['85.80','借问人间 知我者能有几'],
        ['90.55','三尺瑶琴碎骨兮'],
        ['94.45','似绝弦断悲心'],
        ['97.36','孑然一身 苍茫天地兮'],
        ['125.33','天即亮 草霜凉'],
        ['128.45','弦上心音为谁断'],
        ['131.27','薄雾阑珊 不觉琴音乱'],
        ['136.84','待至来年又月圆'],
        ['139.99','海棠花烂漫'],
        ['142.69','再抚七弦 阔阔与君谈'],
        ['147.72','徒余留 明月忆往昔'],
        ['151.67','温酒会知音'],
        ['154.37','借问人间 知我者能有几'],
        ['158.93','三尺瑶琴碎骨兮'],
        ['163.00','似绝弦断悲心'],
        ['165.83','孑然一身 苍茫天地兮'],
        ['170.52','春秋转 旧人 不在 孤冢寒'],
        ['174.10','高山流水只为君挽'],
        ['177.30','残梦回还 曲终不复弹'],
        ['182.45','徒余留 明月忆往昔'],
        ['187.21','温酒会知音'],
        ['189.97','借问人间 知我者能有几'],
        ['194.85','三尺瑶琴碎骨兮'],
        ['198.68','似绝弦断悲心'],
        ['201.50','孑然一身 苍茫天地兮'],
        ['206.53','徒余留 明月忆往昔'],
        ['210.32','温酒会知音'],
        ['212.99','借问人间 知我者能有几'],
        ['217.67','三尺瑶琴碎骨兮'],
        ['221.50','似绝弦断悲心'],
        ['224.38','孑然一身 苍茫天地兮'],
      ['260.00','谢谢欣赏']
];

let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=1394167216.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
      prgline.style.backgroundSize = prgline.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
      tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
      }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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-28 13:56

@马黑黑

小辣椒 发表于 2022-8-28 14:48

队长这个是今天新的教程分享？

加林森 发表于 2022-8-28 15:13

小辣椒 发表于 2022-8-28 14:48
队长这个是今天新的教程分享？

是的。老黑今天发的。

小辣椒 发表于 2022-8-28 15:14

加林森 发表于 2022-8-28 15:13
是的。老黑今天发的。

我看见了，这个播放器滚动条是彩色的，我明天做了，昨天睡太迟，好累的

加林森 发表于 2022-8-28 15:22

小辣椒 发表于 2022-8-28 15:14
我看见了，这个播放器滚动条是彩色的，我明天做了，昨天睡太迟，好累的

好的。

梦油 发表于 2022-8-28 18:20

欣赏佳作，问候队长。

加林森 发表于 2022-8-28 20:13

梦油 发表于 2022-8-28 18:20
欣赏佳作，问候队长。

老梦晚上好。我才做了核酸检查回来！

红影 发表于 2022-8-28 20:21

队长又一个彩虹进度条，漂亮的制作{:4_187:}

加林森 发表于 2022-8-28 20:26

红影 发表于 2022-8-28 20:21
队长又一个彩虹进度条，漂亮的制作

是啊。挺好看的。{:4_189:}

醉美水芙蓉 发表于 2022-8-28 20:26

加林森 发表于 2022-8-28 20:31

醉美水芙蓉 发表于 2022-8-28 20:26
队长神速，又做了一个！队长做贴辛苦了！

不辛苦的。好玩就行的。

马黑黑 发表于 2022-8-28 20:58

队长越来越得心应手了

加林森 发表于 2022-8-28 21:00

马黑黑 发表于 2022-8-28 20:58
队长越来越得心应手了

我得多练习才能记住这些的。谢谢你！{:4_191:}

马黑黑 发表于 2022-8-28 21:00

加林森 发表于 2022-8-28 21:00
我得多练习才能记住这些的。谢谢你！

功夫不负有心人

加林森 发表于 2022-8-28 21:01

马黑黑 发表于 2022-8-28 21:00
功夫不负有心人

嗯嗯。{:5_116:}

红影 发表于 2022-8-28 21:24

加林森 发表于 2022-8-28 20:26
是啊。挺好看的。

是的，这个播放器特别漂亮。

加林森 发表于 2022-8-28 21:34

红影 发表于 2022-8-28 21:24
是的，这个播放器特别漂亮。

就是。

加林森 发表于 2022-8-28 22:48

红影 发表于 2022-8-28 21:24
是的，这个播放器特别漂亮。

我这个是同步歌词了吧！

红影 发表于 2022-8-28 22:59

加林森 发表于 2022-8-28 22:48
我这个是同步歌词了吧！

是的，歌词同步做的挺好的。
页: [1] 2
查看完整版本: 《知我》- 国风堂 / 哦漏