愿你
本帖最后由 三月的阳光 于 2023-6-23 11:24 编辑 <br /><br /><style>#papa {margin: 10px -10px;width: 1164px;height: 620px;background: linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),url('https://www.dlbbs.com/data/attachment/forum/202306/23/111920ha66van186awg3zb.jpg')no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;}
.lyricDisp{transition:.3s all ease;text-align:center;color:#000000;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);line-height: 50px;}
.lyricDisp:first-child{font-size:1.5em;color:#fff080;transition:font-size 0.6s;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;text-align:center;line-height: 50px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);}
.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:0%;height:100%;color:#FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);text-align:left;}
@keyframes bgMove1{from{width:0%;}to{width:100%;}}@keyframes bgMove0{from{width:0%}to{width:100%;}}
.LRCShow{position:absolute;left:0%;top: 50px;width:50%;font-weight:990;font-size:1.8em;font-family:仿宋;cursor:pointer;}
</style>
<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.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==2&&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.showLrcObj.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};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>
<!------ 以下为定制部分 ---->
<divid="papa">
<dir class="LRCShow"></div>
</div>
<script type="text/javascript">
let lrctxt = ` 愿你
编辑: 三月的阳光
你是晚风渐息 星河若隐 一场小别离
你是破晓清晨 灿烂眼中的光景
你是时光轻轻哼唱 宛若星辉铺满小巷
黑白的琴键 闪着晨曦的光
愿你的身后 总有力量 愿你成为自己的太阳
愿你永驻时光 爱上彼此 的模样
你眼中的光芒 依旧闪亮 诉说着那些疯狂
有梦想 我来陪你 收藏
你是回忆与爱 叙旧的歌 只唱给我听
你是心底的花 盛开在我的四季
你是信纸上的彩墨 写着我喜欢的词句
心中有了你 眼光绽放欢喜
愿你的身后 总有力量 愿你成为自己的太阳
愿你永驻时光 爱上彼此 的模样
你眼中的光芒 依旧闪亮 诉说着那些疯狂
有梦想 我来陪你 收藏
愿你的身后 总有力量 愿你成为自己的太阳
愿你永驻时光 爱上彼此 的模样
你眼中的光芒 依旧闪亮 诉说着那些疯狂
有梦想 我来陪你 收藏 `;
var opts = {
lrcDoc:lrctxt, // 存放lrc歌词的变量名
audioURL:"http://music.163.com/song/media/outer/url?id=498040739.mp3", // 歌曲链接
showLines:10 // 显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script> 一首《愿你》祝贺自己在东篱注册三周年~~{:9007:}{:9007:} 阳光三周年快乐~~这首歌也是我很喜欢的一首歌{:9001:} 我看看自己的注册时间，好像注册有四周年了。 瞳萤 发表于 2023-6-23 11:27
阳光三周年快乐~~这首歌也是我很喜欢的一首歌
谢谢瞳萤美女~~{:10_402:}
愤怒の葡萄 发表于 2023-6-23 11:29
我看看自己的注册时间，好像注册有四周年了。
葡萄，中午好，那代码学会了没有~~{:10_402:}
愤怒の葡萄 发表于 2023-6-23 11:29
我看看自己的注册时间，好像注册有四周年了。
原来我们是同月同日注册的，只是相差了一年~~{:7_294:}
三月的阳光 发表于 2023-6-23 11:45
原来我们是同月同日注册的，只是相差了一年~~
葡萄也看到了，这个有点缘分的。
三月的阳光 发表于 2023-6-23 11:39
葡萄，中午好，那代码学会了没有~~
代码帖我没有学，我现在也很少玩论坛了。
论坛的很多女坛友都会使用代码帖的，可是我代码帖不会使用。
第一次听这首歌，好听