红影 发表于 2022-10-1 20:27
也许，不加餐会好点。
{:4_180:}
本帖最后由 起个网名好难 于 2022-10-1 20:43 编辑 <br /><br /><style type="text/css">
.lrcShow{font:bold 3em sans-serif;position:absolute;bottom:20px;left:20%;color:white;text-shadow:1px 1px 1px #000;letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}.mCtrl{border:2px solid #000000;border-radius:50%;display:inline-block;width:90px;height:90px;margin:0px;position:absolute;bottom:30px;right:30px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background-image:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png);background-position:0 0;background-size:100% 100%;}.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
#feather {position: absolute; left: 0; top: 0; width: 50px;offset-distance: 0;offset-path: path("M500 -60 Q300 80, 600 200 T900 640");animation: move 8s linear infinite;}
@keyframes move { to { offset-distance: 100%;} }
#outblk {
width:1024px;height:640px; position:relative; margin:100px 16px 32px -200px;
background: #ccc url('https://pic1.imgdb.cn/item/6338118b16f2c2beb1cc3182.jpg') no-repeat center/cover;
padding:16px;
text-align:center;
overflow:hidden;
border-radius:36px;
border:thick pink groove;
}
.mCtrl {
width:40px;height:40px;left:30px;background-image:url(data/attachment/forum/202209/24/224500cco531c1941cynbf.png);
}
</style>
<div id="outblk">
<img id="feather" src="data/attachment/forum/202209/19/072054nefdifokfiaonowf.png" alt="" />
<divclass="lrcShow" data-lrc=''></div>
<divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.showLrcObj=document.getElementById(opts.lrcShowID);this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.getElementsByClassName('lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(lrcs.length==0&&_t!=0){lrcs.push({seconds:0,words:'<span style="font-size:50%;">© cesholl</span>'})}lrcs.push({seconds:_t,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;that.audioCtrl.classList.remove('z360z');this.play()});this.mObj.addEventListener('play',function(){that.audioCtrl.classList.add('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.audioCtrl.classList.remove('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*1000-100)}else{that.showLrc((this.duration-that.lrcVec.seconds)*1000-100)}}}});this.audioCtrl.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
</script>
<script type="text/javascript">
var lrc =`
白狐 --- 雨天/杨蔓
我是一只修行千年的狐
千年修行千年孤独
夜深人静时
可有人听见我在哭
灯火阑珊处
可有人看见我跳舞
我是一介书生独醉江湖
十年寒窗十年苦读
金榜题名时
功名利禄光宗耀祖
洞房花烛后
阴阳相隔人鬼殊途
我爱你时
你正一贫如洗寒窗苦读
离开你时
你正金榜题名洞房花烛
能不能为你再跳一支舞
我是你千百年前放生的白狐
你看衣袂飘飘 衣袂飘飘
海誓山盟都化做虚无
能不能为我再跳一支舞
只为你永别时的那一次回眸
你听仙乐飘飘 仙乐飘飘
今生今世却只能虚度
我是一介书生独醉江湖
十年寒窗十年苦读
金榜题名时
功名利碌光宗耀祖
洞房花烛后
阴阳相隔人鬼殊途
我爱你时
你正一贫如洗寒窗苦读
失去你时
你已烟消云散万劫不复
能不能为你再跳一支舞
我是你千百年前放生的白狐
你听仙乐飘飘 衣袂飘飘
海誓山盟都化做虚无
能不能为我再跳一支舞
只为你永别时的那一次回眸
你听仙乐飘飘 衣袂飘飘
今生今世却只能虚度
能不能为你再跳一支舞
只为你永别时的那一次回眸
你听仙乐飘飘 衣袂飘飘
今生今世却只能虚度
`;
var opts = {
lrcTxt:lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://music.163.com/song/media/outer/url?id=179521.mp3'
};
new lrcPlayerY(opts);
</script>
起个网名好难 发表于 2022-10-1 20:32
本帖最后由 起个网名好难 于 2022-10-1 20:35 编辑
.lrcShow{font:bold 3em sans-serif;position:absolu ...
高人啊！{:4_204:}
东篱闲人 发表于 2022-10-1 20:36
高人啊！
您的LRC歌词是自己做的吗？可能是那歌词有问题，其它都蛮好的。
起个网名好难 发表于 2022-10-1 20:41
您的LRC歌词是自己做的吗？可能是那歌词有问题，其它都蛮好的。
在网上找的，然后用黑黑的那个变化器改的，就改成这样了。。。
东篱闲人 发表于 2022-10-1 20:42
在网上找的，然后用黑黑的那个变化器改的，就改成这样了。。。
那代码是好的没问题
起个网名好难 发表于 2022-10-1 20:44
那代码是好的没问题
{:4_181:}
老头你歌词后面的小数点也是精确的太离谱了'0.60', '《白 狐》',12180
还五位数了
小辣椒 发表于 2022-10-1 20:51
老头你歌词后面的小数点也是精确的太离谱了'0.60', '《白 狐》',12180
整不明白这玩意，俺也就是试试。。。。
这歌，这图，这播放器都是棒棒的，就是歌词同步精确度太高了
老头你看看黑黑的歌词编辑器，你肯定可以的，脑子这么灵的。。。看看再做。
小辣椒 发表于 2022-10-1 20:53
老头你看看黑黑的歌词编辑器，你肯定可以的，脑子这么灵的。。。看看再做。
不瞒师傅，俺就是用他那个编辑器编辑的。。。。
小辣椒 发表于 2022-10-1 20:53
老头你看看黑黑的歌词编辑器，你肯定可以的，脑子这么灵的。。。看看再做。
不对，是用起个网名好难那个编辑的。。。。
东篱闲人 发表于 2022-10-1 20:52
整不明白这玩意，俺也就是试试。。。。
没事，你就先编辑器做一遍就可以了，微调暂时不弄
东篱闲人 发表于 2022-10-1 20:42
在网上找的，然后用黑黑的那个变化器改的，就改成这样了。。。
LRC歌词还是自己做的好
东篱闲人 发表于 2022-10-1 20:56
不对，是用起个网名好难那个编辑的。。。。
难怪会出错
闲言不语 发表于 2022-10-1 20:59
LRC歌词还是自己做的好
梦梦这个最精通
小辣椒 发表于 2022-10-1 21:00
梦梦这个最精通
过奖了，眼花了，不完了。
闲言不语 发表于 2022-10-1 21:03
过奖了，眼花了，不完了。
老前辈的，小辣椒一直佩服你的