论坛 › 欢乐水吧 › 可爱的一朵玫瑰花 TO：队长

小辣椒 发表于 2022-6-12 21:18

可爱的一朵玫瑰花 TO：队长

<style>
/*帖子外层盒子*/
.mama { position: relative; margin: auto; width: 1280px; left: -340px;height: 700px; top: 150px;background: #ccc url('https://pic.imgdb.cn/item/62a5e5a809475431296ff904.jpg') no-repeat; box-shadow: 2px 2px 2px #444; }
/*播放器外层盒子*/
.lrcWrap { position: absolute; top: 250px; left: 410px; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #eee; display: flex; flex-direction: column;align-items: center; }
/*播放控制外层盒子*/
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
/*播放按钮*/
.playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
/*播放按钮鼠标滑过*/
.playbtn:hover { background: red; }
/*暂停按钮*/
.pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
/*暂停按钮鼠标滑过*/
.pausebtn:hover { border-color: transparent red; }
/*进度条*/
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
/*进度滑块*/
.slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
/*歌词面板外层盒子*/
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #356a83; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #666; }
/*歌词区域限制层*/
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
/*歌词ul标签*/
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
/*歌词li标签*/
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: Pink; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>

<div class="mama">
      <!-- 播放器开始 -->
      <div class="lrcWrap">
                <p>帖赠：加林森</p>
                <div class="lrcBox"><ul class="lrcUl"></ul></div>
                <div class="meterWrap">
                        <div class="playbtn"></div>
                        <div class="pausebtn"></div>
                        <div class="meter"><span class="slider"></span></div>
                </div>
      <!-- 播放器结束 -->
      
      </div>
</div>
<audio class="aud" src="https://s1.ananas.chaoxing.com/audio/84/86/a3/9bb6912842a7cefb67da780916b58ff8/audio.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
//N多盒子句柄
let aud = document.querySelector('.aud'),
      playbtn = document.querySelector('.playbtn'),
      pausebtn = document.querySelector('.pausebtn'),
      meter = document.querySelector('.meter'),
      slider = document.querySelector('.slider'),
      lrcUl = document.querySelector('.lrcUl');
let slip = 5; //误差修正
//lrc歌词数组

let lrcAr = [
        ['0.22','可爱的一朵玫瑰花'],
        ['9.78','（哈萨克族民歌）'],
        ['21.40','词曲：王洛宾'],
        ['26.49','可爱的一朵玫瑰花赛帝玛丽亚'],
        ['33.57','可爱的一朵玫瑰花赛帝玛丽亚'],
        ['40.98','那天我在山上打猎骑着马'],
        ['45.12','正当你在山下歌唱婉转如云霞'],
        ['49.08','你那歌声迷了我我从山上滚下'],
        ['55.02','哎呀呀。。。'],
        ['56.09','你的歌声好像玫瑰花'],
        ['62.84','谢谢黑黑教程分享'],
        ['73.08','可爱的一朵玫瑰花赛帝玛丽亚'],
        ['80.19','可爱的一朵玫瑰花赛帝玛丽亚'],
        ['87.76','那天我在山上打猎骑着马'],
        ['91.39','正当你在山下歌唱婉转如云霞'],
        ['96.65','你那歌声迷了我我从山上滚下'],
        ['101.96','哎呀呀。。。'],
        ['103.22','你的歌声好像玫瑰花'],
        ['108.76','可爱的一朵玫瑰花赛帝玛丽亚'],
        ['115.95','可爱的一朵玫瑰花赛帝玛丽亚'],
        ['122.65','那天我在山上打猎骑着马'],
        ['127.18','正当你在山下歌唱婉转如云霞'],
        ['132.96','你那歌声迷了我我从山上滚下'],
        ['137.14','哎呀呀。。。'],
        ['138.54','你的歌声好像玫瑰花'],
        ['142.80','LRC编辑：小辣椒'],
        ['169.38','那天我在山上打猎骑着马'],
        ['174.08','正当你在山下歌唱婉转如云霞'],
        ['178.06','你那歌声迷了我我从山上滚下'],
        ['184.10','哎呀呀。。。'],
        ['185.35','你的歌声好像玫瑰花'],
        ['190.05','TO：队长'],
        ['203.85','那天我在山上打猎骑着马'],
        ['208.85','正当你在山下歌唱婉转如云霞'],
        ['212.50','你那歌声迷了我我从山上滚下'],
        ['217.56','哎呀呀。。。'],
        ['220.32','你的歌声好像玫瑰花'],
        ['227.82','谢谢欣赏']
];
//将歌词写入li标签
for(j=0; j<lrcAr.length; j++){
      lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr + '</li>';
}
//监听进度
aud.addEventListener('timeupdate', () => {
      let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
      slider.style.transform = 'translate(' + prog + 'px)';
      let tt = aud.currentTime;
      for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr - slip){
                        if(j > 0){
                              let idxLast = lrcAr;
                              document.getElementById('li' + idxLast).style.color = 'Pink';
                              lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
                        }
                        let idx = lrcAr;
                        document.getElementById('li' + idx).style.color = 'ghostwhite';
                }
      }
})
//监听结束事件
aud.addEventListener('ended', () => {
      document.getElementById("li" + lrcAr).style.color = 'Pink';
      lrcUl.style.top = 0;
})
//监听暂停与播放
aud.addEventListener('pause', () => btnstate(1));
aud.addEventListener('play',() => btnstate(0));
//进度条点击事件
meter.onclick = (e) => {
      e = e || event;
      aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
//暂停与播放按钮点击事件
pausebtn.onclick = () => { aud.pause(); btnstate(1); }
playbtn.onclick = () => { aud.play(); btnstate(0); }
//获取进度条偏移总量
let offset = (obj,direction) => {
      let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
      let realNum = obj;
      let positionParent = obj.offsetParent;
      while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
      }
      return realNum;
}
//按钮状态
let btnstate = (paused) => {
      paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
}
//初始化按钮状态
aud.paused ? btnstate(1) : btnstate(0);

</script>
<br><br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-6-12 21:18

@加林森
队长，不急，这个歌词同步是有点闹心的，不用急，一步步来，今天我这个也是有几句不行的，一起学习。不要放弃

小辣椒 发表于 2022-6-12 21:21

@马黑黑

黑黑说我不接受你的东东，小辣椒偷懒惯的{:4_170:}

今天这个我捣鼓了许多时间，居然小鸟都没有加进去，加了播放器按钮不灵了{:4_201:}

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

小辣椒 发表于 2022-6-12 21:18
@加林森
队长，不急，这个歌词同步是有点闹心的，不用急，一步步来，今天我这个也是有几句不行的，一起学 ...

来了来了。很漂亮的制作。我喜欢的歌曲。谢谢小辣椒！{:4_204:}{:4_199:}

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

小辣椒，这首歌曲是冬雨唱的吗？唱功了得哦。

马黑黑 发表于 2022-6-12 21:29

小辣椒 发表于 2022-6-12 21:21
@马黑黑

黑黑说我不接受你的东东，小辣椒偷懒惯的


这个景象太美丽了，小鸟不愿意来打扰

小辣椒 发表于 2022-6-12 21:32

加林森 发表于 2022-6-12 21:28
小辣椒，这首歌曲是冬雨唱的吗？唱功了得哦。

队长这个冬雨曾经翻唱过，但这个是送你的{:4_179:}

小辣椒 发表于 2022-6-12 21:33

马黑黑 发表于 2022-6-12 21:29
这个景象太美丽了，小鸟不愿意来打扰

好像是呢，主要今天我不能太迟就这样发了，以后再继续要加小鸟的{:4_173:}

马黑黑 发表于 2022-6-12 21:34

小辣椒 发表于 2022-6-12 21:33
好像是呢，主要今天我不能太迟就这样发了，以后再继续要加小鸟的

加之小鸟是容易的，主要看它愿不愿意

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

小辣椒 发表于 2022-6-12 21:32
队长这个冬雨曾经翻唱过，但这个是送你的

真得好好感谢你了。{:4_179:}

小辣椒 发表于 2022-6-12 21:40

马黑黑 发表于 2022-6-12 21:34
加之小鸟是容易的，主要看它愿不愿意

小鸟可能怕我的{:4_170:}

小辣椒 发表于 2022-6-12 21:41

加林森 发表于 2022-6-12 21:38
真得好好感谢你了。

不用谢，队长最辛苦了，以后别每天很迟，这个歌词同步知道怎么做了，基本就是学会了，

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

小辣椒 发表于 2022-6-12 21:41
不用谢，队长最辛苦了，以后别每天很迟，这个歌词同步知道怎么做了，基本就是学会了，

嗯嗯，现在明白了。明天再来制作了。谢谢你！{:4_204:}

小辣椒 发表于 2022-6-12 21:45

加林森 发表于 2022-6-12 21:43
嗯嗯，现在明白了。明天再来制作了。谢谢你！

不谢，队长我回几个帖就下了

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

小辣椒 发表于 2022-6-12 21:45
不谢，队长我回几个帖就下了

好的。我也去洗漱了。

马黑黑 发表于 2022-6-12 21:48

小辣椒 发表于 2022-6-12 21:40
小鸟可能怕我的

小鸟都怕人的

小辣椒 发表于 2022-6-12 21:55

马黑黑 发表于 2022-6-12 21:48
小鸟都怕人的

特别怕小辣椒{:4_170:}

黑黑，我下了，谢谢黑黑的教程分享{:4_179:}

红影 发表于 2022-6-12 21:57

这图图真漂亮。亲爱的歌词颜色弄得很漂亮，很符合这首歌曲呢{:4_187:}

马黑黑 发表于 2022-6-12 21:57

小辣椒 发表于 2022-6-12 21:55
特别怕小辣椒

黑黑，我下了，谢谢黑黑的教程分享

晚安，88

梦油 发表于 2022-6-13 11:29

小辣椒朋友早晨好！这首歌很受人欢迎，也是我喜欢的歌曲之一，谢谢你。

查看完整版本: 可爱的一朵玫瑰花 TO：队长