原生lrc歌词同步JS封装

亚伦影音工作室

[i=s] 本帖最后由 亚伦影音工作室 于 2024-9-28 20:37 编辑 [/i]

亚伦影音工作室

• <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 8s  linear 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 -1px  0);  }
</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 = `[00:00.17]别让眼泪把我灌醉 - 魏佳艺
[00:03.55]词：包一飞
[00:05.6]曲：包一飞
[00:07.0]编曲：孙培喜
[00:08.34]和声：贺佩莉
[00:09.67]混音：Ufo Neil
[00:10.62]制作人：张晔
[00:12.02]出品人：张晔
[00:13.33]录制者：广东飞碟文化传播有限公司
[00:16.88]深夜辗转反侧难以入睡
[00:20.87]编个理由来给我安慰
[00:24.87]我曾掏心掏肺 痴心不悔
[00:28.87]事与愿违该怎样面对
[00:32.79]醒来的梦无法再去找回
[00:36.83]脑海中记忆继续沉醉
[00:40.83]苦酒一杯一杯 接着一杯
[00:44.87]冰冷的风刺透我的心扉
[00:50.56]别让眼泪来把我灌醉
[00:54.75]别让痴情被无情包围
[00:58.79]失落的思绪饱受着狼狈
[01:02.7]镜子里的痛是那么绝对
[01:06.76]别让眼泪来把我灌醉
[01:10.729996]剧情总是会百转千回
[01:14.78]往日的深情被现实摧毁
[01:18.92]放手你向南我独自向北
[01:42.91]醒来的梦无法再去找回
[01:46.82]脑海中记忆继续沉醉
[01:50.92]苦酒一杯一杯 接着一杯
[01:54.89]冰冷的风刺透我的心扉
[01:58.979996]别让眼泪来把我灌醉
[02:02.71]别让痴情被无情包围
[02:06.72]失落的思绪饱受着狼狈
[02:10.82]镜子里的痛是那么绝对
[02:14.73]别让眼泪来把我灌醉
[02:18.76]剧情总是会百转千回
[02:22.75]往日的深情被现实摧毁
[02:26.89]放手你向南我独自向北
[02:34.92]别让眼泪来把我灌醉
[02:38.77]别让痴情被无情包围
[02:42.72]失落的思绪饱受着狼狈
[02:46.95]镜子里的痛是那么绝对
[02:50.69]别让眼泪来把我灌醉
[02:54.72]剧情总是会百转千回
[02:58.86]往日的深情被现实摧毁
[03:02.97]放手你向南我独自向北
[03:10.57]放手你向南我独自向北
`;
</script>

liumang

js封装后代码可以少一点了

liumang

感谢亚伦老师代码分享

小辣椒

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

liumang

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