小辣椒 发表于 2024-1-16 12:14

一半疯了一半算了 （套用难难的代码玩一个）


<style>
.lrcShow{font:bold 3em 楷体,楷体_GB2312;position:absolute;width:80%;height:2em;bottom:0px;left:15%;color:hsl(60,100%,40%);filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:darkred;background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;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%;}}
#outBlk        {width:1000px;height:550px; position:relative;margin:80px auto 40px calc(50% - 550px);
        box-shadow:3px 3px 8px darkgray;
        overflow:hidden;border-radius:24px;
}
#mBox        {width:3000px;height:550px;position:absolute; left:0px;animation: mLeft 28.8s infinite linear;}
.mPic        {width:1000px;height:550px;float:left;background:url(https://i.mp3.wf/view.php/2cb4efa33a397d0cdc0bdbebe23b2372.gif) no-repeat center/cover; }
@keyframes mLeft { to { left: -1920px; }}
</style>

<div id="outBlk">
        <div id="mBox">
                <div class="mPic"></div>
                <div class="mPic" style="transform:scaleX(-1);"></div>
                <div class="mPic" ></div>
        </div>
        <div class="lrcShow" data-lrc="点击启动播放"></div>
</div>
<script>
{
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.querySelector('.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(/:/);_0=(+ta)*60+(+ta);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_0,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;this.play()});this.mObj.addEventListener('play',function(){that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}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)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.lrcShowObj.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}

var lrctxt = `
一半疯了一半算了
熙熙攘攘这命运的道场
谁曾燃起希望烧一片空旷
名利叫我迷惘
现实多肮脏
渐把真心去换成伪装
就怪那酒杯太浅 敬不了来日方长
巷子太短 走不到白发苍苍
人在世 半是运气 半是注定
成王败寇岁月证
不过一刹似流萤
就怪那岁催人老 贪不起一如既往
笑谈风霜 留一副冠冕堂皇
无奈我
半是大醉
半是眼泪
情仇恨爱里徘徊
醒觉以后皆梦碎
谁亦有过盛开心里希望
亦曾满载信念追赶于远方
多少心的滚烫开不出花香
有梦的人也许最迷茫
笑道生死都有命
别理他风声雨声
纸醉金迷也终于一天冷清
这一生一半疯了 一半算了
不是年少不疯狂 只是岁月太荒唐
雪月风花中进睡
弹指间光阴似水
谁曾年少
春风得意
舍我有谁
这一生一半疯了 一半算了
再对烈酒诉衷肠 只能说说旧时光
笑道生死都有命
别理他风声雨声
纸醉金迷也终于一天冷清
这一生一半疯了 一半算了
不是年少不疯狂 只是岁月太荒唐
雪月风花中进睡
弹指间光阴似水
谁曾年少
春风得意
舍我有谁
这一生一半疯了 一半算了
再对烈酒诉衷肠 只能说说旧时光
`;
//       
var opts = {
    lrcTxt:lrctxt,
    audioURL:"https://i.mp3.wf/view.php/860477b45d4808a21ef8d7bfdc739bef.mp3",
}
new lrcPlayerY(opts);
}
</script>

小辣椒 发表于 2024-1-16 12:15

谢谢难难的代码，套用玩一个，不知道有没有差错，反正看看在动{:4_170:}

小辣椒 发表于 2024-1-16 12:16

就把歌词位置移动了前面一点，发现歌词有点长

起个网名好难 发表于 2024-1-16 12:25

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

小辣椒 发表于 2024-1-16 12:27

起个网名好难 发表于 2024-1-16 12:25


哈哈，难难来了，小辣椒还没有吃饭，中午先玩一个，马上准备去吃饭了，谢谢难难了。。。

小辣椒 发表于 2024-1-16 12:29

亚伦的音乐 歌词，小辣椒现成的，谢谢亚伦@亚伦

起个网名好难 发表于 2024-1-16 12:29

小辣椒 发表于 2024-1-16 12:27
哈哈，难难来了，小辣椒还没有吃饭，中午先玩一个，马上准备去吃饭了，谢谢难难了。。。

https://5b0988e595225.cdn.sohucs.com/images/20180713/b235b0a4b0fc4602990a02d1f58fd3a4.gif

亦是金 发表于 2024-1-16 12:41

问好小辣椒！速度赛张飞！点赞！{:4_187:}

樵歌 发表于 2024-1-16 13:01

速度！挺好的{:4_187:}

四海八荒 发表于 2024-1-16 13:06

我这里今天刚好下大雪了呢。

梦油 发表于 2024-1-16 15:12

移动的雪景真是美极了。

红影 发表于 2024-1-16 15:22

漂亮，欣赏亲爱的好帖{:4_199:}

红影 发表于 2024-1-16 15:23

这个还好是横向的图图，不过还是能看出反向拼接的对称部分呢{:4_173:}

醉美水芙蓉 发表于 2024-1-16 16:41

千羽 发表于 2024-1-16 18:56

好美的雪景，好像还是夜晚的雪景{:4_187:}

千羽 发表于 2024-1-16 18:58

小辣椒好快啊，昨晚看到了黑黑老师的无缝衔接图片的代码{:4_187:}

千羽 发表于 2024-1-16 18:59

好清爽的美好感觉，{:4_173:}

辫子哥哥 发表于 2024-1-20 06:42

难难素谁？{:4_189:}
页: [1]
查看完整版本: 一半疯了一半算了 （套用难难的代码玩一个）