论坛首页 › 单图音画 › 走在冷雨里(Live 合唱版)-艺凌

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

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

本帖最后由 亚伦影音工作室 于 2024-12-21 21:54 编辑 <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: 128px;
      left:80%;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 21:04:59

欣赏亚伦老师精彩音画！

醉美水芙蓉 发表于 2024-12-21 21:05:47

图美歌美，论坛有你更精彩！

klxf 发表于 2024-12-22 11:55:44

漂亮！谢谢亚伦老师精彩分享:)

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