论坛 › 动画音画 › 风里雨里我在等你*司文+兰依依*

亚伦影音工作室 发表于 2024-11-27 19:11

风里雨里我在等你*司文+兰依依*

本帖最后由 亚伦影音工作室 于 2024-11-27 22:48 编辑 <br /><br /><style type="text/css">
.mnBox {margin: 140px 0 20px calc(50% - 721px); background:#000080 url('https://pic.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp')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://pic.imgdb.cn/item/65f0d8669f345e8d03ff5c34.png)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://pic.imgdb.cn/item/67453660d0e0a243d4d0cf59.webp" 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://s2.ananas.chaoxing.com/sv-w9/audio/c1/10/5c/1b1915470377d5a409ec4b72dcfc901b/audio.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 = `风里雨里我在等你 -司文+兰依依
作词：司文+郭冬青
作曲：司文
我在等你
你在哪里
眼里心里都是泪滴
相信爱能感动天感动地
哪怕只感动了自己
我在等你
等你想起
千里万里此生相系
不管最后是悲还是喜
你都是我爱的唯一
风里雨里
我在等你
年华一场
点点滴滴
花开若相惜
花落莫相离
你的笑容依然
清晰
风里雨里
我在等你
时光一梦
朝朝夕夕
我在红尘里
等一场相聚
岁月打湿了回忆
我在等你
等你想起
千里万里此生相系
不管最后是悲还是喜
你都是我爱的唯一
风里雨里
我在等你
年华一场
点点滴滴
花开若相惜
花落莫相离
你的笑容依然
清晰
风里雨里
我在等你
时光一梦
朝朝夕夕
我在红尘里
等一场相聚
岁月打湿了回忆
风里雨里
我在等你
年华一场
点点滴滴
花开若相惜
花落莫相离
你的笑容依然
清晰
风里雨里
我在等你
时光一梦
朝朝夕夕
我在红尘里
等一场相聚
岁月打湿了回忆
岁月打湿了回忆

`;
/*变量 ：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>

亚伦影音工作室 发表于 2024-11-27 19:16

网站推荐：MyFreeMP3

秋思梦景 发表于 2024-11-27 19:44

问候老师好！精美音画佳作，精心制作分享。为您点赞！向您学习！{:4_204:}{:5_116:}

梦油 发表于 2024-11-27 20:40

欣赏佳作，问候亚伦。

红影 发表于 2024-11-27 21:29

制作很漂亮，不过好像歌曲听不到呢，可能我这里的网速问题吧。
欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2024-11-27 21:54

这个播放器点击没有反应，歌曲也是没有听到

小辣椒 发表于 2024-11-27 21:56

音乐取出来有听到的，亚伦检查一下代码{:4_205:}

杨帆 发表于 2024-11-27 22:59

视听盛宴，饕餮大餐，谢谢亚伦老师精彩分享{:4_191:}

查看完整版本: 风里雨里我在等你*司文+兰依依*