|
|
楼主 |
发表于 2025-5-8 12:09:18
|
显示全部楼层
IP:亚太地区
不要总是依靠别人给你代码，要学会自己找代码，我做的代码音画都是看到别人的音画自己找到的。建议你还是到工具箱里去学习。
MP4+同步代码：<div style="WIDTH: 900px; POSITION: relative;left: -10px; TOP: 38px;">
<div style="MARGIN-TOP: 20px; MARGIN-LEFT: 5.px">
<div class="ckeditor-html5-video" style="text-align: center;">
<video autoplay="autoplay" controlslist="nodownload" loop="loop" src="https://cccimg.com/view.php/f1f25a1d2e5b7529bc180afeb30d9d4e.mp4">width:100%;
</p></div>
<div id="layer" style="position:absolute; left:-15%;bottom:50px;width:80%;height:8.5em;"></div></div>
<textarea style="visibility:hidden;" id="lrcContent">
[00:00.00]我们都老了
[00:05.17]演唱：马建涛
[00:10.17]LRC：老谟深虑
[00:16.17]我在细心帮你盘头发
[00:21.70]岁月让你青丝变白发
[00:25.56]镜子里的我们都老了
[00:29.48]这些年让你受累了
[00:38.23]自从牵了你的手
[00:41.73]誓言要爱你到永久
[00:45.82]匆匆忙忙的秋后
[00:50.00]结婚证拿到手
[00:53.96]你的青春与美貌
[00:57.68]被时光偷偷带走
[01:02.82]我也沧桑了许多
[01:05.77]这些年欠你的太多太多
[01:12.90]时光时光请你慢些走
[01:17.59]我爱的人还没有爱够
[01:21.65]你陪我吃苦的这些年
[01:25.67]从来没一句抱怨
[01:29.77]我在细心帮你盘头发
[01:33.65]岁月让你青丝变白发
[01:37.65]镜子里的我们都老了
[01:41.66]这些年让你受累了
[01:48.35]
[02:25.82]你的青春与美貌
[02:29.62]被时光偷偷带走
[02:33.57]我也沧桑了许多
[02:37.70]这些年欠你的太多太多
[02:46.30]时光时光请你慢些走
[02:49.60]我爱的人还没有爱够
[02:53.69]你陪我吃苦的这些年
[02:57.76]从来没一句抱怨
[03:01.71]我在细心帮你盘头发
[03:05.59]岁月让你青丝变白发
[03:09.65]镜子里的我们都老了
[03:13.66]这些年让你受累了
[03:21.76]时光时光请你慢些走
[03:25.69]我爱的人还没有爱够
[03:29.65]你陪我吃苦的这些年
[03:33.48]从来没一句抱怨
[03:37.69]我在细心帮你盘头发
[03:41.65]岁月让你青丝变白发
[03:45.64]镜子里的我们都老了
[03:49.75]这些年让你受累了
[03:57.93]
[04:06.97]
</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[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},};
var opts = {
lrcTxtID:'lrcContent', // 放置LRC的textarea标签的ID
lrcShowID:"layer", // 显示歌词的标签ID
audioURL:"https://music.163.com/song/media/outer/url?id=2698001811.mp3", //
gczh:'30px', // 歌词字体大小
gczt:'隶书', // 歌词字体, 若无此参数默认为微软雅黑
gcys:'#F6F0EF', // 当前歌词显示红色
gcys1:'Yellow', // 后续歌词显示颜色
shys:'#F02D0C', // 歌词描边色，若无此参数则无描边
gcct:true, // 歌词是否加粗
dqfs:'center', // 歌词显示对齐方式，若无此参数默认居中对齐
showMode:0, // 横排(0)或竖排(1)，若无此参数默认横排
playLoop:true, // 是否循环播放，若无此参数默认播放一次
gchs: 4 // 显示歌词行（列）数，默认为1行
};
var km = new lrcPlayer(opts);
</script>
|
|
发表于 2025-5-8 11:54:16
发表于 2025-5-8 11:57:06