论坛 › 欢乐水吧 › 我在杨家溪等你（DJ 默涵版）-张怡诺

亚伦影音工作室 发表于 2022-11-3 15:41

我在杨家溪等你（DJ 默涵版）-张怡诺

本帖最后由 亚伦影音工作室 于 2026-3-16 10:49 编辑 <br /><br /><style type="text/css">@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
.lyricDisp{ transition:.3s all ease;font-size:2.2em;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);font-weight: 200;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(90deg, #F32121 32%,#8EE73C 43%,#Ff0000 52%,#091CFD 62%,#36F4B1 75%);-webkit-background-clip: text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:2.2em;font-weight: 200;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:18%;bottom:30px;width:100%;height:100px; font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}#rdisk{position:absolute;left:20px;bottom:10px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}
        #hWindow         {
                width:1024px;
                height:600px;
                bbbackground-image:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/072951cf0f560273bb3331af9a9b4ebd.jpg);
                bbbackground-size:cover;
                background-color:#800000;font-size:18px;
                box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 6px #880000;
                position: relative;
                margin:10px-180px;
                overflow:hidden;
                border-radius:0px;
        }
        #curp        {
                width: 100%;
                height:100%;
                background-image:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/072951cf0f560273bb3331af9a9b4ebd.jpg);
                background-size: cover;
                transform-origin: center;
                position:absolute; top:0px; left:0px;
        }
</style>

<div id="hWindow">
        <div id="curp"></div>
    <div id="rdisk" style="width:80px;height:80px;border: 2px solid #000000;
        background: url('https://365.tf/disk/tf/1667321249.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
    <div id="LRCShow" >
            <div class="lyricDisp">亚伦影音工作室</div><div class="lyricDisp"></div>
         
    </div>
</div>

<textarea id="lrc_content" style="visibility: hidden;">
谁不想活得风风光光-许玲玲
词：高森河
曲：隔壁老王
出品 亚伦影音工作室
尝遍了人间的世态炎凉
回过头皱纹已爬上脸庞
借不到亲朋好友的力量
想得到的只能靠自己闯
中不了泼天富贵的大奖
也留不住最爱的人在身旁
分不清这人心的魑魅魍魉
生活让我遍体鳞伤
谁不想 在人前活的风风光光
走到哪里都能受人敬仰
现实却人模狗样为碎银几两
只能打碎了牙自己扛
谁不想 与爱的人到地老天荒
回家能喝一碗热腾腾的汤
可无奈现实总是先下手为强
人生的道场何时轮到我做庄
中不了泼天富贵的大奖
也留不住最爱的人在身旁
分不清这人心的魑魅魍魉
生活让我遍体鳞伤
谁不想 在人前活的风风光光
走到哪里都能受人敬仰
现实却人模狗样为碎银几两
只能打碎了牙自己扛
谁不想 与爱的人到地老天荒
回家能喝一碗热腾腾的汤
可无奈现实总是先下手为强
人生的道场何时轮到我做庄

</textarea>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div');this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}
</script>

<script type="text/javascript">


var EffectTiming = {duration: 8000, fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, curp, aniObj;

        function initTrun()        {
                imgBlock = document.getElementById('hWindow');
                curp = document.getElementById('curp');
               
                aniObj = curp.animate(keyFrames, EffectTiming);
                aniObj.pause();
                aniObj.onfinish = chg_cur_pic;
                chg_cur_pic();        //my_audio.play();
        }
        function chg_cur_pic()        {
                imgBlock.style.backgroundSize = "cover";
                imgBlock.style.backgroundImage = "url(" + imgSet + ")";
                curp.style.backgroundImage = "url(" + imgSet + ")";
               
                lastIdx = imgIdx;
                imgIdx++;
                imgIdx %= imgSet.length;
               
                aniObj.play();
        }
       
        initTrun();

        var opts = {
                        //        下面4个参数是必须的！
                        lrcTxtID:'lrc_content',
                        lrcShowID:"LRCShow",
                        audioURL:"https://s2.ananas.chaoxing.com/sv-w9/audio/6a/14/68/737947cafcb8d8e109b58aecd498afaa/audio.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);

</script>

红影 发表于 2022-11-3 16:51

背景里的风景和人物都很漂亮，欣赏亚伦老师好帖{:4_187:}

起个网名好难 发表于 2022-11-3 19:06

欣赏、点赞

第二行歌词换个颜色是不是好点。

马黑黑 发表于 2022-11-3 19:15

美就一个字

相约爱晚亭 发表于 2022-11-4 07:40

欣赏音画佳作！

查看完整版本: 我在杨家溪等你（DJ 默涵版）-张怡诺