陋室铭（第一版）

杨帆发表于 2025-4-28 17:25

本帖最后由杨帆于 2025-11-16 17:24 编辑 <br /><br /><div style="WIDTH: 1280px;height:740px; POSITION: relative;margin: 130px 0 0-340px;background: #ccc url('https://pic1.imgdb.cn/item/686eb60658cb8da5c8990eb9.png') no-repeat center/cover; z-index:1;">
<style>#vid { position:absolute;mix-blend-mode: normal; mask: radial-gradient(transparent 5%, red); -webkit-mask: radial-gradient(transparent 5%, red);object-fit: cover;}</style>
<video id="vid" autoplay="autoplay" controlslist="nodownload" loop="loop" mutedsrc="https://video.699pic.com/videos/44/81/71/a_b4dxGYuEZeMc1664448171.mp4" style="WIDTH: 100%;height:100%;left: 0px; TOP:0px;"></video>
<imgsrc="https://cccimg.com/view.php/9dcb5437a7e8ca3436cb1ff15a4cf462.png" style="WIDTH: 70%;height:70%; POSITION: absolute;left: 10%; TOP:-8%;opacity: .9; z-index: 1;"alt="" / >
<div id="layer" style="position:absolute; left:2%;width:50%;TOP: 60%; height:1em;z-index: 1;" title="播放/暂停">
<textarea style="visibility:hidden;" id="lrcContent">
   演唱 - 黄绮珊 (Susan Huang)
词：（唐）刘禹锡
曲：贾轶男
编曲：贾轶男
音乐总监：刘卓
乐团：V Band
键盘：孙梦迪/李海郡
键盘/PGM：尹岳洋
木吉他：金天
电吉他：崔万平
贝斯：李九君
鼓手：卢炜
打击乐：刘效松
和音：张炜/刘芳/关冰效/曾嵘
混音：周天澈混音团队

山不在高有仙则名
水不在深有龙则灵
斯是陋室惟吾德馨

山不在高有仙则名

水不在深有龙则灵
斯是陋室惟吾德馨

苔痕上阶绿草色入帘青

谈笑有鸿儒往来无白丁
可以调素琴阅金经

无丝竹之乱耳无案牍之劳形
南阳诸葛庐西蜀子云亭
孔子云何陋之有

山不在高有仙则名
水不在深有龙则灵
斯是陋室惟吾德馨

</textarea></div></div><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/fe512b5209a0323c0e67c4e79b9495b0.mp3", // 音频文件URL
gczh:'35px', // 歌词字体大小
gczt:'隶书', // 歌词字体
gcys:'#FF1493', // 当前歌词显示颜色
gcys1:'#3CB371', // 后续歌词显示颜色
shys:'gold', // 歌词描边色
gcct:true, // 歌词是否加粗
dqfs:'center', // 歌词显示对齐方式
showMode:0, // 横排(0)或竖排(1)
playLoop:true, // 是否循环播放
gchs: 3 // 显示歌词行数
};

var km = new lrcPlayer(opts);

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

世外桃源 发表于 2025-4-28 20:44

欣赏了

世外桃源 发表于 2025-4-28 20:44

没有加音乐？

红影发表于 2025-4-28 22:35

还有这个歌曲呢，没想到。制作漂亮，欣赏杨帆好帖{:4_199:}

红影发表于 2025-4-28 22:36

这个草庐旁的檐上有滴水动态，内中的人物好像也是动态的呢。
只是图片被弄成半透明的，不是很清晰呢{:4_173:}

梦江南 发表于 2025-4-29 09:21

佳作欣赏点赞！{:4_199:}
歌词第一行，,否则出来的是难难老师的过去网名，也曾年轻。

杨帆发表于 2025-4-29 12:02

世外桃源发表于 2025-4-28 20:44
没有加音乐？

有啊，欢迎朋友观赏{:4_191:}

杨帆发表于 2025-4-29 12:04

红影发表于 2025-4-28 22:36
这个草庐旁的檐上有滴水动态，内中的人物好像也是动态的呢。
只是图片被弄成半透明的，不是很清晰呢{:4_17 ...

是，透明度的设置还需完善{:4_204:}

杨帆发表于 2025-4-29 12:06

梦江南发表于 2025-4-29 09:21
佳作欣赏点赞！
歌词第一行，,否则出来的是难难老师的过去网名，也曾年轻。

江南知道的真多，这是用的你的代码，谢谢江南{:4_204:}

梦江南 发表于 2025-4-29 16:59

杨帆发表于 2025-4-29 12:06
江南知道的真多，这是用的你的代码，谢谢江南

这是难难老师过去的代码。

杨帆发表于 2025-4-29 17:49

红影发表于 2025-4-28 22:36
这个草庐旁的檐上有滴水动态，内中的人物好像也是动态的呢。
只是图片被弄成半透明的，不是很清晰呢{:4_17 ...

去掉遮罩，清晰度好点了{:4_204:}

世外桃源 发表于 2025-4-29 21:06

现在代码发帖，歌曲可以听到了，昨天加了html，音乐不能自动播放

小辣椒 发表于 2025-4-29 22:09

问好杨帆，欣赏精彩的制作{:4_187:}

小辣椒 发表于 2025-4-29 22:10

png图片抠图不够干净，看上去不够美观

小辣椒 发表于 2025-4-29 22:11

感谢杨帆分享{:4_187:}

杨帆发表于 2025-4-29 22:43

世外桃源发表于 2025-4-29 21:06
现在代码发帖，歌曲可以听到了，昨天加了html，音乐不能自动播放

好，欢迎观赏，祝开心{:4_191:}

杨帆发表于 2025-4-29 22:44

小辣椒发表于 2025-4-29 22:10
png图片抠图不够干净，看上去不够美观

是的。谢谢小辣椒关注与支持，祝开心{:4_204:}

红影发表于 2025-4-30 16:37

杨帆发表于 2025-4-29 17:49
去掉遮罩，清晰度好点了

遮罩还是需要的，否则有水印，具体怎样设置，找到个平衡就好{:4_187:}

杨帆发表于 2025-4-30 19:44

红影发表于 2025-4-30 16:37
遮罩还是需要的，否则有水印，具体怎样设置，找到个平衡就好

对，可这里的平衡不好找呀，你有空不妨试一试{:4_204:}

红影发表于 2025-4-30 20:44

杨帆发表于 2025-4-30 19:44
对，可这里的平衡不好找呀，你有空不妨试一试

你都找不到的，我就更不行了{:4_173:}

页: [1] 2

花潮论坛's Archiver

陋室铭（第一版）