论坛 › 动画音画 › 走在冷雨里(Live 合唱版)-艺凌

亚伦影音工作室 发表于 2024-12-21 20:38

走在冷雨里(Live 合唱版)-艺凌

本帖最后由 亚伦影音工作室 于 2024-12-21 21:57 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#000 url(https://pic.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg)no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#pa{background:url(https://pic.imgdb.cn/item/66c40607d9c307b7e912340a.png)no-repeat center/cover;z-index: 400;
        box-shadow: 0 0 4px 0 gray;
        left:8%;
top: 30%;
        width: 400px;
        height: 180px;
        color: #fff;
        position: absolute;
        display: grid;
        place-items: center;
}
#pa::before, #pa::after {
        position: absolute;
        top: 0px;
}
#pa::before {}
#pa::after {
        content: '走在冷雨里(Live 合唱版)-艺凌';
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-radius: 5px 5px 0 0;
        background: radial-gradient(5px circle at 15px, snow, snow 4px, transparent 5px) no-repeat;
        padding-left: 25px;
        box-sizing: border-box;
}
.pp {
        position: absolute;
        width: 1px;
        min-height: 2px;
        transform-origin: 0 30%;
        transition: height .16s linear;
        display: grid;
        place-items: start center;
}
#mBtn {width: 18px;position: absolute;
      height: 18px;
       bottom: 16px;
        padding: 0;left:6%;
        background: transparent;
        box-sizing: border-box;
        transition: .2s;
}
#mBtn:hover {cursor: pointer;
        border-left-color: red;
}
.play { border-width: 0 0 0 16px;
       border-left-color: #eee;
      border-style: double;
       }
.pause {border:0px solid transparent;
      border-left-color: #eee;
         border-width: 10px 0 12px 16px;
       }


#mypic { bottom: 130px;
      left:86%;z-index: 4;
display: block;position: absolute;
    width: 30px; height: 30px;
    background: url(https://pic.imgdb.cn/item/674f8e7ed0e0a243d4dce5ed.png) no-repeat center/150px 30px;
animation: heart-burst steps(5) 1s infinite;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -150px 0;}
}
#prog {position: absolute;z-index: 8;
      width: 62%;font: normal 12px sans-serif;
      height: 1.5px;background:#ccc;
      cursor: pointer;
         bottom: 25px;
left:25%;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #FF0000;
            width: 0%;
      }
#prog::before, #prog::after { position: absolute;color: #eee; }
#prog::before { content: attr(data-cu); left:-40px; top: -7px; }
#prog::after { right: -40px; content: attr(data-du); ; top: -7px; }
.mnBox {
        top: 0px;
        position: relative;
        background: #0000;
        height: 720px;
        width: 1286px;
      left: 0px;overflow: hidden;
        border: 1px solid;
        box-shadow: 0px 0px 0px 2px tan;
}
.rain {
        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 {
        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%;}
}

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 90%;transform: translate(-50%);font:normal 3.5em 华文隶书; 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>
<div id="papa">
<divclass="mnBox"id="mnBox">
<span class="rain"></span>
<span class="circle"></span>
</div>
<div id="pa">
<div id="mBtn" class="play"></div>
<div id="mypic" ></div>
<div id="prog"data-cu="00:00" data-du="00:00" title="调节进度"title="播放进度条"><div id="prog-bar"></div></div>
</div>
<div data-lrc="" id="lrc"></div>

</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/d557-audiofreehighqps/33/44/GKwRIJIK7YAXACAAAAMjB32n.m4a" loop autoplay></audio>
<script>
let btnflag =true;
mBtn.onclick = () => {aud.paused ? (aud.play(),mypic.style.animationPlayState = 'running') : (aud.pause(),mypic.style.animationPlayState = 'paused');
mypic.style.animationPlayState = aud.paused ? 'paused':'running';
        mBtn.className = btnflag ? 'play pause' : 'play';
        btnflag = !btnflag;
}
const tt = Math.floor(pa.clientWidth / 4 - 5);
let pps = [];
Array(tt).fill('').forEach((_,k) => {
        let sp = document.createElement('span');
        sp.className = 'pp';
        sp.style.cssText += `
                left: ${10 + 4* k}px;
                background: linear-gradient(to bottom, #ccc, #00ff00,#ccc);
        `;
        pps.push(sp);
        pa.prepend(sp);
});
(function update() {
                let output = [...new Array(tt).keys()].map((v,k) => Math.floor(Math.random() * (aud.paused ? 0 : 80 - Math.random() * 160)));
                for(let j = 0; j < tt ; j++) {
                        pps.style.height = output + 'px';
                }
                window.requestAnimationFrame(update);
        })();
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
aud.addEventListener('timeupdate', () => {
          varpercent= (aud.currentTime / aud.duration) * 100;
            progBar.style.width = percent + '%';
   prog.dataset.cu = toMin(aud.currentTime);
      prog.dataset.du = toMin(aud.duration);

      });
aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' / ' + toMin(aud.duration);
});
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;
      };
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `走在冷雨里(Live 合唱版)-艺凌
词曲：隔壁老陈
编曲：李胜华
合唱：毅然合唱团
混音：毅然音乐
制作人：陈金文
OP：星汉马文化
走在冷雨里
苦苦找寻往日的甜蜜
冷风一阵阵
吹不散我心中的忧虑
为什么你要狠心地离去
我不明白错在了哪里
如果我伤了你
不是我故意
我真的爱你不想放弃
只想和你在一起
求求你不要不要再生气
快快回到我的怀抱里
走在冷雨里
苦苦找寻往日的甜蜜
凄风一阵阵
吹不散我心中的忧虑
为什么你要把我来抛弃
你给我太多太多的回忆
如果我伤了你
不是我故意
我真的爱你真的想你
只盼情缘能再续
求求你不要不要再怀疑
我的生命里不能没有你
为什么你要把我来抛弃
你给我太多太多的回忆
如果我伤了你
不是我故意
我真的爱你真的想你
只盼情缘能再续
求求你不要不要再怀疑
我的生命里不能没有你
`;
/*变量 ：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'),mBtn.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mBtn.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>

<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 ?(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'}))}
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

红影 发表于 2024-12-21 22:39

很漂亮的制作。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-12-21 22:41

是因为播放器的透明度设置的缘故么，感觉雨滴到播放器前面了呢，理论上应该在后面的呢{:4_204:}

红影 发表于 2024-12-21 22:42

场景设计和下雨的效果都很美{:4_187:}

小辣椒 发表于 2024-12-21 23:00

亚伦脑子特别灵，这个效果很好，这首歌我也是特别的喜欢{:4_173:}

小辣椒 发表于 2024-12-21 23:02

现在越来越佩服亚伦了，每次出来的效果都很好，小辣椒欣赏加学习{:4_187:}

秋思梦景 发表于 2024-12-22 05:59

问候老师好！精美音画佳作，为您点赞！祝您冬日温暖幸福安康！{::woshou::}{::hua::}

小文 发表于 2024-12-22 08:14

欣赏

查看完整版本: 走在冷雨里(Live 合唱版)-艺凌