一个人伤心一个人哭(DJ 版)
<style type="text/css">.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.2em;}
.lyricDisp:nth-child(1){color:#800080;--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(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);-webkit-text-stroke:1px #800000;-webkit-background-clip: text;text-align:center;font-size:2.2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:15%;bottom:10px;width:100%;height:100px;margin:16px auto position:relative;}#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:1124px;
height:620px;
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-220px;
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" style="position:absolute;left:15%;bottom:10px;" >
<div class="lyricDisp">亚伦影音工作室</div><div class="lyricDisp"></div>
<audio src="https://www.qqmc.com/up/kwlink.php?id=247542516&.mp3" id="mplay"loop >
</audio>
</div>
</div>
<textarea id="lrc_content" style="visibility: hidden;">
一个人伤心一个人哭(DJ 版)
演唱：大美
词：宋亚永
曲：木易
OP：海酝文化
（未经著作权人许可不得翻唱翻录或使用）
我一个人伤心一个人哭
这颗心已被你伤的麻木
只怪自己不该爱你入骨
才会输的体无完肤
我一个人伤心一个人哭
有谁能看到我的无助
原来爱你是我今生劫数
最后注定万劫不复
我来到你曾走过的路
回忆从前泪湿双目
若不是当初判断失误
怎会沦落如此地步
对你的爱你是否清楚
无怨无悔为你付出
为爱压上了所有赌注
你怎么忍心让我输
我一个人伤心一个人哭
这颗心已被你伤的麻木
只怪自己不该爱你入骨
才会输的体无完肤
我一个人伤心一个人哭
有谁能看到我的无助
原来爱你是我今生劫数
最后注定万劫不复
对你的爱你是否清楚
无怨无悔为你付出
为爱压上了所有赌注
你怎么忍心让我输
我一个人伤心一个人哭
这颗心已被你伤的麻木
只怪自己不该爱你入骨
才会输的体无完肤
我一个人伤心一个人哭
有谁能看到我的无助
原来爱你是我今生劫数
最后注定万劫不复
我一个人伤心一个人哭
这颗心已被你伤的麻木
只怪自己不该爱你入骨
才会输的体无完肤
我一个人伤心一个人哭
有谁能看到我的无助
原来爱你是我今生劫数
最后注定万劫不复
最后注定万劫不复
</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 imgSet =[
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview_jpg/ec6883f8df57252d9f2727e38651292b.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4cb41dacbb046d10732f324ae909bfc7.jpg",
"https://img-baofun.zhhainiao.com/fs/f7e75d008c745d7996042426e7af3e6c.jpg",
"https://img-baofun.zhhainiao.com/fs/ec6f1143509105c52b475fb2cb9bcc73.jpg",
"https://img-baofun.zhhainiao.com/fs/0b52f0a14a42b5a27908b8fd529751aa.jpg",
"https://img-baofun.zhhainiao.com/fs/68d07469d6053187a0c52d94c047b4ed.jpg",
"https://img-baofun.zhhainiao.com/fs/7e794b6a488fb41070c5f7b88df14cfc.jpg",
"https://img-baofun.zhhainiao.com/fs/6ded602cf20b1527aa3e800d57bf96ff.jpg"
];
var keyFrames =
[{transform:'scale(0)rotate(360deg)', opacity:'1'},
{transform:'scale(.7)', opacity:'1', offset:0.3},
{transform:'scale(1)', opacity:'1', offset:.4},
{transform:'scale(1)', opacity:'1', offset:.6},
{transform:'scale(.7)', opacity:'1', offset:.8},
{transform:'scale(0)rotate(-360deg)', opacity:'1', offset:1}
];
var EffectTiming = {duration: 10000, 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://www.qqmc.com/up/kwlink.php?id=247542516&.mp3",
audioCtrl:'rdisk'
};
new lrcPlayer2(opts);
</script>
欣赏精美音画佳作！ 同步歌词漂亮！我认为单行歌词就够了。 这个2排歌词的模式以前有过，我也是做过，但界面要大的才感觉不挤
那个时候还没有现在的逐字逐句的同步制作
老师的播放器都做得好看好听，欣赏问好！{:4_204:} https://img2.baidu.com/it/u=2405492090,3946827899&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500 好漂亮，歌词同步好看，里面的美人也选得都很漂亮。欣赏阿伦老师好帖{:4_187:}
页:
[1]