三月的风

梦缘水乡 发表于 2025-4-13 17:46

<div style="WIDTH: 900px; POSITION: relative;left: -170px; TOP:140px;">

<div style="MARGIN-TOP: 50px; MARGIN-LEFT: 15.px">
<div class="ckeditor-html5-video" style="text-align: center;">
<video autoplay="autoplay" controlslist="nodownload" loop="loop"src="https://file.uhsea.com/2504/9b417fcfc4448d4b3f1ab827fe1551143P.mp4">width:100%;
</p></div>

<img src="https://file.uhsea.com/2504/c34ce9ed7bdddc9ab6190676ce1d701bQR.gif"height=140

width=180 style="z-index:10;position:absolute;; top:

205px;left:-30px;"><p> </p>

<img src="https://file.uhsea.com/2504/479e942f281b7e53df77de7d411ef146Q7.gif"height=680

width=700 style="z-index:10;position:absolute;; top:

-245px;left:-50px;"><p> </p>

<img src="https://file.uhsea.com/2504/4271e50e7b7e30200ece6a0d6bfa8371AV.gif"height=200

width=300 style="z-index:10;position:absolute;; top:

95px;left:290px;"><p> </p>

<img src="https://file.uhsea.com/2504/4c3dc3cec761bdaef39bb74f7846729cGI.gif"height=200

width=300 style="z-index:10;position:absolute;; top:

455px;left:290px;"><p> </p>

<img src="https://file.uhsea.com/2504/8502ac23aade17da8ffa0e48be409520SE.gif"height=200

width=400 style="z-index:10;position:absolute;; top:

455px;left:30px;"><p> </p>

<div id="layer" style="position:absolute; left: 12%;bottom: 200px;width:80%;height:1.5em;"></div></div>
<textarea style="visibility:hidden;" id="lrcContent">

三月的风：王爱华/望海高歌

LRC歌词编制：山水人家

冬看梅花，春看柳

三月新绿浸满枝头

小鸟飞舞，鱼儿畅游

真的让人美不胜收

满园春色，看不够

三月美景醉了眼眸

白云飘飘，小船悠悠

仿佛人在画里行走

三月的风吹得好柔

吹醒山川吹醒河流

花儿含笑，蝶儿含羞

处处都是人间锦绣

三月的风吹得好柔

吹走烦恼吹走忧愁

谁家姑娘，曲不离口

:

惹得小伙为她停留

满园春色，看不够

三月美景醉了眼眸

白云飘飘，小船悠悠

仿佛人在画里行走

三月的风吹得好柔

吹醒山川吹醒河流

花儿含笑，蝶儿含羞

处处都是人间锦绣

三月的风吹得好柔

吹走烦恼吹走忧愁

谁家姑娘，曲不离口

惹得小伙为她停留

三月的风吹得好柔

吹醒山川吹醒河流

花儿含笑，蝶儿含羞

处处都是人间锦绣

三月的风吹得好柔

吹走烦恼吹走忧愁

谁家姑娘，曲不离口

惹得小伙为她停留

惹得小伙为她停留

</textarea>
<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();else{this.mObj.controls=true}};this.mObj.onplaying=()=>{this.mObj.controls=false};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=()=>{if(this.mObj.paused){this.mObj.play()}else{this.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;this.mObj=null},};
var opts = {
lrcTxtID:'lrcContent',                      //    放置LRC的textarea标签的ID
lrcShowID:"layer",                            //    显示歌词的标签ID
audioURL:"https://music.163.com/song/media/outer/url?id=2129985560.mp3",                                                    //

gczh:'40px',             //    歌词字体大小
gczt:'隶书',             //    歌词字体, 若无此参数默认为微软雅黑
gcys:'#932D12',                      //    当前歌词显示红色
gcys1:'Brown',             //    后续歌词显示颜色
shys:'#DEF70B',             //    歌词描边色，若无此参数则无描边
gcct:true,                      //    歌词是否加粗
dqfs:'center',             //    歌词显示对齐方式，若无此参数默认居中对齐

showMode:0,                      //    横排(0)或竖排(1)，若无此参数默认横排
playLoop:true,             //    是否循环播放，若无此参数默认播放一次
gchs: 1                            //    显示歌词行（列）数，默认为1行
};
var km = new lrcPlayer(opts);

</script>
</div></div>

小文发表于 2025-4-13 19:16

漂亮

红影发表于 2025-4-13 20:54

很漂亮的制作，这么多动态，还有歌词同步。
欣赏梦缘水乡好帖{:4_187:}

红影发表于 2025-4-13 20:55

还以为没有暂停呢，原来在歌词的后半部分有手型显示，点击可以暂停呢。

红影发表于 2025-4-13 20:56

鱼儿的比例大了点，比天鹅都大。缩小点可能更好{:4_173:}

红影发表于 2025-4-13 20:57

奇怪，论坛上半部分又被遮挡了，想评精华没法点到操作键呢{:4_203:}

小辣椒 发表于 2025-4-13 22:21

欣赏老师好制作，这个图加的动图效果不少，歌词同步也是做了上去，整体效果不错，只是代码不够正规，同样你做起来也是会感觉麻烦一点，学习一下黑黑老师分享的代码，玩玩直接套用也是不错的

流水光阴 发表于 2025-4-14 15:48

欣赏了

流水光阴 发表于 2025-4-14 15:48

感谢老师分享

梦缘水乡 发表于 2025-4-15 12:08

小文发表于 2025-4-13 19:16
漂亮

谢谢老师喜欢和鼓励，向您学习了，中午问好！{:4_204:}

梦缘水乡 发表于 2025-4-15 12:09

红影发表于 2025-4-13 20:54
很漂亮的制作，这么多动态，还有歌词同步。
欣赏梦缘水乡好帖

谢谢老师喜欢和鼓励，向您学习了，中午问好！{:4_204:}

梦缘水乡 发表于 2025-4-15 12:11

红影发表于 2025-4-13 20:55
还以为没有暂停呢，原来在歌词的后半部分有手型显示，点击可以暂停呢。

谢谢老师指导，向您学习了，中午问好！{:4_204:}

梦缘水乡 发表于 2025-4-15 12:12

红影发表于 2025-4-13 20:56
鱼儿的比例大了点，比天鹅都大。缩小点可能更好

谢谢老师指导，我也感觉到了，下次注意。{:4_204:}

梦江南 发表于 2025-4-15 12:13

好漂亮的三月风春景。欣赏点赞！{:4_187:}

梦缘水乡 发表于 2025-4-15 12:14

小辣椒发表于 2025-4-13 22:21
欣赏老师好制作，这个图加的动图效果不少，歌词同步也是做了上去，整体效果不错，只是代码不够正规，同样你 ...

谢谢指导。请问：黑黑老师分享的代码，在那儿。{:4_204:}

梦缘水乡 发表于 2025-4-15 12:15

流水光阴发表于 2025-4-14 15:48
欣赏了

谢谢老师喜欢和鼓励，向您学习了，中午问好！{:4_204:}

梦缘水乡 发表于 2025-4-15 12:15

流水光阴发表于 2025-4-14 15:48
感谢老师分享

谢谢老师喜欢和鼓励，向您学习了，中午问好！

红影发表于 2025-4-15 21:14

梦缘水乡发表于 2025-4-15 12:09
谢谢老师喜欢和鼓励，向您学习了，中午问好！

哪里，我们必须学习{:4_187:}

红影发表于 2025-4-15 21:15

梦缘水乡发表于 2025-4-15 12:11
谢谢老师指导，向您学习了，中午问好！

问好梦缘水乡，晚上好{:4_187:}

红影发表于 2025-4-15 21:16

梦缘水乡发表于 2025-4-15 12:12
谢谢老师指导，我也感觉到了，下次注意。

算不上指导啊，只是看帖子的感觉{:4_173:}

页: [1] 2

花潮论坛's Archiver

三月的风