首页 › 音画作品 › 原生lrc歌词同步JS封装

亚伦影音工作室 发表于 2024-6-27 17:09

原生lrc歌词同步JS封装

本帖最后由 亚伦影音工作室 于 2024-9-28 20:37 编辑 <br /><br /><style type="text/css">
#papa { margin: 140px-271px; background:url('https://pic.imgdb.cn/item/6673e268d9c307b7e9a33d06.webp') no-repeat center/cover;width: 1400px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height: 700px;position: absolute;background:url('https://pic.imgdb.cn/item/6673e268d9c307b7e9a33d06.webp')no-repeat center/cover;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#bfq{position: absolute;
width: 380px;
height: 380px;top:100px; left:10px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(.8);}
#vinyl{position: absolute;
      left:40px;
      bottom: 30px;
         animation: spin 8slinear infinite;
      display:flex;
      align-items:center;
      justify-content:center;
      width:240px;
      height:240px;
      border-radius:100%;transition: .5s;
      background:linear-gradient(-45deg,#333,black,#aaa, black,#333);
}
#vinyl:before,#vinyl:after{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:repeating-radial-gradient(circle at center,#222 4px,transparent 8px);
      border-radius:50%;
}
.label{
      width:110px;
      height:110px;
      border-radius:100%;
      z-index:1;
      background:url(https://pic.imgdb.cn/item/6673e506d9c307b7e9a816af.webp)no-repeat 0px 0px/cover;
}
.label:before{
      content:'';
      position:absolute;
      width:12px;
      height:12px;
      border-radius:100%;
      background-color: #fff;
      margin:auto;
      display:block;
      top:0;left:0;right:0;bottom:0;
}
@keyframes spin {to { transform: rotate(1turn); }}
#mplayer {position: absolute;
      top:-10px; left:-30px;z-index: 21;
      width: 380px;
      height: 380px;
      cursor: pointer;
}
.pink { background: url('https://pic.imgdb.cn/item/6673ae38d9c307b7e92e8a25.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/6673ae38d9c307b7e92e8a25.png')no-repeat center/cover; transform-origin: 65% 0%;margin: 32px -22px;transform:rotate(-20deg);}
#tz { top:60px;left:1200px;width: 100px; height: 600px; z-index: 1; overflow: hidden; position: absolute; }
      #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 40px/90px 微软雅黑; color: transparent; background: repeating-linear-gradient(to bottom, gold, lightgreen, snow, lightgreen, orange) 50%/80px 200px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
</style>
<div id="papa">
<div id="bjbs"> </div>
<div id="tz" data-lrc="别让眼泪把我灌醉 - 魏佳艺"></div>
<div id="bfq"><div id="mplayer" class="pink"></div>
<div id="vinyl">
      <div class="label"></div>
</div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/41/4b/b3/61dd605191a75e98016f14c112977f22/audio.mp3" autoplay loop></audio>
<script>
document.write('<script src="https://file.uhsea.com/2406/ed88b02a6b7ff53712d5c567c4f7e75fN5.js" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="https://file.uhsea.com/2406/f2acf86a6066b290dcd5ca8e54d223c1T3.js" type="text/javascript" charset="utf-8"><\/script>');
var lrc = `别让眼泪把我灌醉 - 魏佳艺
词：包一飞
曲：包一飞
编曲：孙培喜
和声：贺佩莉
混音：Ufo Neil
制作人：张晔
出品人：张晔
录制者：广东飞碟文化传播有限公司
深夜辗转反侧难以入睡
编个理由来给我安慰
我曾掏心掏肺 痴心不悔
事与愿违该怎样面对
醒来的梦无法再去找回
脑海中记忆继续沉醉
苦酒一杯一杯 接着一杯
冰冷的风刺透我的心扉
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
醒来的梦无法再去找回
脑海中记忆继续沉醉
苦酒一杯一杯 接着一杯
冰冷的风刺透我的心扉
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
放手你向南我独自向北
`;
</script>

亚伦影音工作室 发表于 2024-6-27 17:09

本帖最后由 亚伦影音工作室 于 2024-6-22 22:02 编辑


[*]<style type="text/css">
#papa { margin: 140px-271px; background:url('https://pic.imgdb.cn/item/6673e268d9c307b7e9a33d06.webp') no-repeat center/cover;width: 1400px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height: 700px;position: absolute;background:url('https://pic.imgdb.cn/item/6673e268d9c307b7e9a33d06.webp')no-repeat center/cover;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#bfq{position: absolute;
width: 380px;
height: 380px;top:100px; left:10px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(.8);}
#vinyl{position: absolute;
      left:40px;
      bottom: 30px;
         animation: spin 8slinear infinite;
      display:flex;
      align-items:center;
      justify-content:center;
      width:240px;
      height:240px;
      border-radius:100%;transition: .5s;
      background:linear-gradient(-45deg,#333,black,#aaa, black,#333);
}
#vinyl:before,#vinyl:after{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:repeating-radial-gradient(circle at center,#222 4px,transparent 8px);
      border-radius:50%;
}
.label{
      width:110px;
      height:110px;
      border-radius:100%;
      z-index:1;
      background:url(演唱者图片地址)no-repeat 0px 0px/cover;
}
.label:before{
      content:'';
      position:absolute;
      width:12px;
      height:12px;
      border-radius:100%;
      background-color: #fff;
      margin:auto;
      display:block;
      top:0;left:0;right:0;bottom:0;
}
@keyframes spin {to { transform: rotate(1turn); }}
#mplayer {position: absolute;
      top:-10px; left:-30px;z-index: 21;
      width: 380px;
      height: 380px;
      cursor: pointer;
}
.pink { background: url('https://pic.imgdb.cn/item/6673ae38d9c307b7e92e8a25.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/6673ae38d9c307b7e92e8a25.png')no-repeat center/cover; transform-origin: 65% 0%;margin: 32px -22px;transform:rotate(-20deg);}
#tz { top:60px;left:1200px;width: 100px; height: 600px; z-index: 1; overflow: hidden; position: absolute; }
      #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 40px/90px 微软雅黑; color: transparent; background: repeating-linear-gradient(to bottom, gold, lightgreen, snow, lightgreen, orange) 50%/80px 200px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
</style>
<div id="papa">
<div id="bjbs"> </div>
<div id="tz" data-lrc="别让眼泪把我灌醉 - 魏佳艺"></div>
<div id="bfq"><div id="mplayer" class="pink"></div>
<div id="vinyl">
      <div class="label"></div>
</div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/41/4b/b3/61dd605191a75e98016f14c112977f22/audio.mp3" autoplay loop></audio>
<script>
document.write('<script src="https://file.uhsea.com/2406/ed88b02a6b7ff53712d5c567c4f7e75fN5.js" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="https://file.uhsea.com/2406/f2acf86a6066b290dcd5ca8e54d223c1T3.js" type="text/javascript" charset="utf-8"><\/script>');
var lrc = `别让眼泪把我灌醉 - 魏佳艺
词：包一飞
曲：包一飞
编曲：孙培喜
和声：贺佩莉
混音：Ufo Neil
制作人：张晔
出品人：张晔
录制者：广东飞碟文化传播有限公司
深夜辗转反侧难以入睡
编个理由来给我安慰
我曾掏心掏肺 痴心不悔
事与愿违该怎样面对
醒来的梦无法再去找回
脑海中记忆继续沉醉
苦酒一杯一杯 接着一杯
冰冷的风刺透我的心扉
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
醒来的梦无法再去找回
脑海中记忆继续沉醉
苦酒一杯一杯 接着一杯
冰冷的风刺透我的心扉
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
放手你向南我独自向北
`;
</script>

liumang 发表于 2024-6-27 22:20

js封装后代码可以少一点了{:5_150:}

liumang 发表于 2024-6-27 22:22

感谢亚伦老师代码分享{:5_124:}

小辣椒 发表于 2024-6-29 00:30

亚伦这个js封装，出来代码少了许多，以前下面那些代码没有了{:5_150:}

liumang 发表于 2024-6-29 13:07

今天看见的怎么是这样了？代码哪里有问题了？

查看完整版本: 原生lrc歌词同步JS封装