学习竹海人家老师的代码《金鸡报晓》

老谟深虑

空格这个代码是竹海人家老师编制的MP4加同步歌词，挺好的，今天我套用老师的代码制作这个音画。我把代码发到一楼，喜欢的网友可以学做，大家只要把代码中的MP4和MP3以及同步歌词改成你的就可以了。不明白的可以问竹海人家老师和我。再次谢谢竹海人家老师！

[00:00.000]金鸡报晓 - 郑俊海 [00:00.830]词：郑俊海 [00:01.670]曲：郑俊海 [00:02.510]噢噢噢噢噢噢噢 [00:11.250]金鸡金鸡来报晓 [00:13.160]又是一天晨来到 [00:15.313]金鸡金鸡来报晓 [00:17.515]一天要比一天好 [00:19.751]金鸡金鸡来报晓 [00:21.934]又是一年春来到 [00:24.177]金鸡金鸡来报晓 [00:26.219]一年更比一年妙 [00:28.528]别看我的个不高 [00:30.700]可是我家喻户晓 [00:32.832]皇帝为我写过诗 [00:34.987]春晚也常把我邀 [00:37.172]谁说我的能量小 [00:39.381]只是我不爱炫耀 [00:41.560]只要是我叫一叫 [00:43.746]就是一个好预兆 [00:45.399]我也有漂亮的羽毛 [00:49.780]我也可以飞上云宵 [00:54.043]但是我的使命崇高 [00:58.597]地球人全全全全全知道 [01:03.661]噢噢噢噢噢噢噢 [01:05.686]金鸡来报晓 [01:07.755]噢噢噢噢噢噢噢 [01:09.976]处处闻啼鸟 [01:12.114]噢噢噢噢噢噢噢 [01:14.287]花儿都在笑 [01:16.549]噢噢噢噢噢噢噢 [01:18.657]美的不要不要 [01:20.786]噢噢噢噢噢噢噢 [01:22.946]金鸡来报晓 [01:25.165]噢噢噢噢噢噢噢 [01:27.384]处处闻啼鸟 [01:29.507]噢噢噢噢噢噢噢 [01:31.662]花儿都在笑 [01:33.865]噢噢噢噢噢噢噢 [01:36.110]美的不要不要 [01:38.304]金鸡来报晓 [01:40.433]处处闻啼鸟 [01:42.617]花儿都在笑 [01:44.800]美的不要不要 [01:46.931]金鸡来报晓 [01:49.208]处处闻啼鸟 [01:51.395]花儿都在笑 [01:53.601]美的不要不要 [01:55.801]别看我的个不高 [01:57.915]可是我家喻户晓 [02:00.049]皇帝为我写过诗 [02:02.234]春晚也常把我邀 [02:04.371]谁说我的能量小 [02:06.592]只是我不爱炫耀 [02:08.824]只要是我叫一叫 [02:10.965]就是一个好预兆 [02:12.707]我也有漂亮的羽毛 [02:17.147]我也可以飞上云宵 [02:21.353]但是我的使命崇高 [02:25.820]地球人全全全全全知道 [02:30.675]噢噢噢噢噢噢噢 [02:32.881]金鸡来报晓 [02:34.911]噢噢噢噢噢噢噢 [02:37.142]处处闻啼鸟 [02:39.364]噢噢噢噢噢噢噢 [02:41.610]花儿都在笑 [02:43.723]噢噢噢噢噢噢噢 [02:45.856]美的不要不要 [02:48.099]噢噢噢噢噢噢噢 [02:50.225]金鸡来报晓 [02:52.446]噢噢噢噢噢噢噢 [02:54.633]处处闻啼鸟 [02:56.796]噢噢噢噢噢噢噢 [02:58.959]花儿都在笑 [03:01.175]噢噢噢噢噢噢噢 [03:03.329]美的不要不要 [03:05.692]噢噢噢噢噢噢噢 [03:07.673]金鸡来报晓 [03:09.940]噢噢噢噢噢噢噢 [03:12.179]处处闻啼鸟 [03:14.288]噢噢噢噢噢噢噢 [03:16.495]花儿都在笑 [03:18.690]噢噢噢噢噢噢噢 [03:20.908]美的不要不要 [03:23.164]噢噢噢噢噢噢噢 [03:25.240]金鸡来报晓

老谟深虑

1. <div style="WIDTH: 900px; POSITION: relative;left: -10px; TOP:   38px;">
   
2. 
   
3. 
   
4. 
   
5. <div style="MARGIN-TOP: 50px; MARGIN-LEFT: 5.px">
   
6. <div class="ckeditor-html5-video" style="text-align: center;">
   
7. <video autoplay="autoplay" controlslist="nodownload" loop="loop"  src="https://cccimg.com/view.php/e0dbe9c6fe68b0b8f7e4f5dd7f2ec4be.mp4">width:100%;
   
8. </p></div>
   
9. 
   
10. <div id="layer" style="position:absolute; left:14%;bottom:90px;width:80%;height:3.5em;"></div></div>
    
11. <textarea style="visibility:hidden;" id="lrcContent">
    
12. [00:00.000]金鸡报晓 - 郑俊海
    
13. [00:00.830]词：郑俊海
    
14. [00:01.670]曲：郑俊海
    
15. [00:02.510]噢噢噢噢噢噢噢
    
16. [00:11.250]金鸡金鸡来报晓
    
17. [00:13.160]又是一天晨来到
    
18. [00:15.313]金鸡金鸡来报晓
    
19. [00:17.515]一天要比一天好
    
20. [00:19.751]金鸡金鸡来报晓
    
21. [00:21.934]又是一年春来到
    
22. [00:24.177]金鸡金鸡来报晓
    
23. [00:26.219]一年更比一年妙
    
24. [00:28.528]别看我的个不高
    
25. [00:30.700]可是我家喻户晓
    
26. [00:32.832]皇帝为我写过诗
    
27. [00:34.987]春晚也常把我邀
    
28. [00:37.172]谁说我的能量小
    
29. [00:39.381]只是我不爱炫耀
    
30. [00:41.560]只要是我叫一叫
    
31. [00:43.746]就是一个好预兆
    
32. [00:45.399]我也有漂亮的羽毛
    
33. [00:49.780]我也可以飞上云宵
    
34. [00:54.043]但是我的使命崇高
    
35. [00:58.597]地球人全全全全全知道
    
36. [01:03.661]噢噢噢噢噢噢噢
    
37. [01:05.686]金鸡来报晓
    
38. [01:07.755]噢噢噢噢噢噢噢
    
39. [01:09.976]处处闻啼鸟
    
40. [01:12.114]噢噢噢噢噢噢噢
    
41. [01:14.287]花儿都在笑
    
42. [01:16.549]噢噢噢噢噢噢噢
    
43. [01:18.657]美的不要不要
    
44. [01:20.786]噢噢噢噢噢噢噢
    
45. [01:22.946]金鸡来报晓
    
46. [01:25.165]噢噢噢噢噢噢噢
    
47. [01:27.384]处处闻啼鸟
    
48. [01:29.507]噢噢噢噢噢噢噢
    
49. [01:31.662]花儿都在笑
    
50. [01:33.865]噢噢噢噢噢噢噢
    
51. [01:36.110]美的不要不要
    
52. [01:38.304]金鸡来报晓
    
53. [01:40.433]处处闻啼鸟
    
54. [01:42.617]花儿都在笑
    
55. [01:44.800]美的不要不要
    
56. [01:46.931]金鸡来报晓
    
57. [01:49.208]处处闻啼鸟
    
58. [01:51.395]花儿都在笑
    
59. [01:53.601]美的不要不要
    
60. [01:55.801]别看我的个不高
    
61. [01:57.915]可是我家喻户晓
    
62. [02:00.049]皇帝为我写过诗
    
63. [02:02.234]春晚也常把我邀
    
64. [02:04.371]谁说我的能量小
    
65. [02:06.592]只是我不爱炫耀
    
66. [02:08.824]只要是我叫一叫
    
67. [02:10.965]就是一个好预兆
    
68. [02:12.707]我也有漂亮的羽毛
    
69. [02:17.147]我也可以飞上云宵
    
70. [02:21.353]但是我的使命崇高
    
71. [02:25.820]地球人全全全全全知道
    
72. [02:30.675]噢噢噢噢噢噢噢
    
73. [02:32.881]金鸡来报晓
    
74. [02:34.911]噢噢噢噢噢噢噢
    
75. [02:37.142]处处闻啼鸟
    
76. [02:39.364]噢噢噢噢噢噢噢
    
77. [02:41.610]花儿都在笑
    
78. [02:43.723]噢噢噢噢噢噢噢
    
79. [02:45.856]美的不要不要
    
80. [02:48.099]噢噢噢噢噢噢噢
    
81. [02:50.225]金鸡来报晓
    
82. [02:52.446]噢噢噢噢噢噢噢
    
83. [02:54.633]处处闻啼鸟
    
84. [02:56.796]噢噢噢噢噢噢噢
    
85. [02:58.959]花儿都在笑
    
86. [03:01.175]噢噢噢噢噢噢噢
    
87. [03:03.329]美的不要不要
    
88. [03:05.692]噢噢噢噢噢噢噢
    
89. [03:07.673]金鸡来报晓
    
90. [03:09.940]噢噢噢噢噢噢噢
    
91. [03:12.179]处处闻啼鸟
    
92. [03:14.288]噢噢噢噢噢噢噢
    
93. [03:16.495]花儿都在笑
    
94. [03:18.690]噢噢噢噢噢噢噢
    
95. [03:20.908]美的不要不要
    
96. [03:23.164]噢噢噢噢噢噢噢
    
97. [03:25.240]金鸡来报晓
    
98. </textarea>
    
99. <script type="text/javascript">
    
100. 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[n].match(/\[\d{1,2}:\d{2}.\d{1,3}\]/g);if(chkTime){tIdx=lyriclist[n].lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist[n].substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime[m].substr(1).replace(']','').split(/:|\./);_t=parseFloat(parseInt(ta[0],10)*60+parseInt(ta[1],10)+'.'+ta[2],10);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push([0,'\u0026\u0023\u0031\u0036\u0039\u003b\u0020\u4e5f\u66fe\u5e74\u8f7b'])}this.lrcVec.push([_t,lrcTxt])}}}this.lrcVec.sort(function(a,b){return(a[0]-b[0])});},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[this.idx][0]){_idx=this.idx;_spans=this.showLrcObj.getElementsByTagName('span');for(k=0;k<this.sLine;k++){_spans[k].innerHTML=(_idx+k)>=this.lrcVec.length?"":this.lrcVec[_idx+k][1]}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},};
     
101. var opts = {
     
102. lrcTxtID:'lrcContent',                        //        放置LRC的textarea标签的ID        
     
103. lrcShowID:"layer",                                //        显示歌词的标签ID        
     
104. audioURL:"https://cccimg.com/view.php/cb431d74aaf27511f502508f57b1a5b9.mp3",                                        //        
     
105. 
     
106. gczh:'38px',                //        歌词字体大小
     
107. gczt:'隶书',                //        歌词字体, 若无此参数默认为微软雅黑                                
     
108. gcys:'#932D12',                        //        当前歌词显示红色               
     
109. gcys1:'Brown',                //        后续歌词显示颜色               
     
110. shys:'#DEF70B',                //        歌词描边色，若无此参数则无描边
     
111. gcct:true,                        //        歌词是否加粗                        
     
112. dqfs:'center',                //        歌词显示对齐方式，若无此参数默认居中对齐        
     
113.                                        
     
114. showMode:0,                        //        横排(0)或竖排(1)，若无此参数默认横排               
     
115. playLoop:true,                //        是否循环播放，若无此参数默认播放一次        
     
116. gchs: 1                                //        显示歌词行（列）数，默认为1行
     
117. };
     
118. var km = new lrcPlayer(opts);
     
119. 
     
120. 
     
121. </script>
     
122. </div></div>

复制代码

蓝朵1111

赞赏，你的制作好精彩！

苍穹

这样复杂！只能望而兴叹！

shlhch

精彩绝伦！一花独放不是春，请你们带领我们一起嗨！

北方雪

超版制作的太漂亮了，令人羡慕。看到这些代码，有点晕。让人叹为观止。给您点赞！

童声韵灵

欣赏老朋友的精彩制作。为你点赞。

咕咚来了

这个大公鸡，第几个版本了？

西湖

蛮可爱的，真棒！

月婵

欣赏 学习竹海人家老师的代码《金鸡报晓》好作品！