回家,特效动画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

klxf 发表于 2025-4-28 00:23:50

回家

本帖最后由 klxf 于 2025-4-28 10:18 编辑 <br /><br /><div style="WIDTH: 1280px;height:740px; POSITION: relative;left: 80px; TOP:130px;">
<video id="vid" autoplay="autoplay" controlslist="nodownload" loop="loop" oncontextmenu=”return false” style="position: relative;width:100%;height:100%;object-fit: cover;overflow: hidden;z-index: 1;" src="https://cccimg.com/view.php/7acc47fb8adc33690d01b0f8b63b24af.mp4"></video>
<div id="layer" style="position:absolute; left:10%;width:100%;TOP: 30px; height:1.5em;z-index: 1;">
<textarea style="visibility:hidden;" id="lrcContent">
   回家 - 科尔沁夫
   词：于晓峰/尹宏峰
曲：科尔沁夫
那里的风还在吹
风中的故事让人沉醉
那里的雨还在下
雨中的童年忘记回家
那里的树已长大
儿时的我们看着它发芽
那里的花还在吗
闻到那芬芳就想回家
回家回家
回家看看阿爸阿妈
回家回家
回家看看梦中的她
那里的树已长大
儿时的我们看着它发芽
那里的花还在吗
闻到那芬芳就想回家
回家回家
回家看看阿爸阿妈
回家回家
回家看看梦中的她
回家回家
回家看看阿爸阿妈
回家回家
回家看看梦中的她
回家看看梦中的她
</textarea></div></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript">
var lrcPlayer=function(){return this.init.apply(this,arguments)};
lrcPlayer.prototype={
constructor:lrcPlayer,
init:function(opts){
   this.lrcVec=new Array();
   this.lyricTxtObj=document.getElementById(opts.lrcTxtID);
   lyricTxt=this.lyricTxtObj.innerHTML;
   this.showLrcObj=document.getElementById(opts.lrcShowID);
   this.showLrcObj.style.fontSize=opts.gczh?opts.gczh:'1em';
   this.showLrcObj.style.fontFamily=opts.gczt?opts.gczt:'隶书';
   this.showLrcObj.style.fontWeight=opts.gcct?'bold':'normal';
   this.showLrcObj.style.textAlign=opts.dqfs?opts.dqfs:'center';
   this.showLrcObj.style.color=opts.gcys1?opts.gcys1:'gray';
   this.showLrcObj.style.cursor='pointer';
   gcys=opts.gcys?opts.gcys:'red';
   sMode=opts.showMode?opts.showMode:0;
   this.sLine=opts.gchs?opts.gchs:1;
   this.isLoop=opts.playLoop?opts.playLoop:false;
   this.handleLrc(lyricTxt);
   this.prepareShow(sMode,opts.shys);
   this.genPlayer(opts.audioURL);
},
prepareShow:function(sMode,shys){
   for(k=0;k<this.sLine;k++){
         sItem=document.createElement("span");
         sItem.style.display="block";
         sItem.style.marginBottom='4px';
         if(k==0){
            sItem.style.color=gcys;
            sItem.style.fontSize='120%';
            if(shys){
               shadowStr='0 -1px 0px '+shys+',';
               shadowStr+='-1px 0 0px '+shys+',';
               shadowStr+='1px 0 0px '+shys+',';
               shadowStr+='0 1px 0px '+shys;
               sItem.style.textShadow=shadowStr;
            }
         }
         if(sMode!=0)sItem.style.textAlign="left";
         this.showLrcObj.appendChild(sItem);
   }
   if(sMode!=0){
         this.showLrcObj.style.writingMode='tb-rl';
         this.showLrcObj.style.msWritingMode='tb-rl';
         this.showLrcObj.style.mozWritingMode='vertical-rl';
         this.showLrcObj.style.webkitWritingMode='vertical-rl';
   }
},
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}\]/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=parseFloat(parseInt(ta,10)*60+parseInt(ta,10)+'.'+ta,10);
               if(this.lrcVec.length==0&&_t!=0){
                     this.lrcVec.push();
               }
               this.lrcVec.push();
            }
         }
   }
   this.lrcVec.sort(function(a,b){return(a-b)});
},
genPlayer:function(mUrl){
   this.mObj=document.createElement("audio");
   this.mObj.loop=false;
   this.mObj.muted=false;
   this.mObj.src=mUrl;
   this.mObj.controls=true;
   this.mObj.style.opacity=0.3;
   this.showLrcObj.appendChild(this.mObj);
   this.idx=0;
   this.mObj.onended=()=>{
         this.idx=0;
         this.lyricTxtObj.innerHTML='';
         if(this.isLoop){
            this.mObj.play();
            document.getElementById('vid').play(); // 同步播放视频
         }else{
            this.mObj.controls=true;
         }
   };
   this.mObj.onplaying=()=>{
         this.mObj.controls=false;
         document.getElementById('vid').play(); // 同步播放视频
   };
   this.mObj.onerror=()=>{
         console.log("audio wrong, remove play start event");
         this.showLrcObj.style.display='none';
         this.showLrcObj.removeChild(this);
   };
   this.mObj.ontimeupdate=()=>{
         if(this.idx<this.lrcVec.length){
            if(this.mObj.currentTime>this.lrcVec){
               _idx=this.idx;
               _spans=this.showLrcObj.getElementsByTagName('span');
               for(k=0;k<this.sLine;k++){
                     _spans.innerHTML=(_idx+k)>=this.lrcVec.length?"":this.lrcVec;
               }
               this.idx++;
            }
         }
   };
   this.showLrcObj.onclick=()=>{
         const video = document.getElementById('vid');
         if(this.mObj.paused){
            this.mObj.play();
            video.play(); // 同步播放视频
         }else{
            this.mObj.pause();
            video.pause(); // 同步暂停视频
         }
   };
   try{
         this.mObj.play();
         document.getElementById('vid').play(); // 同步播放视频
   }catch(err){
         console.log(err.message);
   }
},
stopMusic:function(){
   this.mObj.pause();
   this.mObj.controls=false;
   this.mObj=null;
   document.getElementById('vid').pause(); // 同步暂停视频
}
};

var opts = {
lrcTxtID:'lrcContent', // 放置LRC的textarea标签的ID
lrcShowID:"layer", // 显示歌词的标签ID
audioURL:"https://cccimg.com/view.php/605b41fcab4bf31a5e1c2f3dec6a2f37.mp3", // 音频文件URL
gczh:'32px', // 歌词字体大小
gczt:'华文行楷', // 歌词字体
gcys:'#87CEEB', // 当前歌词显示颜色
gcys1:'Brown', // 后续歌词显示颜色
shys:'#DEF70B', // 歌词描边色
gcct:true, // 歌词是否加粗
dqfs:'center', // 歌词显示对齐方式
showMode:0, // 横排(0)或竖排(1)
playLoop:true, // 是否循环播放
gchs: 2 // 显示歌词行数
};

var km = new lrcPlayer(opts);

const xCenter = (el) => {
const rt = el.getBoundingClientRect();
const ww = window.innerWidth;
const ox = (ww - rt.width) / 2 - rt.left;
el.style.transform = `translateX(${ox}px)`;
};
xCenter(document.getElementById('vid'));
</script>

guojingquyuan 发表于 2025-5-8 09:55:46

支持一下，期待更多东西

huanbaokuo 发表于 2025-5-10 22:56:48

支持发布，好帖不容错过

ruyingsuixing 发表于昨天 21:46

支持你们一下下哈

页: [1]

纳兰音画网's Archiver

回家