多首MP3连播——（把原用夕阳黄昏老师的代码制作的帖子代码改动：背景的一首歌曲一...
本帖最后由 寒冬残荷 于 2025-10-23 11:53 编辑 <br /><br /><style type="text/css">#papa{position:relative;margin:90px auto 45px calc(50% - 721px);width:1280px;height:720px;z-index:1; display:grid; place-items:center;overflow: hidden;
font-size:16px;border-radius:0px;background: hsl(240, 50%, 80%) url(https://pic1.imgdb.cn/item/68f850163203f7be008a7ff6.jpg); background-position:center; background-size:cover; border:#d0d0d0 15px inset; border-top:#e0e0e0 15px inset; border-bottom:#adadad 15px inset; text-align: center;}
#ground3rd{position:absolute; width:100%;height:100%; z-index:1;top:0px;left:0px;}
#wb{position:absolute; left:0px; top:0px; z-index :1;text-align:center; font-size:3em; color:#ffff00; width: 100%;height:100px; font-weight:bolder; letter-spacing:2px; transform-origin:top; animation: yao 0.8s linear infinite alternate; text-align:center;}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }}
#rdisk{position:absolute; left:50px; bottom:10px;font-size:5em; border-radius:50%; color:#ff0000; cursor:pointer; animation:circleSmall2 10s linear infinite; animation-play-state:paused; border:0px #FF4A20 solid;z-index:999;}
@keyframes circleSmall2{
0%{transform:rotateX(30deg) rotateY(-45deg) rotateZ(0deg);}
100%{transform:rotateX(30deg) rotateY(-45deg) rotate(360deg);}}
#LRCShow{position:absolute; left:25%; bottom:10px; width:69%; height:70px; border:0px #FF4A20 solid; text-align: center;z-index:999;}
.lyricDisp{filter:drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0); font-family:微软雅黑; transition:.3s all ease; font-size:3em; font-weight:bolder; letter-spacing:6px; }
.lyricDisp:nth-child(1){color:#DA70D6; text-align:left; --aniName:bgMove1; --durTime:100ms; --aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute; content:attr(data-lrc); width:0; height:100%; color:#ff0000; overflow:hidden; white-space:nowrap; animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:#0000ff; text-align: right;font-size:0em; margin-top:10px; letter-spacing:1px;}
@keyframes bgMove1{from{width:0;}to{width:100%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
#songList{color:red; position:absolute; top:30px; left:50px; width:290px; height:auto; overflow: hidden; opacity:0.3;z-index :2; transition: opacity 2s; text-align:left;line-height: 1.6;letter-spacing:4px;}
#songList:hover{opacity:1; }
#songList li {cursor:pointer; color:#548c00; font:bold 1em 微软雅黑; filter:drop-shadow(#ff0000 1px 0 0) drop-shadow(#ff0000 0 1px 0) drop-shadow(#ff0000 -1px 0 0) drop-shadow(#ff0000 0 -1px 0); opacity:1; }
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#fff; opacity: .3; cursor: pointer;z-index: 111;}
</style>
<div id="papa">
<video id="ground3rd" src="https://cccimg.com/view.php/8c31c721a9747591c6fbb12082e99ae5.mp4" autoplay loop muted></video>
<div id="wb"></div>
<ol id='songList' ></ol>
<div id="rdisk">❤️</div>
<span id="fullscreen">全屏欣赏</span>
<div id="LRCShow">
<div class="lyricDisp"></div>
<div class="lyricDisp"></div>
</div>
</div>
<textarea style="visibility:hidden;" id='lrcContent0'></textarea>
<div style="height:100px;"></div>
<script>
// 以下5行代码是用id为fullscreen来响应鼠标点击“全屏欣赏/退出全屏”时切换到全屏欣赏或退出全屏
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};
lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();
console.log(opts.lrcTxtID);this.lyricTxtObj=document.getElementById(opts.lrcTxtID);
lyricTxt=this.lyricTxtObj.innerHTML;
this.showLrcObj=document.getElementById(opts.lrcShowID);
this.gclines=this.showLrcObj.getElementsByTagName('div');
this.audioCtrl=document.getElementById(opts.audioCtrl);
this.handleLrc(lyricTxt);
this.genPlayer(opts.audioURL)},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}\]|\[\d{1,2}:\d{2}\]/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=(+ta)*60+(+ta);
if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";
this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));
this.gclines.style.setProperty('--durTime',durTime+'ms');
this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");
this.mObj.loop=false;this.mObj.muted=false;
this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);
this.idx=0;
var that=this;
this.mObj.addEventListener('ended',function(){that.idx=0;});
this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';
that.gclines.style.setProperty('--aniPlayState','running')});
this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';
that.gclines.style.setProperty('--aniPlayState','paused')});
this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");
that.showLrcObj.style.display='none';
that.showLrcObj.removeChild(this)});
this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});
this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};
try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;this.mObj=null},}
</script>
<script type="text/javascript">
songParas = [
["身披彩衣的姑娘", "https://cccimg.com/view.php/d044905d9bc71530d0e15d1026898fba.mp4", "https://www.dda5.com/plug/down.php?ac=mp3&id=82cc0c92005d3084e5cc148d7448e683", "刀郎- 身披彩衣的姑娘\n身披彩衣的姑娘 为何那样的忧伤\n晚霞映红毡房 为何脸上闪烁泪光\n情人啊去了远方 孤雁难飞成行\n小羊离开牧场 脸儿就会枯黄\n白云朵朵带我去飘荡\n化作了清风的时候吻向她脸庞\n思念像野火在草原上飞扬\n化作了清烟的时候会飞到她身旁\n情人啊去了远方 孤雁难飞成行\n小羊离开牧场 脸儿就会枯黄\n白云朵朵带我去飘荡\n化作了清风的时候吻向她脸庞\n思念像野火在草原上飞扬\n化作了清烟的时候会飞到她身旁\n白云朵朵带我去飘荡\n化作了清风的时候吻向她脸庞\n思念像野火在草原上飞扬\n化作了清烟的时候会飞到她身旁\n白云朵朵带我去飘荡\n化作了清风的时候吻向她脸庞\n思念像野火在草原上飞扬\n化作了清烟的时候会飞到她身旁\n \n "],
["雨中飘荡的回忆", "https://cccimg.com/view.php/25aa1a763dcae9f80050e476ad3b93b2.mp4", "https://www.dda5.com/plug/down.php?ac=mp3&id=9f09b45cd63f747a48429b587a5c2305","雨中飘荡的回忆 - 刀郎\n今夜又下着小雨\n小雨它一点一点滴滴\n一点点一滴滴它飘来飘去\n想去年那场相遇\n那天也下着小雨\n雨中的你是那样美丽\n我问你是否喜欢和我一起\n你笑着无语\n那一天这世界是多么美丽\n尽管天上的小雨一点一滴滴\n空气中飘荡着你那芬芳的气息\n任小雨落在我的头顶\n今夜里我又站在雨里\n任感情在小雨里飘来飘去\n我问我自己是否还在爱着你\n就这样轻易的放弃\n今夜又下着小雨\n仿佛又看到你的背影\n我想要告诉自己不再爱你\n但奈何这滴滴小雨\n今夜里我又站在雨里\n任感情在小雨里飘来飘去\n我问我自己是否还在爱着你\n就这样轻易的放弃\n今夜又下着小雨\n仿佛又看到你的背影\n我想要告诉自己不再爱你\n但奈何这滴滴小雨\n但奈何这滴滴小雨\n \n "],
["花妖", "https://cccimg.com/view.php/25aa1a763dcae9f80050e476ad3b93b2.mp4", "https://www.dda5.com/plug/down.php?ac=mp3&id=55a32087ee33df26c928c7bf4d4a61bf", "《花妖》\n作词:刀郎\n作曲:刀郎\n我是那年轮上流浪的眼泪\n你仍然能闻到风中的胭脂味\n我若是将诺言刻在那江畔上\n一江水冷月光满城的汪洋\n我在时间的树下等了你很久\n尘凡儿缠我谤我笑我白了头\n你看那天边追逐落日的纸鸢\n像一盏回首道别夤夜的风灯\n我的心似流沙放逐在车辙旁\n他日你若再返必颠沛在世上\n若遇那秋夜雨倦鸟也淋淋\n那却是花墙下弥留的枯黄\n君住在钱塘东\n妾在临安北\n君去时褐衣红\n小奴家腰上黄\n寻差了罗盘经\n错投在泉亭\n奴辗转到杭城\n君又生余杭\n我在时间的树下等了你很久\n尘凡儿缠我谤我笑我白了头\n你看那天边追逐落日的纸鸢\n像一盏回首道别夤夜的风灯\n君住在钱塘东\n妾在临安北\n君去时褐衣红\n小奴家腰上黄\n寻差了罗盘经\n错投在泉亭\n奴辗转到杭城\n君又生余杭\n \n"],
["情人", "https://cccimg.com/view.php/8c31c721a9747591c6fbb12082e99ae5.mp4", "https://www.dda5.com/plug/down.php?ac=mp3&id=631bad36cebd6be4a0042c2a5d70ca24","情人 - 刀郎\n你是我的情人\n像玫瑰花一样的女人\n用你那火火的嘴唇\n让我在午夜里无尽的消魂\n你是我的爱人\n像百合花一样的清纯\n用你那淡淡的体温\n抚平我心中那多情的伤痕\n我梦中的情人\n忘不了甜蜜的香吻\n每一个动情的眼神\n都让我融化在你无边的温存\n你是我的情人\n像玫瑰花一样的女人\n用你那火火的嘴唇\n让我在午夜里无尽的消魂\n来来来来来来\n来来来来来来\n来来来来来来\n来来来来来来\n来来来来来来\n来来来来来来\n来来来来来来\n来来来来来来\n \n"],
["黄玫瑰", "https://cccimg.com/view.php/368f6444f85567dcb11f6d6764fce07a.mp4", "https://www.dda5.com/plug/down.php?ac=mp3&id=668329451136a797572e12e7737cacc8","黄玫瑰 - 刀郎\n黄玫瑰\n别落泪\n所有的花儿你最美\n受了伤\n别伤悲\n别让泪珠湿花蕊\n别让我看见你的伤悲\n我会为她心碎\n别问自己对不对\n心中有爱就很美\n即使告别了春天阳光\n你依然要开放\n别害怕\n别犯傻\n别轻易剪去长发\n我会站在你的身旁\n给你依靠的肩膀\n别说话\n微笑吧\n回头是灿烂的霞\n我默默的祝福你\n感觉到了吗\n海角天涯\n哪里不是你的家\n别怕啊\n别傻啊\n哪里都能开花\n黄玫瑰\n别落泪\n所有的花儿你最美\n受了伤\n别伤悲\n别让泪珠湿花蕊\n你应该知道你是那样美\n谁都会为你心碎\n别再抱怨爱太累\n真爱能有几回\n即使告别了春天阳光\n你依然要开放\n别害怕\n别犯傻\n别轻易剪去长发\n我会站在你的身旁\n给你依靠的肩膀\n别说话\n微笑吧\n回头是灿烂的霞\n我默默的祝福你\n感觉到了吗\n海角天涯\n哪里不是你的家\n别怕啊\n别傻啊\n哪里都能开花\n \n"],
["西海情歌", "https://cccimg.com/view.php/ea52ed3e920ee982ebe4b33eff7930e7.mp4", "https://www.dda5.com/plug/down.php?ac=mp3&id=0e5fb14e78aff13c2def97c814537cb7","刀郎 - 西海情歌\n自你离开以后\n从此就丢了温柔\n等待在这雪山路漫长\n听寒风呼啸依旧\n一眼望不到边\n风似刀割我的脸\n等不到西海天际蔚蓝\n无言这苍茫的高原\n还记得你答应过我\n不会让我把你找不见\n可你跟随那南归的候鸟\n飞得那么远\n爱像风筝断了线\n拉不住你许下的诺言\n我在苦苦等待雪山之巅\n温暖的春天\n等待高原冰雪融化之后\n归来的孤雁\n爱再难以续情缘\n回不到我们的从前\n一眼望不到边\n风似刀割我的脸\n等不到西海天际蔚蓝\n无言这苍茫的高原\n还记得你答应过我\n不会让我把你找不见\n可你跟随那南归的候鸟\n飞得那么远\n爱像风筝断了线\n拉不住你许下的诺言\n我在苦苦等待雪山之巅\n温暖的春天\n等待高原冰雪融化之后\n归来的孤雁\n爱再难以续情缘\n回不到我们的从前\n还记得你答应过我\n不会让我把你找不见\n可你跟随那南归的候鸟\n飞得那么远\n爱像风筝断了线\n拉不住你许下的诺言\n我在苦苦等待雪山之巅\n温暖的春天\n等待高原冰雪融化之后\n归来的孤雁\n爱再难以续情缘\n回不到我们的从前\n \n"]
];
var opts = {
lrcTxtID:'lrcContent0',
lrcShowID:"LRCShow",
audioURL:"https://www.dda5.com/plug/down.php?ac=mp3&id=55a32087ee33df26c928c7bf4d4a61bf",
audioCtrl:'rdisk'
};
var km = null;
var idx = 0;
let songList = document.getElementById('songList');
function initSongList(){
for(n = 0; n < songParas.length; n++) {
let item = document.createElement('li');
item.id = 's'+n;
item.innerHTML = songParas;
songList.appendChild(item);
}
}
function handleChg() {
items = songList.getElementsByTagName('li');
for(n = 0 ; n < items.length; n++) {
items.onclick=function() {
if(km){
km.stopMusic();
km = null;
}
idx = parseInt(this.id.substr(1));
const video = document.getElementById('ground3rd');
video.src =songParas;
video.load();
video.play();
document.getElementById(opts.lrcTxtID).innerHTML = songParas;
console.log(document.getElementById(opts.lrcTxtID).innerHTML);
opts.audioURL=songParas;
km = new lrcPlayer2(opts);
var wb=document.getElementById('wb')
wb.innerHTML='正在播放曲目：'+songParas;
}
}
items.click();
}
function isSongEnded(){
if(km){
items = songList.getElementsByTagName('li');
if(km.mObj.ended){
idx++; idx %= items.length;
items.click();
}
}
setTimeout(isSongEnded, 500);
}
initSongList();
handleChg();
isSongEnded();
</script>
多首MP3连播——（把原用夕阳黄昏老师的代码制作的帖子代码改动：背景的一首歌曲一张图片改为一首歌曲一个视频） 三个视频均是AI文生视频！ 如何改变视频的地址也是问AI的。看来AI对一般人也有帮助的！{:5_106:} 寒冬残荷 发表于 2025-10-22 12:39
三个视频均是AI文生视频！
原来是AI生成的视频，怪不得和歌曲的已经十分相配呢。
2、3是同一个视频呢。这个太不容易了，要做歌词，还要做视频，相当不容易呢{:4_199:} 这个制作太不容易了，寒冬残荷厉害了{:4_199:} 欣赏寒冬残荷的精彩制作，视频出来稍微慢一点，我刷新刷新就出来了 感谢寒冬残荷精彩的分享{:4_178:} 红影 发表于 2025-10-22 21:54
原来是AI生成的视频，怪不得和歌曲的已经十分相配呢。
2、3是同一个视频呢。这个太不容易了，要做歌词， ...
谢谢红影管管的鼓励和支持！是的，曲目有重复使用的，因为做不了那么多的视频{:5_106:}
今天又加了两首歌曲和两个视频：《黄玫瑰》和《西海情歌》。《西海情歌》视频我是以第一人称（我）来输入方案的（因为原我打算翻唱这首歌来做一个帖子的，可是唱得实在太难听了就没有做成），所以视频人物男女主角与歌曲演唱者是反过来了！{:5_106:} 小辣椒 发表于 2025-10-22 22:26
感谢寒冬残荷精彩的分享
谢谢小辣椒管管的鼓励和支持。
寒冬残荷 发表于 2025-10-23 11:50
谢谢红影管管的鼓励和支持！是的，曲目有重复使用的，因为做不了那么多的视频
今天又加了两 ...
还有补充的新的内容，寒冬残荷太赞了{:4_204:}
AI制作里有时出现失误也是难免的{:4_173:}
页:
[1]