相思路口

醉美水芙蓉 发表于 2022-6-13 22:13

本帖最后由醉美水芙蓉于 2022-6-13 22:16 编辑 <br /><br /> <div class="t_fsz">
<table cellspacing="0" cellpadding="0"> <style>
/*帖子外层盒子*/
.mama { position: relative; margin: auto; width: 1000px; height: 667px; background: transparent linear-gradient(to right bottom, darkgreen, snow); box-shadow: 2px 2px 2px #444; }
.mama { left: -202px; width: 1000px; height: 600px; background: lightgreen url('https://s1.ax1x.com/2022/06/13/XfFwVg.jpg') no-repeat center / cover; position: relative; box-shadow: 2px 2px 2px #333; }
/*播放器外层盒子*/
.lrcWrap { position: absolute; top: 380px; 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>
<audio class="aud" src="https://www.qqmc.com/up/kwlink.php?id=223431796&.mp3" autoplay="autoplay" loop="loop"></audio>
<div style="position: absolute; left:420px; top: 800px; width:75px; height: 20px; ">
            <img alt="" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif"/></div>
</div>
<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 =[
['4.10','相思路口（水兵舞） - 杨美华'],
['7.09','词：彭方钦'],
['8.50','曲：杨美华'],
['9.98','OP：海酝文化'],
['12.21','LRC编辑：醉美水芙蓉'],
['29.31','秋风起落叶黄'],
['35.10','花开花落终茫茫'],
['40.88','芦花飘零随风荡'],
['46.73','鸿雁何处往鸣为谁伤'],
['52.59','爱缠绵梦里藏'],
['58.33','雨下共伞过小巷'],
['64.22','情深似海成过往'],
['69.96','多少憧憬化为风月一场'],
['75.90','相思路口泪两行'],
['81.65','默默无语无力诉衷肠'],
['87.35','朝霞般的爱恋落幕已夕阳'],
['92.92','借托鸿雁把我情怀唱'],
['99.17','岁月流年慢慢淌'],
['104.98','让我找回爱的老地方'],
['110.91','趟过一道道沟来一道道梁'],
['116.60','愿爱的路上从此不悲凉'],
['145.85','爱缠绵梦里藏'],
['151.56','雨下共伞过小巷'],
['157.37','情深似海成过往'],
['163.22','多少憧憬化为风月一场'],
['169.13','相思路口泪两行'],
['174.82','默默无语无力诉衷肠'],
['180.72','朝霞般的爱恋落幕已夕阳'],
['186.58','借托鸿雁把我情怀唱'],
['192.35','岁月流年慢慢淌'],
['198.06','让我找回爱的老地方'],
['204.08','趟过一道道沟来一道道梁'],
['209.78','愿爱的路上从此不悲凉'],
['215.59','岁月流年慢慢淌'],
['221.41','让我找回爱的老地方'],
['227.20','趟过一道道沟来一道道梁'],
['233.06','愿爱的路上从此不悲凉'],
['239.02','愿爱的路上从此不悲凉'],
['255.03','谢谢欣赏！']
];

//将歌词写入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>
</td></tr></table>

加林森 发表于 2022-6-13 22:20

水芙蓉速度好快，一下就制作出来了啊。我的蝴蝶跑你那里去了。挺好玩的。

醉美水芙蓉 发表于 2022-6-13 22:28

加林森发表于 2022-6-13 22:20
水芙蓉速度好快，一下就制作出来了啊。我的蝴蝶跑你那里去了。挺好玩的。

向队长学习呢！

加林森 发表于 2022-6-13 22:30

醉美水芙蓉发表于 2022-6-13 22:28
向队长学习呢！

挺好的。我得向你学习呢。

加林森 发表于 2022-6-13 22:32

蝴蝶不要在脸上，调调吧。

醉美水芙蓉 发表于 2022-6-13 22:32

加林森发表于 2022-6-13 22:30
挺好的。我得向你学习呢。

本来想换个柳条的，无奈找不到上传地方，图床不支持！

加林森 发表于 2022-6-13 22:34

醉美水芙蓉发表于 2022-6-13 22:32
本来想换个柳条的，无奈找不到上传地方，图床不支持！

哦。你试试在本论坛上传呢！

马黑黑 发表于 2022-6-13 22:44

去路口看看镁铝{:5_152:}

青青子衿 发表于 2022-6-14 01:22

快乐女子。。。。。每天都分享好歌~！

醉美水芙蓉 发表于 2022-6-14 06:42

加林森发表于 2022-6-13 22:34
哦。你试试在本论坛上传呢！

本论坛不知道怎么上传？

醉美水芙蓉 发表于 2022-6-14 06:43

青青子衿发表于 2022-6-14 01:22
快乐女子。。。。。每天都分享好歌~！

谢谢朋友支持！

樵歌发表于 2022-6-14 07:23

歌声柔美，人儿漂亮，蝴蝶美丽。{:4_174:}

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

醉美水芙蓉发表于 2022-6-14 06:42
本论坛不知道怎么上传？

你自己开个帖，说明是上传专用就行了。

梦油发表于 2022-6-14 10:38

欣赏佳作，问候芙蓉。

醉美水芙蓉 发表于 2022-6-14 11:33

樵歌发表于 2022-6-14 07:23
歌声柔美，人儿漂亮，蝴蝶美丽。

问候樵歌中午好！

醉美水芙蓉 发表于 2022-6-14 11:34

加林森发表于 2022-6-14 08:17
你自己开个帖，说明是上传专用就行了。

谢谢队长告知！

醉美水芙蓉 发表于 2022-6-14 11:35

梦油发表于 2022-6-14 10:38
欣赏佳作，问候芙蓉。

问候梦油老师中午好！

醉美水芙蓉 发表于 2022-6-14 11:35

马黑黑发表于 2022-6-13 22:44
去路口看看镁铝

问候黑黑老师中午好！

加林森 发表于 2022-6-14 11:37

醉美水芙蓉发表于 2022-6-14 11:34
谢谢队长告知！

嗯嗯。不客气的。

马黑黑 发表于 2022-6-14 12:10

醉美水芙蓉发表于 2022-6-14 11:35
问候黑黑老师中午好！

中午好{:4_190:}

页: [1] 2

花潮论坛's Archiver

相思路口