论坛 › 欢乐水吧 › 我在等一场雨 - 向思思

亚伦影音工作室 发表于 2024-7-4 22:45

我在等一场雨 - 向思思

本帖最后由 亚伦影音工作室 于 2024-7-5 10:42 编辑 <br /><br /><style>
#tz { left: 50%; top: 210px; transform: translateX(calc(-50% - 81px)); background:url('https://pic.imgdb.cn/item/663f05bb0ea9cb14039b2934.jpg')no-repeat center/cover;width: 1200px; height: 700px; overflow: hidden; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#player { position: absolute; left: 10%; bottom: 320px;border-radius: 50%; background:url('https://pic.imgdb.cn/item/65750001c458853aefd723ae.png')no-repeat center/cover,url('https://pic.imgdb.cn/item/6686a401d9c307b7e9244771.jpg')45px 45px/110px 110px;width: 200px; height: 200px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); z-index: 81;}
#player:hover { filter: brightness(1.2);filter: hue-rotate(180deg) drop-shadow(0 0 -40px cyan); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }

#mplayer {position: absolute;
      top:18%; left:260px;z-index: 82;
      width: 100px;
      height: 200px;
background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat center/cover;
       cursor: pointer;}
.pink { transform:rotate(-2deg);transform-origin: 0% 0%;margin: 0px 0px;}
.purple { transform-origin: 85% 0%;margin: -2px -5px;transform:rotate(-16deg);}

#bjbs{animation: rotating 3s linear infinite;width: 1200px; height: 700px;position:absolute;background:url('https://pic.imgdb.cn/item/6608fe939f345e8d03a161ff.jpg')no-repeat center/cover;z-index: -1;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(120%)brightness(110%);}}
#lrc{left: 15%;top: 80%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 3em 华文隶书;color: #000078;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 -1px 0);z-index: 20;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color:#880000;overflow: hidden;white-space: pre;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}

li-zi { position: absolute; top: -10px; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state);z-index: 1; }
        @keyframes drop { to { top: 100%; } }
#mb{ position: absolute;width: 1200px; height: 700px;background:url('https://pic.imgdb.cn/item/66690e8dd9c307b7e9ed6d3f.png')no-repeat center/cover;z-index: 20; }
</style>

<div id="tz">

<div id="bjbs"></div>
<div id="mb"></div>
<divid="body" ><li-zi ></li-zi ></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<div id="mplayer"class="pink"></div>
        <audio id="aud" src="https://songs.boonkiong.com/246298326.mp3" autoplay loop></audio>
       <div id="player" ></div>
</div>

<script>
bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');

var mState = () => {
        tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];

};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
</script>
<span id="lrcStr" style="visibility: hidden;">
00:00.0]我在等一场雨-王佳音Sgr
词：聂小慧
曲：聂小慧
编曲：贺祺音乐
和声：小佑
混音：冯鑫阳
统筹：阿宇
监制：米奇
制作人：聂小慧
发行：星汉马文化
我在等一场雨 等关于你的消息
等和你的相遇 等有你的花季
我在等一场雨 在等有你的风景
在我的故事里 有你才充满意义
落花一片一片化作对你的思念
飘落我的眼底层层堆叠
你的一句誓言 成了困住我的圈
如今你怎么就消失不见
心碎一遍一遍在那无尽的黑夜
没有你的世界我好胆怯
你的一句永远 困惑了我这些年
你却看不见我哭红的眼
我在等一场雨 等关于你的消息
等和你的相遇 等有你的花季
我在等一场雨 在等有你的风景
在我的故事里 有你才充满意义
我在等一场雨 等那当初的约定
等和你的相拥 等有你的结局
我在等一场雨 在等着你的归期
在我的世界里 真的不能没有你
心碎一遍一遍在那无尽的黑夜
没有你的世界我好胆怯
你的一句永远 困惑了我这些年
你却看不见我哭红的眼
我在等一场雨 等关于你的消息
等和你的相遇 等有你的花季
我在等一场雨 在等有你的风景
在我的故事里 有你才充满意义
我在等一场雨 等那当初的约定
等和你的相拥 等有你的结局
我在等一场雨 在等着你的归期
在我的世界里 真的不能没有你
我在等一场雨 等关于你的消息
等和你的相遇 等有你的花季
我在等一场雨 在等有你的风景
在我的故事里 有你才充满意义
我在等一场雨 等那当初的约定
等和你的相拥 等有你的结局
我在等一场雨 在等着你的归期
在我的世界里 真的不能没有你
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
        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) => {
        lrca=lrcAr;
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.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;
                }
        }
});
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;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
var pa= document.querySelector('body');
var mState = () => aud.paused ?
        (pa.style.setProperty('--state', 'paused')) :
        (pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: 200}).forEach((item) => {
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --dur: ${0.5 + Math.random() * 1}s;
                        --delay: ${Math.random() * -0.8}s;
                        width: ${1 + Math.round(Math.random())}px;
                        height: ${8 + Math.random() * 30}px;
                        left: ${Math.random() * 100}%;
                `;
                tz.appendChild(item);
        });
</script>

红影 发表于 2024-7-5 11:01

粒子雨滴很漂亮，变色背景设置也漂亮。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-7-5 22:10

这个音乐链接不好，断断续续的，听不到

东篱闲人 发表于 2024-9-9 20:56

好大的雨。。。{:5_116:}

小九 发表于 2024-9-13 18:38

我也进来等雨{:4_187:}

查看完整版本: 我在等一场雨 - 向思思