祝花潮的网友端午节安康
本帖最后由 梦江南 于 2025-5-30 14:27 编辑 <br /><br /><div style="WIDTH: 1280px;height:740px; POSITION: relative;margin: 130px 0 0-340px;opacity: 1;"><video id="vid" autoplay="autoplay" controlslist="nodownload" loop="loop" mutedsrc="https://cccimg.com/view.php/d911a560c150dc29c5d8118a0cc7e535.mp4" style="WIDTH: 100%;height:100%; POSITION: relative;left: 0px; TOP:0px; z-index: 1; opacity: 1; "></video>
<div id="layer" style="position:absolute; left:30%;width:50%;TOP: 10%; height:1em;z-index: 1;" title="播放/暂停">
<textarea style="visibility:hidden;" id="lrcContent">
江都子 - 端午节安康
作词：江都子
作曲：江都子
原唱：江都子
歌词由 www.45hk. 提供
编曲：江都子
LRC：梦江南
又是一年端午到
粽子飘香好味道
家家户户多热闹
吃吃喝喝多逍遥
又是一年端午到
龙舟赛事多火爆
齐心协力领先跑
众志成城士气高
祝你端午节安康
欢欢喜喜过端阳
生活幸福又美满
处处散发爱的光芒
祝你端午节安康
快快乐乐把歌唱
平安健康常相伴
梦想成真好事成双
</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/908c3119bc9fa908585fe7d9cd18dc40.mp3", // 音频文件URL
gczh:'30px', // 歌词字体大小
gczt:'隶书', // 歌词字体
gcys:'#FF1493', // 当前歌词显示颜色
gcys1:'#3CB371', // 后续歌词显示颜色
shys:'gold', // 歌词描边色
gcct:true, // 歌词是否加粗
dqfs:'center', // 歌词显示对齐方式
showMode:0, // 横排(0)或竖排(1)
playLoop:true, // 是否循环播放
gchs: 1 // 显示歌词行数
};
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-5-30 13:17
好像看不到，刷新了几次还是不行，不知什么原因
问好岁月老师，我已经换过链接地址，现在不知是否能看到？ 梦油 发表于 2025-5-30 13:28
声像皆无。
问好梦油老师，我已经换过链接地址，现在不知是否能看到？ 好了，好了，声像全有了。
祝梦江南端午安康！ 梦油 发表于 2025-5-30 14:33
好了，好了，声像全有了。
祝梦江南端午安康！
谢谢梦油老师回复。祝您端午节安康！{:4_187:} 问好江南，谢谢精彩分享，祝端午安康{:4_204:} 欣赏老师的音画，谢谢你的祝福。祝你端午安康！
杨帆 发表于 2025-5-30 15:03
问好江南，谢谢精彩分享，祝端午安康
谢谢杨帆欣赏支持，问好！祝您全家端午节安康！{:4_187:} 老谟深虑 发表于 2025-5-30 15:07
欣赏老师的音画，谢谢你的祝福。祝你端午安康！
问好老谟老师，谢谢欣赏支持，祝您全家端午节安康！{:4_187:} 梦江南 发表于 2025-5-30 14:55
谢谢梦油老师回复。祝您端午节安康！
谢谢你的美好祝福。 梦江南 发表于 2025-5-30 14:28
问好岁月老师，我已经换过链接地址，现在不知是否能看到？
看到了，很棒，但有点卡 端午安康{:4_187:} 好漂亮的制作。欣赏江南好帖，迟来的祝福，祝福端午安康{:4_187:} 梦油 发表于 2025-5-30 16:33
谢谢你的美好祝福。
早上问好梦油老师，谢谢欣赏回复。{:4_204:} 走过岁月 发表于 2025-5-31 13:47
看到了，很棒，但有点卡
问好岁月老师，谢谢回复支持。端午安康。{:4_204:} 小九 发表于 2025-5-31 14:17
端午安康
早上问好小九老师，谢谢支持，端午安康！{:4_204:} 红影 发表于 2025-6-1 19:55
好漂亮的制作。欣赏江南好帖，迟来的祝福，祝福端午安康
早上问好影子，知道您很忙，没事的。祝您阖家端午幸福安康！{:4_187:} 梦江南 发表于 2025-6-2 07:41
问好岁月老师，谢谢回复支持。端午安康。
再来听，不卡了 {:4_204:}
页:
[1]
2