论坛首页 › 单图音画 › 风雨中的诺言（国粤对唱）

醉美水芙蓉 发表于 2024-12-11 21:39:38

风雨中的诺言（国粤对唱）

<style type="text/css">
.mnBox {margin: 140px 0 20px calc(50% - 721px); background:#000080 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/dc3887fbf92708b0e0b84c6e5c9af059_preview.jpg')no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1234567; position: relative;}
#tu{position: absolute;top:0%; left:0%;z-index: 1;
        width: 100%;
        height: 100%;animation: round 60s linear infinite; }
#tu img{width: 100%;
        }

@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
}
.rain {z-index: 2;
        width: 1px;
        height: 8px;
        top: -20px;
        left: 400px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 15px;
        background: #eee;
}



.circle {z-index: 2;
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;}
}
#player {
        position: absolute;z-index: 40;
        left:35px;
        bottom: 50px;
        width: 150px;
        height: 150px;
         opacity: 1;
        transition: .4s;
display: grid;
        place-items: center;
        --sp1: 0; --sp2: 1;
}
#player::before, #player::after {
        position: absolute;
        content: '';
        cursor: pointer;
        transition: .4s;
}
#player::before {width: 150px;height: 150px;background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/dc3887fbf92708b0e0b84c6e5c9af059_preview.jpg)no-repeat center/cover;
        opacity: var(--sp1);}
#player::after {width: 150px;height: 150px;background:url(https://pic.imgdb.cn/item/65f0d8299f345e8d03ff0b31.gif)no-repeat center/cover;
        opacity: var(--sp2);}
#phone{position: absolute; z-index: 4;width:60px;top: 4%;left: 88%; font:400 2.6em/1em
华文隶书; color: transparent; background-image: linear-gradient(180deg, #fff,#00ff00,#fff000); background-size: 100px 400px;border: 1px #000; writing-mode:vertical-rl; -webkit-background-clip:text; animation: wenzi 10s linear infinite alternate }
@keyframes wenzi { 0% { background-position: 0px -2500px; } 100% { opacity: 1;background-position: 0px -1000px; }}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 80%;transform: translate(-50%);font:normal 3.5em/1em 华文隶书; font-weight:400;color: #000080;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<divclass="mnBox"id="mnBox">
<div id='tu'><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/55cb852554e1c12291ed37d390caf5ff_preview.jpg" alt=""></div>
<div id="player" title="暂停音乐和动画/播放音乐和动画" ></div>
<div data-lrc="" id="lrc"></div>
<div id="phone">风雨中的诺言（国粤对唱）*</div>
<span class="rain"></span>
<span class="circle"></span>
</div>
<audio id="aud" src="https://bbs.cnzv.cc/mp3/NDE3NzU5NDQ3Jmt3bXAz.mp3" autoplay loop>
<script >
function rain() {
      var str = "";
      for(i=0; i<50; i++) {
                var l = Math.ceil(Math.random()*1286);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
      }
      for(j=0;j<40; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*40+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
      }
      document.getElementById('mnBox').innerHTML += str;
}

rain();

let raindrops = mnBox.querySelectorAll('.rain');
let rainpops = mnBox.querySelectorAll('.circle');
let rainState = () => {
      aud.paused ? (raindrops.forEach( drop => {drop.style.animationPlayState='paused'}) , rainpops.forEach( pop => {pop.style.animationPlayState='paused'}))
                              : (raindrops.forEach( drop => {drop.style.animationPlayState='running'}) , rainpops.forEach( pop => {pop.style.animationPlayState='running'}));
}
let mState = () => {rainState();aud.paused ? (player.style.setProperty('--sp1','1'), player.style.setProperty('--sp2','0')) : (player.style.setProperty('--sp1','0'), player.style.setProperty('--sp2','1'))};

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
player.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
phone.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>phone.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>phone.style.animationPlayState = 'paused');
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `风雨中的诺言（国粤对唱）
演唱：王娜＆阿国哥
作词：陈宝亮＆东耳＆蒋蕙林
作曲：王家军
编曲：李德奎
混音：王哲
监制：金钰儿
制作人：左为、inin
推广宣发：邵宏斌
LRC编辑：醉美水芙蓉
国：
万般温柔化做尘埃
一片真心只剩空白
情到深处是孤独超载
我跌跌撞撞走到现在
粤：
无尽空虚 愁绪难掩
泪像雨点 撒在面前
夜已渐深 爱始终要分
我是否注定孤单半生
国：
我走在风里走在雨里
我在爱的世界奉陪到底
爱错了人会被伤害
哪怕错爱也无法忘怀
粤：
在雨中的我想你恨你
恨你给我无数心痛滋味
要经过多少悲欢散聚
才能放过自己 不再想起
国：
太多伤疤不忍揭开
太多难堪只能深埋
粤：
夜已渐深爱始终要分
我是否注定孤单半生
粤：
在风中的我想你念你
让我对你爱的痴心塌地
伤透的心 终需别离
凝望你的身影怎么忘记
国：
我不能回头不能挽留
不能忘掉我们曾经拥有
爱怕的人不敢再爱
诺言慢慢消失在人海
粤：
在风中的我想你念你
让我对你爱的痴心塌地
伤透的心 终需别离
凝望你的身影怎么忘记
国：
我不能回头不能挽留
不能忘掉我们曾经拥有
爱怕的人不敢再爱
诺言慢慢消失在人海
谢谢欣赏！
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),player.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),player.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

klxf 发表于 2024-12-12 12:31:06

本帖最后由 klxf 于 2024-12-12 12:32 编辑

谢谢醉美管理员分享:)，小播不动呀？

醉美水芙蓉 发表于 2024-12-12 18:06:00

klxf 发表于 2024-12-12 12:31
谢谢醉美管理员分享，小播不动呀？

不可能，我这边正常！

admin 发表于 2024-12-12 20:50:50

醉美水芙蓉 发表于 2024-12-12 18:06
不可能，我这边正常！

应该是酷狗音乐 不支持 https它是 http

klxf 发表于 2024-12-12 22:24:50

本帖最后由 klxf 于 2024-12-12 22:30 编辑

admin 发表于 2024-12-12 20:50
应该是酷狗音乐 不支持 https它是 http
我这儿现在听不到，但单独拿出音乐来可以听到，不知其因:lol

查看完整版本: 风雨中的诺言（国粤对唱）