亚伦影音工作室 发表于 2022-11-3 06:41

结局已经不重要(致谢“起个网名好难”老师)两行卡拉OK字幕

本帖最后由 亚伦影音工作室 于 2022-11-3 09:12 编辑 <br /><br /><style type="text/css">
.lyricDisp{font: bold 2em悟空大字库, sans-serif; transition:.3s all ease;}
#lrcDisp0{color:#000080;font: bold 2.2em悟空大字库, sans-serif;float:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;-webkit-text-stroke:1px #ffffff;}
#lrcDisp0::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;content:attr(data-lrc);white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState)}
#lrcDisp1{color:#000080;font-size:2em;float:right;filter:drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:15%;bottom:10px;width:80%;height:100px;margin:16px auto position:relative;}
#rdisk{position:absolute;left:20px;bottom:20px;animation:circleSmall2 3s linear infinite;border-radius: 50%;animation-play-state:paused;}@keyframes circleSmall2{0%{transform: rotateX(45deg) rotateY(20deg) rotate(360deg);} }

        #hWindow         {
                width:1024px;
                height:600px;
                bbbackground-image:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d3868b1ed0e96352cba2cf45b7e2563.jpg);
                bbbackground-size:cover;
                background-color:#ccf;font-size:18px;
                bbbborder:thick brown ridge;
                position:relative;
                margin:10px-200px;
                overflow:hidden;
                border-radius:0px;
box-shadow:0px 0px 2px black;
        }
        #curp        {
                width: 100%;
                height:100%;
                background-image:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ae665217dd73271c4d74891c88fdb588.png);
                background-size: cover;
                transform-origin: center;
                position:absolute; top:0px; left:0px;
        }
#mtitle        {
                -webkit-background-clip:text;
                -webkit-text-fill-color:transparent;
                -webkit-text-stroke:1px rgb(0,71,171); background-image:url(https://z3.ax1x.com/2021/07/10/WSvNo4.gif);line-height:180%;
                font:bold 2.5em 华文隶书;
        }
</style>

<div id="hWindow">
        <div id="curp"></div>
<div style="width:900px; height:600px;position:relative;margin-top: 20px;
        margin-left: 30px;overflow:hidden;">
<span id="mtitle" >结局已经不重要</span>
</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">
            <div class="lyricDisp" id="lrcDisp0"></div><br style="clear:left;">
            <div class="lyricDisp" id="lrcDisp1"></div>
    </div>
</div>

<textarea id="lrc_content" style="visibility:hidden;">
结局已经不重要
作词：轻云望月/且行且歌
作曲：轻云望月
编曲：DJ月之歌音乐室
混音：Y 爱 华
制作：亚伦
出品:亚伦影音工作室
源码制作非本人
走过的路，脚知道
爱过的人，心知道
自从和你邂逅那秒
你的温柔再难忘掉
牵过的手，总萦绕
吻过的唇，梦难消
虽然无缘相伴到老
仍然把你深爱心潮
结局已经不再重要
你若幸福我便安好
虽然相聚千里之遥
对你的爱不减分毫
结局已经不再重要
曾经拥有也是美好
只愿来生能早遇到
我会把你紧紧拥抱
牵过的手，总萦绕
吻过的唇，梦难消
虽然无缘相伴到老
仍然把你深爱心潮
结局已经不再重要
你若幸福我便安好
虽然相聚千里之遥
对你的爱不减分毫
结局已经不再重要
曾经拥有也是美好
只愿来生能早遇到
我会把你紧紧拥抱
结局已经不再重要
曾经拥有也是美好
只愿来生能早遇到
我会把你紧紧拥抱
我会把你紧紧拥抱
</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;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+"\u3000\u3000\u3000"}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">
(function()        {
var imgSet = [
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f0d4fb3754cd09828a7502f5c28db807.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e42b036a227f34cb4f5232869dd73c0f.jpeg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2bf0f99b78a6f5aff95b07bec2a742bc.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/565073294e63c0bc59cb263e53457c4c.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fc689ddcf9633cf5f4043439d404fbfd.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/105ef331ca0212efe19119bcf5a9e83a.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview_jpg/ec6883f8df57252d9f2727e38651292b.jpg"

];

var keyFrames =
        [{transform:'translate(0%,0%)scale(1)', opacity:'0'},
       {transform:'translate(0%,0%)scale(1)', opacity:'1', offset:0.33},
       {transform:'translate(0%,0%)scale(1)', opacity:'1', offset:0.35},
       {transform:'translate(0%,0%)scale(1)', opacity:'1', offset:0.67}];

var EffectTiming = {duration: 8000, fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, curp, aniObj;


        imgBlock = document.getElementById('hWindow');
        curp = document.getElementById('curp');
               
        aniObj = curp.animate(keyFrames, EffectTiming);
        aniObj.pause();
        aniObj.onfinish = () => {
                imgIdx++;
                imgIdx %= imgSet.length;
                       
                imgBlock.style.backgroundSize = "cover";
                imgBlock.style.backgroundImage = "url(" + imgSet + ")";
                curp.style.backgroundImage = "url(" + imgSet + ")";
                       
                lastIdx = imgIdx;
       
                aniObj.play();
        };

        imgBlock.style.backgroundSize = "cover";
        imgBlock.style.backgroundImage = "url(" + imgSet + ")";
        curp.style.backgroundImage = "url(" + imgSet + ")";
        aniObj.play();
       
        var opts = {
                        //        下面4个参数是必须的！
                        lrcTxtID:'lrc_content',
                        lrcShowID:"LRCShow",
                        audioURL:"https://www.qqmc.com/up/kwlink.php?id=247630447&.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);
})();
</script>

起个网名好难 发表于 2022-11-3 09:51

点赞!

同步歌词有色彩变化显得更好。

红影 发表于 2022-11-3 10:30

制作真漂亮。我单位的网有限制，听不了歌曲。先来点赞送花{:4_187:}

起个网名好难 发表于 2022-11-3 11:19

红影 发表于 2022-11-3 10:30
制作真漂亮。我单位的网有限制，听不了歌曲。先来点赞送花

上班还带着看帖啊， 真忙{:5_106:}

醉美水芙蓉 发表于 2022-11-3 11:46

马黑黑 发表于 2022-11-3 12:53

花潮格式同步机制也有多句歌词的早期版本（三句版）

红影 发表于 2022-11-3 16:35

起个网名好难 发表于 2022-11-3 11:19
上班还带着看帖啊， 真忙

空的时候就偷偷溜上来了啊，反正也没人知道我在电脑前忙什么，顺便看看论坛也没啥{:4_173:}

起个网名好难 发表于 2022-11-3 18:09

红影 发表于 2022-11-3 16:35
空的时候就偷偷溜上来了啊，反正也没人知道我在电脑前忙什么，顺便看看论坛也没啥

https://img0.baidu.com/it/u=317727890,1836987756&fm=253&fmt=auto&app=138&f=GIF?w=220&h=220

红影 发表于 2022-11-3 22:00

起个网名好难 发表于 2022-11-3 18:09


明天要外出了，想偷偷溜上来也不可能了{:5_113:}

起个网名好难 发表于 2022-11-3 22:02

红影 发表于 2022-11-3 22:00
明天要外出了，想偷偷溜上来也不可能了

手机上随便看，没人管{:5_106:}

红影 发表于 2022-11-3 22:18

起个网名好难 发表于 2022-11-3 22:02
手机上随便看，没人管

也不能，一个是没时间，一个是不能和外界联系。

起个网名好难 发表于 2022-11-3 22:20

红影 发表于 2022-11-3 22:18
也不能，一个是没时间，一个是不能和外界联系。

啊，这样严格呀
页: [1]
查看完整版本: 结局已经不重要(致谢“起个网名好难”老师)两行卡拉OK字幕