论坛首页 › 播放器版 › 今生的爱给了你一个 (对唱版) - 阿杰.【倒影】

亚伦影音工作室 发表于 3 天前

今生的爱给了你一个 (对唱版) - 阿杰.【倒影】

本帖最后由 亚伦影音工作室 于 2026-10-4 20:08 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin: 0px -200px;width: 1186px;height: 1280px;background: #000 ;position: relative;z-index: 1;overflow: hidden;font-family: "Ma Shan Zheng","鍗庢枃琛屾シ","SimHei", "Arial", "sans-serif";}
#pa {margin: 0px0px;
      width: 100%;
      height: 100%;
      overflow: hidden;position: absolute;
   
}
#tu{ width: 105%;margin-left: -2.5%;
      height: 55%; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4d4d63a058b016b6676f94c0ae1eaaa7.jpg)no-repeat center/cover;
    }
#reflect { width: 105%;margin-left: -2.5%;margin-top: -6px;
      height: 55%; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4d4d63a058b016b6676f94c0ae1eaaa7.jpg)no-repeat center/cover;
    filter: url(#water)blur(1px);transform: rotateX(180deg)
}
.lyricDisp{transition:.3s all ease;text-align:center;color:#000;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);line-height: 50px;--bg:linear-gradient(90deg, #e56420, #ff0000, #000, #800000, #ff0000)}
.lyricDisp:first-child{font-size:1.5em;color:#00aa00;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;text-align:center;line-height: 50px;}
.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:10%;height:100%;color:transparent;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);background: var(--bg);-webkit-background-clip: text;text-align:left;}
@keyframes bgMove1{from{width:0%;}to{width:100%;}}@keyframes bgMove0{from{width:0%}to{width:100%;}}
.LRCShow{position:absolute;left:52%;top: 25%;width:53%;font-weight:390;font-size:1.8em;z-index: 9;}

#player {position:absolute;top: 62%;z-index: 99;
            left: 78%;
width: 160px;
height: 160px;
display: grid;cursor:pointer;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
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);
}
.stop #player{animation-play-state: paused;}
#fullscreen{border-radius: 4px;position: absolute;
color:#fff;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 25px;font-weight: 100;
border: none;
cursor: pointer;top: 5px;left: 8%;
}
</style>
<div id="papa">
<div id="fullscreen" title="灞忓睍妯″紡">全屏欣赏</div>
<div class="LRCShow"></div>
<div id="testImg" >
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>
<div id="pa">
<div id="tu"></div>

<svg width="100%" height="55%" id="reflect">
<filter id="water" >
    <feTurbulence type="fractalNoise" baseFrequency=".008 .05" numOctaves="3" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="720" dur="1.5s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
</div>
</div>
<script type="text/javascript">
var lrcPlayerM=function(){return this.init.apply(this,arguments)};lrcPlayerM.prototype={constructor:lrcPlayerM,init:function(opts){this.showLrcObj=document.querySelector('.LRCShow');this.player=document.getElementById('player');this.image=document.getElementById('testImg');this.reflect=document.getElementById('reflect');this.gclines=new Array();this.slines=typeof opts.showLines==='number'?opts.showLines:1;for(k=0;k<this.slines;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';if(this.slines==1&&k==1)this.gclines.style.textAlign='center';this.showLrcObj.appendChild(this.gclines)}this.handleLrc(opts.lrcDoc);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();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;this.play()});this.mObj.addEventListener('playing',function(){that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){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(that.idx>=that.lrcVec.length)return;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)}for(n=1;n<that.slines;n++){if(that.idx+n>=that.lrcVec.length){that.gclines.innerHTML="\u3000"}else{that.gclines.innerHTML=that.lrcVec}}that.idx++}});this.player.onclick=function(){if(that.mObj.paused){that.mObj.play();that.image.classList.remove('stop');that.reflect.unpauseAnimations()}else{that.mObj.pause();that.image.classList.add('stop');that.reflect.pauseAnimations()}};      try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}

</script>

<script type="text/javascript">
let lrctxt = `今生的爱给了你一个
出品：亚伦影音工作室
春去秋来花开又花落
时光匆匆似水流过
寂寞身影在夜色穿梭
寻找着那温暖的角落
走过那熟悉的小巷口
回忆如潮涌上心头
那年与你分别的时候
泪水模糊了我的眼眸
春去秋来花开又花落
孤单的我独自在漂泊
心中的爱如风中花朵
不知何时才能再结果
春去秋来花开又花落
孤单的我独自在漂泊
时光能否将爱来雕琢
让我们不再受折磨
走过那熟悉的小巷口
回忆如潮涌上心头
那年与你分别的时候
泪水模糊了我的眼眸
春去秋来花开又花落
孤单的我独自在漂泊
心中的爱如风中花朵
不知何时才能再结果
春去秋来花开又花落
孤单的我独自在漂泊
时光能否将爱来雕琢
让我们不再受折磨

`;
var opts = {
        lrcDoc:lrctxt,                //        瀛樻斁lrc姝岃瘝鐨勫彉閲忓悕
        audioURL:"http://music.163.com/song/media/outer/url?id=3413161162.mp3",        //        姝屾洸閾炬帴
        showLines:6                                //        鏄剧ず琛屾暟锛屽彲閫夛紝榛樿涓�1琛�
};
new lrcPlayerM(opts);

let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
               papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
</script>

醉美水芙蓉 发表于 3 天前

亚伦老师好久不见！

醉美水芙蓉 发表于 3 天前

欣赏亚伦老师精美音画！

klxf 发表于 3 天前

本帖最后由 klxf 于 2026-10-4 21:04 编辑

好听好看，谢谢分享，祝亚伦老师国庆长假快乐

查看完整版本: 今生的爱给了你一个 (对唱版) - 阿杰.【倒影】