论坛 › 音乐沙龙 › 你在我心里下了一场雨 (DJ快猫版) - 韩小欠

亚伦影音工作室 发表于 2022-6-29 20:23

你在我心里下了一场雨 (DJ快猫版) - 韩小欠

本帖最后由 亚伦影音工作室 于 2022-6-30 14:56 编辑 <br /><br /><style>
.papa { left: -134px; width: 1024px; height: 650px;margin-top:30px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; background: rgba(0,0,0,.6) url('https://img-baofun.zhhainiao.com/fs/8593960a5bb85b2a56d2d3e7c79525b7.jpg') no-repeat center / cover; overflow: hidden; position: relative; perspective: 1000px; }
.papa::before { position: absolute; content: ''; width: 1024px; height: 650px; background: url('https://img-baofun.zhhainiao.com/fs/1e44714e0018e73d7831a10b7ffdaa54.jpg') no-repeat center /cover; opacity: 1; transform-style: preserve-3d; }
.papa:before { animation: rot 5s linear infinite; }@keyframes rot{
    0%{transform: scale(1);filter:hue-rotate(360deg)contrast(110%)brightness(120%);}
}
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 0px; top: 480px; padding: 10px;text-align: center;font: normal 3em sans-serif; color: #ff0000; font-family:华文隶书; overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0); z-index: 40;}
#geci { width: 1000px; height: 80px;}
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes rot { to { transform: scale3d(0,0,-200) skew(0,30deg); } }
</style>

<div class="papa">

        <div class="playbox">
               
                <p id="geci">缓冲中 ... </p>   </div>
                <p style="padding: 0;margin: 480px 350px;width: 300px; height: 60px;background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000;border-radius: 2%; text-align: center; z-index: 100;">
                        <input id="btnplay" type="button" value="II" />
                        <input id="slider" type="range" min="0" max="100" value="0"style=" height: 4px;padding: 0;margin: 30px 0px;position: relative;z-index: 30;text-align: center;" />
                        <span id="per" style="width: 130px; height: 6px;padding: 0;margin: 30px 0px;font-size: 18px;color: #ffffff;position: relative;z-index: 30;text-align: center;">0:0 / 0:0</span>
        </div>
        <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=203391777" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let slip = 0;

let lrcAr = [
        ['0.00','词：王丽君'],
        ['0.00','你在我心里下了一场雨 (DJ快猫版) - 韩小欠'],
        ['0.00','曲：王平萍'],
        ['1.00','出品人：亚伦'],
        ['1.00','你在我心里下了一场雨'],
        ['1.00','音乐制作人：冯丹'],
        ['5.00','这天气酝酿出悲伤的情绪'],
        ['9.00','还沉浸那美丽的相遇'],
        ['14.00','就被动承受再见的结局'],
        ['34.00','想说亲爱的别犹豫'],
        ['37.00','分手只需要说一句'],
        ['41.00','我不会明知结果仍继续'],
        ['45.00','费力讨好自讨没趣'],
        ['50.00','该拿什么来做比喻'],
        ['53.00','就像头顶上的阴郁'],
        ['57.00','我无法挡住爱的暴风雨'],
        ['61.00','所以假装无所顾虑'],
        ['67.00','你在我心里下了一场雨'],
        ['71.00','这天气酝酿出悲伤的情绪'],
        ['75.00','还沉浸那美丽的相遇'],
        ['80.00','就被动承受再见的结局'],
        ['83.00','你在我心里下了一场雨'],
        ['87.00','连自己都觉得挽留太多余'],
        ['92.00','怪命运它弄人来又去'],
        ['96.00','让快乐瞬间变换成忧郁'],
        ['115.00','想说亲爱的别犹豫'],
        ['119.00','分手只需要说一句'],
        ['123.00','我不会明知结果仍继续'],
        ['127.00','费力讨好自讨没趣'],
        ['132.00','该拿什么来做比喻'],
        ['135.00','就像头顶上的阴郁'],
        ['139.00','我无法挡住爱的暴风雨'],
        ['143.00','所以假装无所顾虑'],
        ['149.00','你在我心里下了一场雨'],
        ['153.00','这天气酝酿出悲伤的情绪'],
        ['157.00','还沉浸那美丽的相遇'],
        ['162.00','就被动承受再见的结局'],
        ['165.00','你在我心里下了一场雨'],
        ['169.00','连自己都觉得挽留太多余'],
        ['174.00','怪命运它弄人来又去'],
        ['178.00','让快乐瞬间变换成忧郁'],
        ['183.00','你在我心里下了一场雨'],
        ['187.00','这天气酝酿出悲伤的情绪'],
        ['191.00','还沉浸那美丽的相遇'],
        ['196.00','就被动承受再见的结局'],
        ['199.00','你在我心里下了一场雨'],
        ['203.00','连自己都觉得挽留太多余'],
        ['208.00','怪命运它弄人来又去'],
        ['212.00','让快乐瞬间变换成忧郁'],
        ['216.00','让快乐瞬间变换成忧郁']
];

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
        }
});

let toMin = (sec) => {
        if(!sec) return '0:00';
        sec = parseInt(sec);
        return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>

红影 发表于 2022-6-29 20:40

每一个美人缩小后就变成了另一个美人呢，制作真漂亮{:4_187:}

绿叶清舟 发表于 2022-6-29 21:02

制作漂亮，欢迎高手常来玩

小辣椒 发表于 2022-6-29 21:48

欣赏精彩的制作{:4_199:}

查看完整版本: 你在我心里下了一场雨 (DJ快猫版) - 韩小欠