多曲选播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><style type="text/css">
.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:2px;}
.lyricDisp:nth-child(1){color:#cccccc; text-align:left; --aniName:bgMove1; --durTime:100ms; --aniPlayState:running;}
@keyframes bgMove1{from{width:0;}to{width:100%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
.lyricDisp:nth-child(1)::before{position:absolute; content:attr(data-lrc); width:0; height:100%; left:0;top:0;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:1.5em; margin-top:10px; letter-spacing:1px;}
#LRCShow{position:absolute; left:14%; bottom:20px; width:83%; height:100px; }
#rdisk{position:absolute; left:50px; bottom:10px;font-size:5em; color:#ff0000; cursor:pointer; animation:circleSmall2 10s linear infinite; animation-play-state:paused;}
@keyframes circleSmall2{
0%{transform:rotateX(30deg) rotateY(-45deg) rotateZ(0deg);}
100%{transform:rotateX(30deg) rotateY(-45deg) rotate(360deg);}}
#ground3rd{width:1080px;height:700px;position:relative;font-size:16px;overflow:hidden;border-radius:0px;margin:140px 16px 32px -100px; background: hsl(240, 50%, 80%) url(https://img0.baidu.com/it/u=4148497417,1314102492&fm=253&fmt=auto&app=138&f=JPEG); background-position:center; background-size:cover; border: 10px double #5E2612; }
#wb{position:absolute; left:0px; top:30px; text-align:center; font-size:2em; color:#d94600; width: 800px;height:100px; font-weight:bolder; letter-spacing:2px; transform-origin:top;animation: yao 0.8s linear infinite alternate;}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }}
#songList li {cursor:pointer; color:#548c00; font bold 1.35em 微软雅黑; 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:0.3; }
#songList li:hover{opacity:1; }
</style>
<div id="ground3rd">
<div id="wb"></div>
<ol id='songList' style="color: red; position: absolute;top:48px;left:56px;"></ol>
<div id="rdisk">♬</div>
<div id="LRCShow">
<div class="lyricDisp"></div>
<div class="lyricDisp"></div>
</div>
<textarea style="visibility:hidden;" id='lrcContent0'></textarea>
<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://s1.ax1x.com/2022/11/07/xvp9Cq.jpg", "https://www.kumeiwp.com/sub/filestores/2022/11/06/1a54c9a4695c3f8d1e24a13dc2ba8021.mp3","\n送 别\n---梦之旅演唱组合---\n作词：李叔同(弘一大师)\n长亭外 古道边\n芳草碧连天\n晚风扶柳笛声残\n夕阳山外山\n天之涯 地之角\n知交半零落\n一壶浊酒尽余欢\n今宵别梦寒\nLRC歌词制作 相约爱晚亭\n长亭外 古道边\n芳草碧连天\n晚风扶柳笛声残\n天之涯 地之角\n知交半零落\n一壶浊酒尽余欢\n今宵别梦寒\nLRC歌词制作 相约爱晚亭\n夕阳山外山\n天之涯 地之角\n知交半零落\n一壶浊酒尽余欢\n今宵别梦寒\n长亭外 古道边\n芳草碧连天\n晚风扶柳笛声残\n夕阳山外山\n--- End ---\n\n"],
["同桌的你", "https://s1.ax1x.com/2022/11/07/xvpEb4.jpg", "https://www.kumeiwp.com/sub/filestores/2022/11/06/34737e91652dd3fca00118e86c3c2377.mp3","\n同 桌 的 你\n作词：高晓松 作曲：高晓松\n演唱：梦之旅演唱组合\n明天你是否会想起\n昨天你写的日记\n明天你是否还惦记\n曾经最爱哭的你\n老师们都已想不起\n猜不出问题的你\n我也是偶然翻相片\n才想起同桌的你\n谁娶了多愁善感的你\n谁看了你的日记\n谁把你的长发盘起\n谁给你做的嫁衣\nLRC歌词制作 相约爱晚亭\n你从前总是很小心\n向我借半块橡皮\n你也曾无意中说起\n喜欢跟我在一起\n那时候天总是很蓝\n日子总过得太慢\n你总说毕业遥遥无期\n转眼就各奔东西\n谁娶了多愁善感的你\n谁安慰爱哭的你\n谁看了我给你写的信\n谁把它丢在风里\nLRC歌词制作 相约爱晚亭\n从前的日子都远去\n我也将有我的妻\n我也曾给她看相片\n给她讲同桌的你\n谁娶了多愁善感的你\n谁安慰爱哭的你\n谁把你的长发盘起\n谁给你做的嫁衣\n谁娶了多愁善感的你\n谁安慰爱哭的你\n谁把你的长发盘起\n谁给你做的嫁衣\n啦 啦 啦 啦\n啦 啦 啦 啦\n啦 啦 啦 啦\n啦 啦 啦 啦\n啦 啦 啦 啦\n啦 啦 啦 啦\n\n"],
["白兰鸽", "https://s1.ax1x.com/2022/11/07/xvpQxK.jpg", "https://www.kumeiwp.com/sub/filestores/2022/11/06/50d374925e1c1c1718259500f885b9e4.mp3","\n专辑 流淌的歌声\n---梦之旅演唱组合---\n\n★ ★ ★ ★ ★ ★ ★ ★ ★ ★\n\nLRC歌词制作 相约爱晚亭\n当那曙光渐渐明朗\n这是一个新希望\n一年之际在于春天\n一天之际在于晨\n★ ★ ★ ★ ★ ★ ★ ★ ★ ★\n它享受了春天阳光\n尝到新鲜的空气\n它见到了白云欢腾\n蓝色天空真灿烂\nmusic\n噢 它是一只白兰鸽\n爱在那长空飞翔\n噢 它是一只白兰鸽\n翱游那丘陵山岗\n在白云下面自由地飞翔\n噢 它是一只白兰鸽\n爱在那长空飞翔\n噢 它是一只白兰鸽\n翱游那丘陵山岗\n在白云下面自由地飞翔\nmusic\n它有洁白风尚羽毛\n它有矫健的身体\n它要结同快乐伙伴\n共同享受这天地\nmusic\n噢 它是一只白兰鸽\n爱在那长空飞翔\n噢 它是一只白兰鸽\n翱游那丘陵山岗\n在白云下面自由地飞翔\n噢 它是一只白兰鸽\n爱在那长空飞翔\n噢 它是一只白兰鸽\n翱游那丘陵山岗\n在白云下面自由地飞翔\n\n噢 它是一只白兰鸽\n爱在那长空飞翔\n噢 它是一只白兰鸽\n翱游那丘陵山岗\n在白云下面自由地飞翔\n在白云下面自由地飞翔\n在白云下面自由地飞翔\n\n "],
["乡恋", "https://s1.ax1x.com/2022/11/07/xvp3rD.jpg", "https://www.kumeiwp.com/sub/filestores/2022/10/20/fd6ca95ab0feb325c8a206029dbd4d44.mp3", "\n乡 恋\n---梦之旅演唱组合---\nLRC歌词制作 相约爱晚亭\n你的身影\n你的歌声\n永远印在我的心中\n昨天虽已消逝\n分别难相逢\n怎能忘记你的一片深情\n昨天虽已消逝\n分别难相逢\n怎能忘记你的一片深情\nLRC歌词制作 相约爱晚亭\n\n我的情爱\n我的美梦\n永远留在你的怀中\n明天就要来临\n却难得和你相逢\n只有风儿送去我的深情\n明天就要来临\n却难得和你相逢\n只有风儿送去我的深情\n啦...啦...啦.. 啦..\n啦...啦...啦.. 啦..\n明天就要来临\n却难得和你相逢\n只有风儿送去我的深情\n--- End ---\n\n "]];
var opts = {
lrcTxtID:'lrcContent0',
lrcShowID:"LRCShow",
audioURL:"https://www.qqmc.com/up/kwlink.php?id=60010502&.mp3",
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));
document.getElementById('ground3rd').style.backgroundImage = 'url(' + songParas + ')';
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>
</body>
</html>
欣赏佳作，为你点赞。 欣赏一下，谢谢。 谢谢绿地水池加分鼓励！问好！ 蓝魔 发表于 2022-11-7 22:18
欣赏一下，谢谢。
谢谢您的关注和支持！ 绿地水池 发表于 2022-11-7 19:27
欣赏佳作，为你点赞。
谢谢绿地水池加分鼓励！问好！ 相约爱晚亭 发表于 2022-11-8 16:50
谢谢绿地水池加分鼓励！问好！
相约爱晚亭朋友晚上好。 欣赏楼主的新作，点赞多谢分享！ 非常开心 发表于 2022-11-8 23:24
欣赏楼主的新作，点赞多谢分享！
谢谢您的支持和鼓励！ 欣赏了谢谢
页:
[1]
2