亚伦影音工作室 发表于 2026-4-1 16:39

郭玲 - 苦乐人生 (DJ何鹏版)

本帖最后由 亚伦影音工作室 于 2026-4-1 20:20 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin:30px -220px;width: 1286px;height: 720px;background:#1a2933 url("") no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","SimHei", "Arial", "sans-serif";--state:running;}
#pa {margin:150px 74px;width: 600px;height: 420px;position: relative;z-index: 1;transform: perspective(600px) rotateY(10deg)rotatex(0deg);overflow:hidden;}

#photos img{float:right;width:600px;height: 420px;position:relative;LEFT:0px;top:0px;overflow:hidden;z-index: 1;}

#photos {position: absolute;z-index:1; width: calc(800% * 9);
            opacity: 1;animation:animate20s linear infinite;}

#paa{margin:-570px 620px;width: 600px;height: 420px;position:relative;z-index: 1;transform: perspective(600px) rotateY(170deg)rotatex(0deg);overflow:hidden;}

#photoss img{float:right;width:600px;height: 420px;position:relative;LEFT:0px;top:0px;overflow:hidden;z-index: 1;}

#photoss{position: absolute;z-index:1; width: calc(800% * 9);
               opacity: 1;
                animation:animate20s linear infinite;}

   
    @keyframes animate {
         0%,20% {      right:-800%;}
      25%,30% {       right: -700%; }
      35%,40% {      right: -600%;}
      45%,50% {       right:-500%; }
      55%,60% {      right:-400%; }
      65%,70% {      right:-300%; }
      75%,80% {       right:-200%; }
      85%,90% {      right:-100%;}
       95%,100% {      right: 0%;}
   }
#player {position:absolute;top: 75%;z-index: 98;
            left: 45%;
width: 150px;
height: 150px;
display: grid;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        width: 30%;
        height: 30%;
display: grid;
        place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
        #progressBar{width:50%;background:#eee;position: absolute;border-radius: 20px;cursor: pointer;top: 94%;z-index: 99;
            left: 25%;}
#playProgressBar{position: relative;left:0;background:ff0000;height:4px;width:100%;border-radius: 20px; cursor: pointer;}
.now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 4px;border-radius: 20px;
      width: 100%; cursor: pointer;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 12px;margin: -4px -2px;
      height: 12px;border-radius: 20px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 14px sans-serif;margin: -40px 0%;position: absolute;
       }
.end{color: #fff; font: 400 14px sans-serif;margin: -40px 0%;right:0px;   position: absolute;}
        #wrapper {
                position: absolute;
                padding: 10px;
                font-weight:300;font-size:3.5em;
                filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
      width: 100%;left: 50%;transform: translateX(-50%);z-index: 12;text-align: center;
                bottom: 565px;
        }
        .char {
                display: inline-block;
                padding: 0 2px;
                opacity: 0;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
        }
        audio { position: absolute; left: 160px; top: 20px; }
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 0);
                        opacity: 1;
                }

        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg);}

        }
        .stop .char{animation-play-state: paused;}
</style>
<div id="papa">
<div id="pa" >
<divid="photos" >
<img src="https://img3.oldkids.cn/upload/2020/10/26/photo_20201026181006270.jpg" />
<img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026181006062.jpg" />
<img src="https://img4.oldkids.cn/upload/2020/11/17/photo_20201117201402259.jpg" />
<img src="https://img4.oldkids.cn/upload/2020/10/26/photo_20201026164005020.jpg" />
<img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026181951612.jpg" />
<img src="https://img3.oldkids.cn/upload/2020/11/25/photo_20201125103720576.jpg" />
<img src="https://img2.oldkids.cn/upload/2020/11/17/photo_20201117194956297.jpg" />
<img src="https://img1.oldkids.cn/upload/2020/10/26/photo_20201026181951515.jpg" />
<img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026194521472.jpg" />
</div>
</div>
<divid="paa">
<divid="photoss">
<img src="https://img3.oldkids.cn/upload/2020/10/26/photo_20201026181006270.jpg" />
<img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026181006062.jpg" />
<img src="https://img4.oldkids.cn/upload/2020/11/17/photo_20201117201402259.jpg" />
<img src="https://img4.oldkids.cn/upload/2020/10/26/photo_20201026164005020.jpg" />
<img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026181951612.jpg" />
<img src="https://img3.oldkids.cn/upload/2020/11/25/photo_20201125103720576.jpg" />
<img src="https://img2.oldkids.cn/upload/2020/11/17/photo_20201117194956297.jpg" />
<img src="https://img1.oldkids.cn/upload/2020/10/26/photo_20201026181951515.jpg" />
<img src="https://img2.oldkids.cn/upload/2020/10/26/photo_20201026194521472.jpg" />
</div>
</div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<divid="progressBar">
<spanclass="start"></span>
<divid="playProgressBar">
<spanclass="now"></span>
</div>
<spanclass="end"></span>
</div>

<div id="testImg" >
<div id="wrapper"></div>
</div>
</div>
<audio id="aud" src="https://img1.oldkids.cn/upload/2026/03/21/blog_260848378_20260321165357062.mp3" loop autoplay ></audio>

       
<script>

// Audiotimeupdate
                        aud.addEventListener("timeupdate",function(){
                               
                                ///
                                var percent= aud.currentTime / aud.duration
                               
                                //,*,100%
                                var sp = 600 / 100 ;
                               
                                //width
                                var swidth =(percent * 100 * sp) + "px";
                                console.log(percent*100,swidth)
                               
                                //
                                document.getElementById("playProgressBar").style.width = swidth;
                                const now = document.querySelector('.now')//
progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    now.style.width = p.toFixed(3) * 100 + '%'
})

        progressBar.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / progressBar.offsetWidth; }//})
                                //2λС
                                document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
        })                       
                       
                //       
        const start = document.querySelector('.start')
const end = document.querySelector('.end')

function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
               
console.dir(aud);

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

image=document.getElementById('testImg');

player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',image.classList.remove('stop'),photos.style.animationPlayState = 'running',photoss.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused',image.classList.add('stop'),photos.style.animationPlayState = 'paused',photoss.style.animationPlayState = 'paused');


</script>
<script>
       
const gc = `郭玲 - 苦乐人生 (DJ何鹏版)
作词：刘爽
作曲：何鹏
演唱：郭玲
☆★Lrc编辑 亚伦★☆
☆★☆协编 亚伦☆
出品:亚伦影音工作室
月有阴晴圆缺
海有潮起潮落
花有花谢花开
人有悲欢离合
人生是一条路
平坦中有坎坷
风雨中前行
泥泞中跋涉
人生是一首歌
谱写喜怒哀乐
人生是一杯酒
有辣也有苦涩
知足中有快乐
忙碌中有收获
经历了成长了
什么都懂得
哭过笑过人生苦与乐
没有爬不上的山没有过不去的河
认真对待每一天的人间烟火
短短几十年何必想太多
爱过恨过人生苦与乐
守好心走好路不迷失自我
认真对待每一天的日出日落
岁月深处寻找完美生活
(Music)
月有阴晴圆缺
海有潮起潮落
花有花谢花开
人有悲欢离合
人生是一条路
平坦中有坎坷
风雨中前行
泥泞中跋涉
人生是一首歌
谱写喜怒哀乐
人生是一杯酒
有辣也有苦涩
知足中有快乐
忙碌中有收获
经历了成长了
什么都懂得
哭过笑过人生苦与乐
没有爬不上的山没有过不去的河
认真对待每一天的人间烟火
短短几十年何必想太多
爱过恨过人生苦与乐
守好心走好路不迷失自我
认真对待每一天的日出日落
岁月深处寻找完美生活
(Music)
☆★谢谢欣赏★☆
=End=`;

      const gcAr = lrc2HC(gc);
      let curkey = 0, isSeeking = false;

      aud.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(aud.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
      };

      aud.onended = () => {
                curkey = 0;
                aud.play();
      }

      aud.onseeked = () => calcKey();

      function lrc2HC(text) {
                let lrcAr = [];
                let ar = text.trim().split('\n');
                ar.sort();
                let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        if(reg.test(item)) {
                              let result = item.match(reg);
                              let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                              lrcAr.push(.trim()]);
                        }
                });
                return lrcAr ? lrcAr : ;
      };

      function calcKey() {
                for (let j = 0; j < gcAr.length; j++) {
                        if (aud.currentTime <= gcAr) {
                              curkey = j - 1;
                              break;
                        }
                }
                if (curkey < 0) curkey = 0;
                if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
                let time = gcAr?. ?? 0 - gcAr;
                isSeeking = false;
                showLrc(gcAr, wrapper, time);
      }

      function showLrc(str, targetElm, time) {
                if(isSeeking) return;
                targetElm.innerHTML = '';
                const chars = str.split('').map(c => c === ' ' ? ' ' : c);
                const frg = document.createDocumentFragment();
                chars.forEach((char, idx) => {
                        const span = document.createElement('span');
                        span.innerHTML = char;
                        span.classList.add('char');
                        const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                        const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                        span.style.cssText += `
                              color: #${Math.random().toString(10).substring(2,8)};
                              --x: ${x}px;
                              --y: ${y}px;
                              --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
      }
</script>

梦油 发表于 2026-4-1 16:51

欣赏佳作，问候亚伦。

朵拉 发表于 2026-4-1 17:33

这个别致，欣赏学习{:4_204:}

杨帆 发表于 2026-4-1 17:41

好听好看，制作精彩，效果漂亮，谢谢亚伦老师分享{:4_180:}

红影 发表于 2026-4-1 21:50

奇妙的效果。欣赏亚伦老师好帖{:4_199:}
页: [1]
查看完整版本: 郭玲 - 苦乐人生 (DJ何鹏版)