加林森 发表于 2022-6-17 13:23

《西湖春》- 凤飞飞（学习老黑的‘下雪时分’背景制作）


<style>
/* 帖子外层 */
.outer {
      left: -214px;
      width: 1024px;
      height: 600px;
      background:#ccc url('https://pic.imgdb.cn/item/62ac04560947543129cc7834.jpg') no-repeat; /* 帖子背景 */ linear-gradient(to right top,black,#eee);
      overflow: hidden;
      position: relative;
}
/* 视频背景 */
.vid {
      position: absolute;
      top: -50px;
      width: 100%;
      height: 650px;
      object-fit: cover;
}
/* 频谱+进度外层 */
.mama {
      position: absolute;
      left: 20px;
      bottom: 40px;
      width: fit-content;
      height: fit-content;
      cursor: pointer;
      border-radius: 0 100%;
      background: linear-gradient(transparent,green);
}
/* 频谱外层 */
.wrap {
      width: 90px;
      height: 60px;
      box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000);
      -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000);
      position: relative;
}
/* 进度显示器 */
.mama meter {
      width: 90px;
      position: relative;
}
/* 频谱 */
.wrap span {
      width: 6px;
      height: 60px;
      bottom: -8px;
      display: inline-block;
      position: absolute;
}
/* 频谱伪元素 顶帽 */
.wrap span::before {
      position: absolute;
      content: '';
      width: inherit;
      height: 3px;
      background: #eee;
      top: -3px;
      animation: up 1s ease-in infinite;
}
/* 歌词同步显示框 */
.lrcbox {
      transform: translate(420px, 240px);
      font: bold 1.2em / 2em sans-serif;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
      background: black linear-gradient(transparent,tan);
      border-radius: 100% 0;
      position: absolute;
}
/* 频谱顶帽动画 */
@keyframes up {
      from { top: -6px; }
      to { top: -16px; }
}
</style>

<div class="outer">
      <video class="vid" src="https://img.tukuppt.com/ad_preview/00/06/38/5c98ee3a426c1.jpg!/fw/780" autoplay="autoplay" loop="loop" muted="muted"></video>
      <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
      </div>
      <div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/16/30c4cdb0137a24b3618270afcc99a86c.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'),
      wrap = document.querySelector('.wrap'),
      lrcbox = document.querySelector('.lrcbox'),
      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;

let lrcAr = [
      ['2.18','西湖春 - 凤飞飞'],
        ['4.46','词/曲：李鹏远'],
        ['41.81','春风吹 春燕归'],
        ['46.62','桃杏 多娇媚'],
        ['52.62','侬把舵来 郎摇桨'],
        ['58.11','划破 西湖水'],
        ['63.94','春意浓 春心暖'],
        ['69.02','无力 柳叶垂'],
        ['74.56','眼儿相望 心相印'],
        ['80.27','侬为郎 陶醉'],
        ['86.13','春意浓 春心暖'],
        ['91.25','无力 柳叶垂'],
        ['96.73','眼儿相望 心相印'],
        ['102.95','侬为郎 陶醉'],
        ['130.97','春风吹 春燕归'],
        ['135.46','高山 山青翠'],
        ['141.40','湖上鸳鸯 花间蝶'],
        ['146.59','双栖 又双飞'],
        ['152.47','情切切 意绵绵'],
        ['157.78','半言 痴相对'],
        ['163.53','但闻远处 歌声传'],
        ['168.83','春日 最陶醉'],
        ['174.47','情切切 意绵绵'],
        ['179.88','半言 痴相对'],
        ['185.31','但闻远处 歌声传'],
        ['190.24','春日 最 陶 醉']
];

Array.from({length: 10}).forEach((ele,key) => {
      ele = document.createElement('span');
      ele.className = 'sskey';
      ele.style.left = key * 6 + key * 3 + 'px';
      ele.style.height = num(10,60) + 'px';
      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(10, 60) + 'px';
      })
      meter.value = prog(aud.duration, aud.currentTime);
      let tt = aud.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr){
                        lrcbox.innerHTML = lrcAr;
                }
      }
})

</script>

加林森 发表于 2022-6-17 13:23

本帖最后由 加林森 于 2022-6-18 22:59 编辑

@马黑黑@小辣椒

走过岁月 发表于 2022-6-17 13:41

这个好，能看又能听，这个应该不是网易音乐的

加林森 发表于 2022-6-17 13:45

走过岁月 发表于 2022-6-17 13:41
这个好，能看又能听，这个应该不是网易音乐的

岁月下午好。这个是酷美网站的的音乐。

走过岁月 发表于 2022-6-17 13:47

加林森 发表于 2022-6-17 13:45
岁月下午好。这个是酷美网站的的音乐。

不错，能听音乐出来快

加林森 发表于 2022-6-17 13:49

走过岁月 发表于 2022-6-17 13:47
不错，能听音乐出来快

就是，音乐一点就出来。

走过岁月 发表于 2022-6-17 13:50

加林森 发表于 2022-6-17 13:49
就是，音乐一点就出来。

是的，很快

加林森 发表于 2022-6-17 13:52

走过岁月 发表于 2022-6-17 13:50
是的，很快

你有这个酷美网站的地址吗？没有我发给你。

走过岁月 发表于 2022-6-17 13:55

加林森 发表于 2022-6-17 13:52
你有这个酷美网站的地址吗？没有我发给你。

谢谢加林森，上传的地方我有了

加林森 发表于 2022-6-17 14:00

走过岁月 发表于 2022-6-17 13:55
谢谢加林森，上传的地方我有了

好的好的。岁月不客气的啊。

梦油 发表于 2022-6-17 14:03

那缥缈的云雾，给美丽的西湖增添了几分朦胧美。

加林森 发表于 2022-6-17 14:05

梦油 发表于 2022-6-17 14:03
那缥缈的云雾，给美丽的西湖增添了几分朦胧美。

是的。就是这种感觉。老梦真行。{:4_190:}

红影 发表于 2022-6-17 14:40

队长现在的歌词同步做得很准确了，很赞{:4_187:}

加林森 发表于 2022-6-17 15:10

红影 发表于 2022-6-17 14:40
队长现在的歌词同步做得很准确了，很赞

谢谢红影支持！下午好！{:4_204:}

梦油 发表于 2022-6-17 15:13

加林森 发表于 2022-6-17 14:05
是的。就是这种感觉。老梦真行。

老林有着很好的艺术细胞啊

加林森 发表于 2022-6-17 15:20

梦油 发表于 2022-6-17 15:13
老林有着很好的艺术细胞啊

是的。三岁就喜欢画美术，听歌。。。。。

梦油 发表于 2022-6-17 16:19

加林森 发表于 2022-6-17 15:20
是的。三岁就喜欢画美术，听歌。。。。。

这也是天赋啊！

加林森 发表于 2022-6-17 17:05

梦油 发表于 2022-6-17 16:19
这也是天赋啊！

应该算是吧。

梦油 发表于 2022-6-17 17:29

加林森 发表于 2022-6-17 17:05
应该算是吧。

希望经常看到你的精彩作品。

加林森 发表于 2022-6-17 18:08

梦油 发表于 2022-6-17 17:29
希望经常看到你的精彩作品。

我现在正在制作父亲节快乐的帖子，做好了就发出来给大家欣赏。
页: [1] 2
查看完整版本: 《西湖春》- 凤飞飞（学习老黑的‘下雪时分’背景制作）