《你的微笑》- F.I.R 送给小辣椒欣赏！
本帖最后由 加林森 于 2022-6-15 13:51 编辑 <br /><br /><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://pic.imgdb.cn/item/62a72ab70947543129f6ca87.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>你的微笑 - F.I.R</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.joy127.com/url/90839.mp3" autoplay="autoplay" loop="loop"></audio>
<div style="position: absolute; left:320px; top: 1060px; 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 = [
['0.88','你的微笑'],
['1.87','歌手：F.I.R.'],
['2.71','作词 : 陈建宁/詹雯婷/彭资闵/黄汉青/谢宥慧'],
['3.68','作曲 : 黄汉青'],
['4.55','编曲 : 奥斯卡'],
['7.12','喜欢用我的音调'],
['9.22','唱出你的味道'],
['10.71','这一秒'],
['12.62','有种感觉甜蜜的发酵'],
['14.36','一百种言语知道'],
['16.10','爱有一个声道'],
['18.40','才明了'],
['19.71','是你眼神传来的暗号'],
['22.06','太多的幸福报到'],
['23.99','拼凑爱的美妙'],
['25.89','笑一笑'],
['27.11','投入你怀里然后撒娇'],
['29.94','不需要别人来教'],
['32.02','把爱紧紧抓牢'],
['33.98','这一秒'],
['34.98','决定拥抱你给的美好'],
['37.53','爱情是你独特的味道'],
['40.08','在我的心中围绕'],
['41.96','别人都不了'],
['43.89','只有你知道'],
['46.15','因为你世界不再单调'],
['49.77','我的微笑你明白就很好'],
['53.03','你就像月亮绕着轨道'],
['56.58','拥抱着地球闪耀'],
['59.09','在我的星球写下惊叹号'],
['61.37','有了你世界神魂颠倒'],
['64.71','你的微笑'],
['66.91','编织了每一个奇妙'],
['69.76','太多的幸福报到'],
['101.83','拼凑爱的美妙'],
['104.00','笑一笑'],
['105.34','投入你怀里然后撒娇'],
['107.32','不需要别人来教'],
['109.33','把爱紧紧抓牢'],
['111.23','这一秒'],
['113.23','决定拥抱你给的美好'],
['117.14','爱情是你独特的味道'],
['119.25','在我的心中围绕'],
['121.07','别人都不了'],
['123.17','只有你知道'],
['125.08','因为你世界不再单调'],
['128.39','我的微笑你明白就很好'],
['132.37','你就像月亮绕着轨道'],
['136.58','拥抱着地球闪耀'],
['138.67','在我的星球写下惊叹号'],
['140.80','有了你世界神魂颠倒'],
['144.07','你的微笑'],
['145.57','编织了每一个奇妙'],
['150.82','爱情是你独特的味道'],
['165.83','在我的心中围绕'],
['168.47','别人都不了'],
['169.79','只有你知道'],
['171.69','因为你世界不再单调'],
['175.37','我的微笑你明白就很好'],
['178.93','你就像月亮绕着轨道'],
['181.69','拥抱着地球闪耀'],
['183.52','在我的星球写下惊叹号'],
['187.30','有了你世界神魂颠倒'],
['190.92','你的微笑'],
['192.73','编织了每一个奇妙']
];
//将歌词写入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-13 18:03
那只蝴蝶就是播放器吧？还真好看。
不是，就是一个蝴蝶。 @马黑黑 菇凉是不是有点变形 马黑黑 发表于 2022-6-13 19:09
菇凉是不是有点变形
有点的。应该可以修改的吧。 加林森 发表于 2022-6-13 19:12
有点的。应该可以修改的吧。
要美美哒 @小辣椒 才会喜欢，小辣椒追求完美 马黑黑 发表于 2022-6-13 19:09
菇凉是不是有点变形
现在老黑你再来看看。应该可以了。 醉美水芙蓉 发表于 2022-6-13 19:14
队长厉害！做得好漂亮！
谢谢水芙蓉。晚上好！{:4_204:} 加林森 发表于 2022-6-13 19:16
现在老黑你再来看看。应该可以了。
为什么我总觉菇凉得怪怪的，我去拿放大镜 马黑黑 发表于 2022-6-13 19:16
要美美哒 @小辣椒 才会喜欢，小辣椒追求完美
现在修改了。还可以了吧。 加林森 发表于 2022-6-13 19:18
现在修改了。还可以了吧。
还是不行，要不换张图 马黑黑 发表于 2022-6-13 19:19
还是不行，要不换张图
啊？没有了啊。 马黑黑 发表于 2022-6-13 19:18
为什么我总觉菇凉得怪怪的，我去拿放大镜
{:4_172:}你这样感觉的啊？ 马黑黑 发表于 2022-6-13 19:18
为什么我总觉菇凉得怪怪的，我去拿放大镜
现在我换了图片，你看看。 队长的歌词同步现在做得很好了。{:4_187:}这个背景让播放条看不出来呢。 歌词框放人脸上不太好，最好换个位置就漂亮{:4_204:} 这首歌曲歌词那么快，队长倒是同步做得很好，非常厉害{:4_199:}