加林森 发表于 2022-6-16 21:12

《美丽的佩枯措》- 泽旺多吉（学习老黑超简单歌词同步模板）

<style>
/* 帖子外层 */
.outer {
      left: -214px; /* 水平定位*/
      width: 1024px; /* 帖子宽度 */
      height: 682px; /* 帖子高度 */
      background: #ccc url('https://pic.imgdb.cn/item/62aa9a3009475431296581ff.jpg') no-repeat; /* 帖子背景 */
      box-shadow: 0 4px 18px #000; /* 盒子阴影*/
      position: relative; /* 重要 帖子定位依赖 */
}

/* 歌词同步显示框 */
.lrcbox {
      transform: translate(420px, 240px); /* 定位 */
      font: bold 1.2em sans-serif; /* 文本 */
      color: #fff; /* 字体颜色 */
      text-shadow: 1px 1px 2px #000; /* 文本阴影 */
      background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
      border-radius: 100% 0; /* 盒子边框 */
      cursor: pointer; /* 手型指针 */
      position: absolute; /* 关键 歌词显示框依赖于此 */
}
</style>

<div class="outer">
      <div class="lrcbox">
                <p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
      </div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90857.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
      geci = document.querySelector('#geci'),
      aud = document.querySelector('#aud'),
      meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr = [
       ['3.15','美丽的佩枯措 - 泽旺多吉'],
        ['5.72','词：任庆士'],
        ['7.74','曲：饶荣发'],
        ['38.86','天上的西藏有条长长的大河'],
        ['49.43','迷恋那佩枯措湛蓝的秋波'],
        ['57.47','湖岸上雕塑着远古的诉说'],
        ['66.08','转湖人吟诵悠扬的长歌'],
        ['81.29','心中的西藏有座高高的雪山'],
        ['91.54','佩枯措映照着它的巍峨'],
        ['99.70','湖面上鸥鸟展翅飞翔'],
        ['108.12','牧羊姑娘高唱嘹亮的情歌'],
        ['120.57','呀啦嗦美丽的佩枯措'],
        ['128.85','呀啦嗦美丽的佩枯措'],
        ['137.27','多少人从你的身旁走过'],
        ['145.22','都带走啊都带走你圣洁的嘱托'],
        ['189.97','心中的西藏有座高高的雪山'],
        ['200.23','佩枯措映照着它的巍峨'],
        ['208.81','湖面上鸥鸟展翅飞翔'],
        ['216.99','牧羊姑娘高唱嘹亮的情歌'],
        ['228.03','呀啦嗦美丽的佩枯措'],
        ['235.62','呀啦嗦美丽的佩枯措'],
        ['244.34','多少人从你的身旁走过'],
        ['252.69','都带走啊都带走你圣洁的嘱托'],
        ['261.55','呀啦嗦呀啦嗦'],
        ['272.03','美丽的佩枯措佩枯措']
];
//歌词框单击事件
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
      meter.value = prog(aud.duration, aud.currentTime);
      let tt = aud.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr){
                        geci.innerHTML = lrcAr;
                }
      }
})
</script>

加林森 发表于 2022-6-16 21:13

@马黑黑

小辣椒 发表于 2022-6-16 21:20

队长也是速度的{:4_187:}

马黑黑 发表于 2022-6-16 21:23

队长也是手快

马黑黑 发表于 2022-6-16 21:23

制作很精美

小辣椒 发表于 2022-6-16 21:26

队长现在做的又快又漂亮{:4_178:}

加林森 发表于 2022-6-16 21:31

小辣椒 发表于 2022-6-16 21:20
队长也是速度的

这么好的我得赶紧学习一个才行的。{:4_189:}

加林森 发表于 2022-6-16 21:32

马黑黑 发表于 2022-6-16 21:23
队长也是手快

必须的。赶紧学习嘛。

加林森 发表于 2022-6-16 21:32

马黑黑 发表于 2022-6-16 21:23
制作很精美

谢谢老黑！走一个！{:4_191:}

马黑黑 发表于 2022-6-16 21:36

加林森 发表于 2022-6-16 21:32
谢谢老黑！走一个！

{:4_191:}

加林森 发表于 2022-6-16 21:36

小辣椒 发表于 2022-6-16 21:26
队长现在做的又快又漂亮

谢谢小辣椒支持！{:4_204:}

醉美水芙蓉 发表于 2022-6-16 21:37

加林森 发表于 2022-6-16 21:37

马黑黑 发表于 2022-6-16 21:36


你慢慢喝。我喝茶！

马黑黑 发表于 2022-6-16 21:38

加林森 发表于 2022-6-16 21:37
你慢慢喝。我喝茶！

{:4_180:}

加林森 发表于 2022-6-16 21:42

马黑黑 发表于 2022-6-16 21:38


谢茶！

加林森 发表于 2022-6-16 21:43

醉美水芙蓉 发表于 2022-6-16 21:37
欣赏队长佳作！

谢谢水芙蓉！{:4_190:}

红影 发表于 2022-6-16 21:43

这个制作很漂亮，队长速度的{:4_187:}

加林森 发表于 2022-6-16 21:49

红影 发表于 2022-6-16 21:43
这个制作很漂亮，队长速度的

嗯嗯。紧跟老黑的步伐学习的。

樵歌 发表于 2022-6-17 06:58

快手，精美，好听，喜欢{:4_190:}

上海朝阳 发表于 2022-6-17 08:37

你们成了三驾马车齐进，好听的一首高原藏歌
页: [1] 2
查看完整版本: 《美丽的佩枯措》- 泽旺多吉（学习老黑超简单歌词同步模板）