醉美水芙蓉 发表于 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
查看完整版本: 爱在风花里