爱在风花里

醉美水芙蓉 发表于 2022-8-27 21:24

本帖最后由醉美水芙蓉于 2022-8-27 22:30 编辑 <br /><br /> <style>
#papa { left: -344px; width: 1280px; height: 650px; top: -50px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/630a10c716f2c2beb1b10f12.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { padding: 100px; position: absolute; bottom: 20px; left: 14px;width: fit-content; height: fit-content; display: flex; gap: 80px; flex-direction: column; }
#lrctext { font: bold 2em sans-serif; color: GoldEnrod; text-shadow: 1px 1px 1px #000; text-align: center; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnplay { width: 26px; height: 26px; background: url('https://wj.zp68.com/lxx/yunhua/2022/08/27/ann.png') -31px -24.5px no-repeat; border-radius: 50%; cursor: pointer; }
#btnplay:hoverborder: {1px solid transparent; }
#prgline { width: 280px; height: 2px;background: #ccc linear-gradient(red,red) no-repeat ; background-size: 1px 2px; display: block; cursor: pointer;}
#tmsg { width: auto; color: Gray; }
</style>

<div id="papa">
   <div id="player">
            <div id="lrctext">lrc歌词</div>
            <div id="btnwrap">
                     <span id="btnplay"></span>
                     <span id="prgline"></span>
                     <span id="tmsg">00:00 | 00:00</span>
            </div>
   </div>
</div>

<script>

let lrcAr = [
['0.00','徐铭浩、陈瑞 - 爱在风花里'],
['6.04','作词：马双云'],
['8.06','作曲：陈伟'],
['10.08','编曲：孙培喜'],
['13.00','后期：乐艺文化'],
['16.03','制作人：飞翔、陈伟'],
['18.06','发行：飞翔文化传媒'],
['20.04','LRC编辑：醉美水芙蓉'],
['24.03','男：'],
['25.06','你在风花里对风传语'],
['30.09','女：'],
['31.05','我在风花里听情话递'],
['36.08','男：'],
['37.05','想起我们曾经风花里'],
['43.01','女：'],
['43.04','有过太多的快乐和甜蜜'],
['49.01','男：'],
['49.05','你在相思里风柔柔起'],
['55.00','女：'],
['55.05','我感受到你飘来的意'],
['61.00','男：'],
['61.04','想起我们曾风中拥抱'],
['67.03','女：'],
['67.06','眼角就流下相思泪滴'],
['72.04','男：'],
['73.01','你我同在风花里'],
['78.08','两处风花不相聚'],
['84.03','女：'],
['84.07','只盼转身回眸笑'],
['90.07','你已置身风花里'],
['96.03','男：'],
['96.08','你我同在风花里'],
['102.07','无奈风花分两地'],
['108.02','女：'],
['108.08','只盼再次拥抱你'],
['114.02','合：'],
['114.07','隔着时空不隔心'],
['144.02','男：'],
['145.05','你在相思里风柔柔起'],
['151.03','女：'],
['151.05','我感受到你飘来的意'],
['157.01','男：'],
['157.05','想起我们曾风中拥抱'],
['163.03','女：'],
['163.06','眼角就流下相思泪滴'],
['168.06','男：'],
['169.01','你我同在风花里'],
['174.07','两处风花不相聚'],
['180.02','女：'],
['180.07','只盼转身回眸笑'],
['186.07','你已置身风花里'],
['192.02','男：'],
['192.08','你我同在风花里'],
['198.07','无奈风花分两地'],
['204.05','女：'],
['204.09','只盼再次拥抱你'],
['210.02','合：'],
['210.07','隔着时空不隔心'],
['216.04','女：'],
['216.08','只盼再次拥抱你'],
['222.04','合：'],
['222.08','隔着时空不隔心'],
['227.03','谢谢欣赏！']
];
let aud = new Audio(), lw = prgline.offsetWidth, bgpic = 'https://wj.zp68.com/lxx/yunhua/2022/08/27/ann.png';
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=214233132&.mp3';
aud.autoplay = true;
aud.loop = true;

prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;

btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnplay.style.background = 'url(' + bgpic +') -62px -24.5px no-repeat');
aud.addEventListener('pause', ()=> btnplay.style.background = 'url(' + bgpic + ') -31px -24.5px no-repeat');
aud.addEventListener('timeupdate', () => {
   prgline.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
   tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
   for(j = 0; j < lrcAr.length;j ++) {
            if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
   }
});

let toMin = (val)=> {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 60), sec = parseFloat(val % 60);
   if(min < 10) min = '0' + min;
   if(sec < 10) sec = '0' + sec;
   return min + ':' + sec;
}
</script>

小辣椒 发表于 2022-8-27 21:42

欣赏水芙蓉的精彩制作{:4_199:}

小辣椒 发表于 2022-8-27 21:43

不能加分，你修改一下

醉美水芙蓉 发表于 2022-8-27 21:45

小辣椒发表于 2022-8-27 21:43
不能加分，你修改一下

小辣椒晚上好！跟辣椒美女学着做了一个！

小辣椒 发表于 2022-8-27 21:48

醉美水芙蓉发表于 2022-8-27 21:45
小辣椒晚上好！跟辣椒美女学着做了一个！

做的很漂亮{:4_199:}

马黑黑 发表于 2022-8-27 22:02

欣赏美美哒作品

醉美水芙蓉 发表于 2022-8-27 22:09

马黑黑发表于 2022-8-27 22:02
欣赏美美哒作品

黑黑老师播放器有抖动现象！

马黑黑 发表于 2022-8-27 22:12

醉美水芙蓉发表于 2022-8-27 22:09
黑黑老师播放器有抖动现象！

这是预设的。不需要的话，在CSS中找到 :hover 字样，在同一行把

border: 1px solid transparent;

删掉。

醉美水芙蓉 发表于 2022-8-27 22:14

马黑黑发表于 2022-8-27 22:12
这是预设的。不需要的话，在CSS中找到 :hover 字样，在同一行把

border: 1px solid transparent;

谢谢黑黑老师！

马黑黑 发表于 2022-8-27 22:22

醉美水芙蓉发表于 2022-8-27 22:14
谢谢黑黑老师！

这是它唯一的交互动感，其实不是抖动{:4_173:}

醉美水芙蓉 发表于 2022-8-27 22:32

马黑黑发表于 2022-8-27 22:22
这是它唯一的交互动感，其实不是抖动

我没有删除，无意中把符号动错位置，不抖了！

东篱闲人 发表于 2022-8-27 22:40

素材选的非常好！{:5_116:}

青青子衿 发表于 2022-8-27 22:50

青青子衿 发表于 2022-8-27 22:52

芙蓉美女，欣赏友友制作，好婉约派

青青子衿 发表于 2022-8-27 22:53

回复没看见，可能管理员，在后台调整

醉美水芙蓉 发表于 2022-8-27 22:59

东篱闲人发表于 2022-8-27 22:40
素材选的非常好！

不会做图，只能到处乱找了！

醉美水芙蓉 发表于 2022-8-27 23:00

青青子衿发表于 2022-8-27 22:52
芙蓉美女，欣赏友友制作，好婉约派

谢谢朋友精彩点评！

加林森 发表于 2022-8-27 23:06

水芙蓉制作得真漂亮。不错的！

醉美水芙蓉 发表于 2022-8-27 23:07

加林森发表于 2022-8-27 23:06
水芙蓉制作得真漂亮。不错的！

谢谢队长鼓励！

加林森 发表于 2022-8-27 23:09

醉美水芙蓉发表于 2022-8-27 23:07
谢谢队长鼓励！

不客气啦！

页: [1] 2

花潮论坛's Archiver

爱在风花里