小辣椒 发表于 2022-9-1 22:00

掀起你的盖头来（黑黑的教程分享套用一个）

<style>
      #papa { left: -344px; width: 1280px; height: 650px; top: 150px;background: gray url('https://wj.zp68.com/lxx/yunhua/2022/09/01/GIF.gif') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; user-select: none; z-index: 1; }
      #mplayer { position: absolute; left: calc(25% - 150px); bottom: 100px; width: 300px; height: 86px; background: rgba(0,0,0,.35); border: 4px double #ccc; border-radius: 3px; border-color: red orange purple tomato; backdrop-filter: blur(4px); display: grid; place-items: center; }
      #mplayer span { position: absolute; transition: .5s; }
      #lrc { top: 4px; padding: 2px; font: normal 1.2em sans-serif; color: #fff; text-shadow: 1px 1px 1px #000; }
      #prog { bottom: 6px; width: 290px; height: 1px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer; }
      #prog::before { position: absolute; height: 30px; width: 290px; top: -4px; content: ''; }
      #btnmain { bottom: 14px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
      #btnmain:hover { background: orange; }
      #btnplay { position: absolute; left: 8px; width: 16px; height: 16px; background: #bbb; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
      #btnpause { position: absolute; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #bbb; display: none; }
      #dur, #cur { font: normal 14px sans-serif; bottom: 14px; color: #eee; }
      #dur:hover, #cur:hover, #lrc:hover { color: tomato; }
      #cur { left: 5px ; }
      #dur { right: 5px; }
</style>

<div id="papa">
<div id="mplayer">
      <span id="lrc">lrc歌词</span>
      <span id="prog"></span>
      <span id="btnmain">
                <span id="btnplay"></span>
                <span id="btnpause"></span>
      </span>
      <span id="dur">00:00</span>
      <span id="cur">00:00</span>
</div>
</div>

<script>
let lrcAr = [
        ['0.00','掀起你的盖头来 '],
        ['6.77','- 梦之旅合唱组合'],
        ['9.97','掀起了你的盖头来'],
        ['13.48','让我看你的眉毛'],
        ['16.79','你的眉毛细又长呀'],
        ['20.43','好像那树梢的弯月亮'],
        ['23.69','你的眉毛细又长呀'],
        ['27.28','好像那树上的弯月亮'],
        ['30.55','掀起了你的盖头来'],
        ['34.09','让我看你的眼睛'],
        ['37.44','你的眼睛明又亮呀'],
        ['40.94','好像那秋波一班样'],
        ['44.25','你的眼睛明又亮呀'],
        ['47.89','好像那秋波一班样'],
        ['51.25','谢谢黑黑教程分享'],
        ['58.09','掀起了你的盖头来'],
        ['61.36','让我看你的脸儿'],
        ['64.46','看看你的脸儿红又圆呀'],
        ['68.23','好像那苹果到秋天'],
        ['71.70','你的脸儿红又圆呀'],
        ['75.24','好像那苹果到秋天'],
        ['78.52','LRC编辑：小辣椒'],
        ['99.37','掀起了你的盖头来'],
        ['102.51','让我看你的眉毛'],
        ['106.04','你的眉毛细又长呀'],
        ['109.56','好像那树梢弯月亮'],
        ['112.83','你的眉毛细又长呀'],
        ['116.39','好像那树梢的弯月亮'],
        ['119.74','掀起了你的盖头来'],
        ['123.14','让我看你的眼睛'],
        ['126.51','你的眼睛明又亮呀'],
        ['130.06','好像那秋波一班样'],
        ['133.37','你的眼睛明又亮呀'],
        ['136.96','好像那秋波一班样'],
        ['140.32','梦之旅合唱组合演唱'],
        ['147.09','掀起了你的盖头来'],
        ['150.57','让我看你的脸儿'],
        ['154.00','看看你的脸儿红又圆呀'],
        ['157.42','好像那苹果到秋天'],
        ['160.82','你的脸儿红又圆呀'],
        ['164.27','好像那苹果到秋天'],
        ['167.54',' 梦之旅合唱组合演唱'],
        ['171.23','掀起了你的盖头来'],
        ['177.60','让我看你的脸儿'],
        ['181.69','掀起了你的盖头来'],
        ['188.28','让我看你的脸儿'],
        ['191.76','看看你的脸儿红又圆呀'],
        ['195.23','好像那苹果到秋天'],
        ['198.54','你的脸儿红又圆呀'],
        ['202.04','好像那苹果到秋天'],
        ['205.66','掀起了你的盖头来'],
        ['208.91','让我看你的脸儿'],
        ['212.26','看看你的脸儿红又圆呀'],
        ['215.70','好像那苹果到秋天'],
        ['219.12','你的脸儿红又圆呀'],
        ['222.60','好像那苹果到秋天'],
        ['226.56','​​​​谢谢欣赏']
      ['276.56','​​​​谢谢欣赏']
];
let aud = new Audio();

aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/01/qqndgtl.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
      prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
      dur.innerText = toMin(aud.duration);
      cur.innerText = toMin(aud.currentTime);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.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>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-9-1 22:00

@马黑黑

昨天的今天补上{:4_189:}

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

就是做歌词同步花一点时间，其他套用就简单了

加林森 发表于 2022-9-1 22:04

哈萨克名歌。好听。制作漂亮！赞！{:4_199:}

小辣椒 发表于 2022-9-1 22:07

加林森 发表于 2022-9-1 22:04
哈萨克名歌。好听。制作漂亮！赞！

队长晚上好，这个是昨天的，今天晚上才上传音乐，昨天来不及了

加林森 发表于 2022-9-1 22:08

怎么歌词最后有代码啊？

小辣椒 发表于 2022-9-1 22:10

加林森 发表于 2022-9-1 22:08
怎么歌词最后有代码啊？

哈哈~~~是吗，我去看看，说实话我做好都没有看一遍

加林森 发表于 2022-9-1 22:10

小辣椒 发表于 2022-9-1 22:07
队长晚上好，这个是昨天的，今天晚上才上传音乐，昨天来不及了

嗯嗯。你歌词最后有问题。

加林森 发表于 2022-9-1 22:11

小辣椒 发表于 2022-9-1 22:10
哈哈~~~是吗，我去看看，说实话我做好都没有看一遍

嗯嗯。

小辣椒 发表于 2022-9-1 22:17

加林森 发表于 2022-9-1 22:10
嗯嗯。你歌词最后有问题。

好了，队长你再去看看

小辣椒 发表于 2022-9-1 22:18

加林森 发表于 2022-9-1 22:11
嗯嗯。

队长就进度条拉最后看看就可以了，不用从头听

加林森 发表于 2022-9-1 22:20

小辣椒 发表于 2022-9-1 22:17
好了，队长你再去看看

现在对了。

加林森 发表于 2022-9-1 22:21

小辣椒 发表于 2022-9-1 22:18
队长就进度条拉最后看看就可以了，不用从头听

知道的。

小辣椒 发表于 2022-9-1 22:25

加林森 发表于 2022-9-1 22:21
知道的。

太急做就会出错

加林森 发表于 2022-9-1 22:26

小辣椒 发表于 2022-9-1 22:25
太急做就会出错

是的。

小辣椒 发表于 2022-9-1 22:27

加林森 发表于 2022-9-1 22:26
是的。

队长我准备下了，你也是早点下。晚安~~~

红影 发表于 2022-9-1 22:29

这个也漂亮，亲爱的一下子做了这么多呢{:4_187:}

加林森 发表于 2022-9-1 22:29

小辣椒 发表于 2022-9-1 22:27
队长我准备下了，你也是早点下。晚安~~~

好的。晚安。88！

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

非常漂亮

加林森 发表于 2022-9-1 22:39

背景漂亮，小辣椒就是厉害！
页: [1] 2
查看完整版本: 掀起你的盖头来（黑黑的教程分享套用一个）