《向往神鹰》- 亚东

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

本帖最后由加林森于 2022-6-16 18:33 编辑 <br /><br /><style>
/*帖子外层盒子*/
.mama { position: relative; margin: auto; width: 1000px; height: 600px; background: transparent linear-gradient(to right bottom, darkgreen, snow); box-shadow: 2px 2px 2px #444; }
.mama { left: -242px; width: 1080px; height: 664px; background: lightgreen url('https://pic.imgdb.cn/item/62a9ac84094754312923b76d.jpg') no-repeat center / cover; position: relative; box-shadow: 2px 2px 2px #333; }
/*播放器外层盒子*/
.lrcWrap { position: absolute; top: 10px; left: 10px; 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:310px; 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: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
/*歌词区域限制层*/
.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: gray; 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>
<div style="position: absolute; left:320px; top: 1000px; width:75px; height: 20px; ">
            <img alt="" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif"/></div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=178196.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 = 0; //误差修正
//lrc歌词数组
let lrcAr = [
   ['3.73','向往神鹰 - 亚东'],
['5.28','作词 : 扎西达娃'],
['6.96','作曲 : 美郎多吉'],
['43.49','在每一天太阳'],
['55.80','升起的地方'],
['60.17','银色的神鹰'],
['64.10','啊来到了古老村庄'],
['68.09','雪域之外的人们'],
['73.45','来自四面八方'],
['78.34','仙女般的空中小姐翩翩而降'],
['85.63','祖先们一生也没有走完的路'],
['94.08','啊'],
['97.25','神鹰啊'],
['101.01','神鹰啊'],
['106.17','转眼就改变了大地的模样'],
['112.98','啊'],
['114.89','模样'],
['117.42','哦'],
['121.35','密密茫茫的山'],
['125.32','哦'],
['129.87','遥遥远远的路'],
['134.18','噢'],
['138.16','是谁在天地间自由的飞翔'],
['143.60','啊'],
['146.68','神鹰啊'],
['150.56','你把我的思念带向了远方'],
['158.52','啊'],
['160.35','远方'],
['193.93','lrc制作：加林森'],
['196.30','心儿伴随的神鹰'],
['203.79','飞向那远方'],
['205.90','想看看城市的灯火'],
['209.12','和蓝色的海洋'],
['213.33','当梦想成真'],
['218.49','走进宽敞的机舱'],
['223.16','俯看天外世界'],
['227.40','止不住热泪盈眶'],
['231.50','父辈们朝圣的脚步'],
['235.86','还在回响'],
['239.24','啊'],
['241.53','神鹰啊'],
['244.48','神鹰啊'],
['250.24','我已经告别昨天'],
['254.48','找到了生命的亮光'],
['262.30','哦'],
['266.56','摇摇滚滚的风'],
['270.79','哦'],
['274.66','飘飘洒洒的雨'],
['278.38','哦'],
['283.64','蓝天的儿子又回到了故乡'],
['287.76','啊'],
['292.09','神鹰啊你使我实现了童年的梦想啊梦想'],
   ['298.49','lrc制作：加林森']
];

//将歌词写入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 = 'gray';
                           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 = 'gray';
   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>

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

@马黑黑 @樵歌

马黑黑 发表于 2022-6-15 20:25

神鹰不飞了？

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

马黑黑发表于 2022-6-15 20:25
神鹰不飞了？

飞不起来了。

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

马黑黑发表于 2022-6-15 20:25
神鹰不飞了？

害怕破坏画面。

马黑黑 发表于 2022-6-15 20:32

加林森发表于 2022-6-15 20:31
飞不起来了。

发胖了吗

马黑黑 发表于 2022-6-15 20:33

加林森发表于 2022-6-15 20:32
害怕破坏画面。

不可能

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

马黑黑发表于 2022-6-15 20:32
发胖了吗

羊吃多了。{:4_170:}

梦油发表于 2022-6-15 20:36

雪山绵绵长长,仿佛还流溢着袅袅的颤音。

红影发表于 2022-6-15 20:38

歌好听，制作漂亮，欣赏队长好帖{:4_204:}

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

马黑黑发表于 2022-6-15 20:33
不可能

应该可以继续飞翔的。我对代码还没有控制好。

马黑黑 发表于 2022-6-15 20:39

加林森发表于 2022-6-15 20:38
应该可以继续飞翔的。我对代码还没有控制好。

代码量多了容易看混

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

梦油发表于 2022-6-15 20:36
雪山绵绵长长,仿佛还流溢着袅袅的颤音。

老梦晚上好！

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

红影发表于 2022-6-15 20:38
歌好听，制作漂亮，欣赏队长好帖

谢谢红影。{:4_204:}

马黑黑 发表于 2022-6-15 20:40

加林森发表于 2022-6-15 20:36
羊吃多了。

但吃无妨

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

马黑黑发表于 2022-6-15 20:39
代码量多了容易看混

就是。有点晕了。

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

马黑黑发表于 2022-6-15 20:40
但吃无妨

那就好啊。

沧海一声啸 发表于 2022-6-15 20:51

制作漂亮，赞

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

沧海一声啸发表于 2022-6-15 20:51
制作漂亮，赞

谢谢沧海支持！欢迎光临！{:4_190:}

沧海一声啸 发表于 2022-6-15 21:01

加林森发表于 2022-6-15 20:52
谢谢沧海支持！欢迎光临！

队长客气了，晚上好

页: [1] 2 3 4

花潮论坛's Archiver

《向往神鹰》- 亚东