论坛 › 欢乐水吧 › 别让眼泪把我灌醉 - 魏佳艺

亚伦影音工作室 发表于 2024-6-20 15:52

别让眼泪把我灌醉 - 魏佳艺

本帖最后由 亚伦影音工作室 于 2024-7-5 11:17 编辑 <br /><br /><style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 781px); 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://www.mp3.wf/data/attachment/forum/202406/19/212031chs1chhfhvvtqqtf.jpg)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;background: url('https://pic.imgdb.cn/item/6673ae38d9c307b7e92e8a25.png')no-repeat center/cover;
      width: 380px;
      height: 380px;
      cursor: pointer;
}
.pink { transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { 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>


mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

vinyl.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>vinyl.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>vinyl.style.animationPlayState = 'paused');
bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
</script>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);

    //其它控制代码
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `别让眼泪把我灌醉 - 魏佳艺
词：包一飞
曲：包一飞
编曲：孙培喜
和声：贺佩莉
混音：Ufo Neil
制作人：张晔
出品人：张晔
录制者：广东飞碟文化传播有限公司
深夜辗转反侧难以入睡
编个理由来给我安慰
我曾掏心掏肺 痴心不悔
事与愿违该怎样面对
醒来的梦无法再去找回
脑海中记忆继续沉醉
苦酒一杯一杯 接着一杯
冰冷的风刺透我的心扉
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
醒来的梦无法再去找回
脑海中记忆继续沉醉
苦酒一杯一杯 接着一杯
冰冷的风刺透我的心扉
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
别让眼泪来把我灌醉
别让痴情被无情包围
失落的思绪饱受着狼狈
镜子里的痛是那么绝对
别让眼泪来把我灌醉
剧情总是会百转千回
往日的深情被现实摧毁
放手你向南我独自向北
放手你向南我独自向北
`;
getAr(lrc);
</script>

红影 发表于 2024-6-20 16:54

竖向歌词，亚伦老师的帖子真快啊{:4_187:}

梦油 发表于 2024-6-20 17:00

欣赏佳作，问候亚伦。

老谟深虑 发表于 2024-6-21 11:13

          欣赏老师的精美制作，点赞！请问老师，我套用你的代码制作音画，在离退休论坛发表，那个开关的唱片和歌词字幕都不显示，不知为什么？请老师指教，谢谢！

亚伦影音工作室 发表于 2024-6-21 11:32

老谟深虑 发表于 2024-6-21 11:13
欣赏老师的精美制作，点赞！请问老师，我套用你的代码制作音画，在离退休论坛发表，那个开关的唱 ...

你把地址给我，我看看！

老谟深虑 发表于 2024-6-21 12:30

亚伦影音工作室 发表于 2024-6-21 11:32
你把地址给我，我看看！

          因为不显示，我就不能发表，所以米没有地址给你。在编辑器上都正常，一到论坛发表，就不显示了。

亚伦影音工作室 发表于 2024-6-22 21:47

音画js封装

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


[*]<style type="text/css">
[*]#papa { margin: 10px 0 20px calc(50% -871px); 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>

查看完整版本: 别让眼泪把我灌醉 - 魏佳艺