论坛 › 动画音画 › 我也克隆一下列表播放器《女人如烟等》

亚伦影音工作室 发表于 2022-11-9 14:13

我也克隆一下列表播放器《女人如烟等》

本帖最后由 亚伦影音工作室 于 2023-4-25 23:50 编辑 <br /><br /><style type="text/css">
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2.5em悟空大字库, sans-serif; transition:.3s all ease;letter-spacing:2px;}
.lyricDisp:nth-child(1){color:#ff0000;text-align:left; --aniName:bgMove1; --durTime:100ms; --aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: repeating-radial-gradient(circle 500px at 50% 50%, rgba(202, 44, 104, 0) 20%,#F00000 29%,#F4FAF4 38%,#FFC306 51%,#67ED05 66%,rgba(72, 245, 87, 0) 82%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%); overflow:hidden; white-space:nowrap; animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:#000080;text-align:center;font-size:2.5em;margin-top:15px; letter-spacing:1px;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:20%;bottom:20px;width:100%;height:100px;margin:480px auto ;position:relative;}
#rdisk{position:absolute;left:30px;bottom:20px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;}@keyframes circleSmall2{0%{transform:rotateX(0deg) rotateY(45deg) rotate(-360deg);}}
#ground3rd{
        width:1080px;height:600px;
        position: relative;font-size:16px;
        overflow:hidden;border-radius:0px;
        margin:130px 16px 32px -260px;
background:url(https://img0.baidu.com/it/u=4148497417,1314102492&fm=253&fmt=auto&app=138&f=JPEG);
        background-position:center;
        background-size: cover;
        border:thick brown groove;perspective: 1000px;
}

#wb{position:absolute; left:90px; top:30px; text-align:center; font: bold 2.5em悟空大字库, sans-serif; width: 980px;height:100px; color:#fff000;animation: yao 0.2s linear infinite alternate;-webkit-text-stroke:2px #000000;}
@keyframes yao {
from{filter: hue-rotate(360deg)contrast(110%)brightness(260%) }
to {filter: hue-rotate(0deg) }}

#mpic {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: rote 80s linear infinite;
        cursor: pointer;transition: 0.3s;
        opacity: 0;
}

#ground3rd:hover #mpic {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: rote 80s linear infinite;
        cursor: pointer;transition: 0.3s;
        opacity: 1;
}


@keyframes rote {
        from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: -1600px 300px;
        }
}

#mpic1 {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: rotet 100s linear infinite;
        cursor: pointer;transition: 0.3s;
        opacity: 0;
}

#ground3rd:hover #mpic1 {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: rotet 100s linear infinite;
        cursor: pointer;transition: 0.3s;
        opacity: 1;
}

@keyframes rotet {
        from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: 0px -1600px;
        }
}


#songList li {
        cursor: pointer;
        color: #FFFFFF;
        font:thick 1em 微软雅黑;
}
#songList li:hover{opacity:1;color: #FFF000; }


</style>

<div id="ground3rd">
<imgid="mpic"style="width: 100%; height: 100%;background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6dd07f54-c3ab-447b-87ff-51ff48538c90/1543a15e-d6e9-4c4d-8432-8b1ac8023b7a.png')0 0/50% 70%" >
<imgid="mpic1"style="width: 100%; height: 100%;background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6dd07f54-c3ab-447b-87ff-51ff48538c90/1543a15e-d6e9-4c4d-8432-8b1ac8023b7a.png')0 0/30% 40%" >
<div id="wb"></div>
<ol id='songList' style="color:red;position:absolute;top:48px;left:56px;"></ol>
    <div id="rdisk"style="width:80px;height:80px;border: 2px solid #000000;background: url('https://365.tf/disk/tf/1667321249.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(0deg) rotateY(45deg) rotate(0deg);"></div>
    <div id="LRCShow"><div class="lyricDisp">亚伦影音工作室</div>
<div class="lyricDisp">打造完美的音乐享受</div></div>
</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">
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://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190926%2Fbeb090fa657a44f89180d92ff6742659.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670152027&t=eb911c45ce18ba1f8e5a91c0c41a3108","http://music.163.com/song/media/outer/url?id=1335942977.mp3",
` 作词 : 张藜\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://img0.baidu.com/it/u=4148497417,1314102492&fm=253&fmt=auto&app=138&f=JPEG","https://www.qqmc.com/up/kwlink.php?id=60010502&.mp3",
`站着等你三千年 - 王琪\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://img1.baidu.com/it/u=3484828946,290427325&fm=253&fmt=auto&app=138&f=JPG","https://www.qqmc.com/up/kwlink.php?id=3386318&.mp3",
`父亲 - 降央卓玛\n那是我小时候\n常坐在父亲肩头\n父亲是儿那登天的梯\n父亲是那拉车的牛\n忘不了粗茶淡饭将我养大\n忘不了一声长叹半壶老酒\n等我长大后\n山里孩子往外走\n想儿时一封家书千里写叮嘱\n盼儿归一袋闷烟满天数星斗\n都说养儿能防老\n可儿山高水远他乡留\n都说养儿能防老\n可你再苦再累不张口\n儿只有清歌一曲和泪唱\n愿天下父母平安度春秋\n`],
["送亲","https://img1.baidu.com/it/u=3581321230,521474128&fm=253&fmt=auto&app=120&f=JPEG","https://www.qqmc.com/up/kwlink.php?id=78712269&.mp3",
`\n\n\n\n《送亲》\n词/曲/唱：王琪\n\n歌词编辑：孟德良\n2019年12月02日\n\n你家门前 的山坡上 又开满了野花\n多想摘一朵 戴在你乌黑 的头发\n就像两小无猜 的我们 玩儿的过家家\n捏上一个泥娃娃 我当爹来你当妈\n长大后 你没有告别 匆匆离开了家\n而我还在 那山坡上 牧羊骑着马\n原本以为 我们是一根藤上 的两个瓜\n瓜熟蒂落 你却落进 墙外的繁华\n再见你时 你还是那头乌黑 的头发\n只是眼里藏不住 你想对我说的话\n我说 等你出嫁的那天 就让我送你吧\n你点点头不说话 眼泪就流过脸颊\n把我从梦中 惊醒的是 迎亲的唢呐\n本该迎亲的人 却变成送亲 的傻瓜\n手里捧着 山上的野花 骑着孤独的马\n你打开车窗 对我说 送到这里吧\n(Music)\n(The end)☆谢谢欣赏☆\n`],
["可可托海的牧羊人","https://pic.jitapai.com/wp-content/uploads/2020/11/2020111902424641.jpg","https://www.qqmc.com/up/kwlink.php?id=98172723&.mp3",
`\n\n\n\n《可可托海的牧羊人》\n词/曲/唱：王琪\n\n\n歌词编辑：孟德良\n2020年05月14日\n那夜的雨 也没能留住你\n山谷的风 它陪着我哭泣\n你的驼铃声\n仿佛还在 我耳边响起\n告诉我 你曾来过这里\n我酿的酒 喝不醉我自己\n你唱的歌 却让我一醉不起\n我愿意陪你\n翻过雪山 穿越戈壁\n可你不辞而别\n还断绝了 所有的消息\n心上人 我在可可托海 等你\n他们说 你嫁到了伊犁\n是不是因为那里\n有美丽的那拉提\n还是那里的杏花\n才能酿出 你要的甜蜜\n毡房外 又有驼铃声声 响起\n我知道 那一定不是你\n再没人能唱出\n像你那样 动人的歌曲\n再没有一个 美丽的姑娘\n让我难忘记\n(Music)\n(The end)☆谢谢欣赏☆\n\n`],
["父亲的草原母亲的河","https://img0.baidu.com/it/u=43009920,1508854380&fm=253&fmt=auto&app=138&f=JPEG","https://www.qqmc.com/up/kwlink.php?id=174683646&.mp3",
`父亲的草原母亲的河 (Live) - 降央卓玛\n词：席慕容\n曲：乌兰托噶\n父亲曾经形容草原的清香\n让他在天涯海角也从不能相忘\n母亲总爱描摹那大河浩荡\n奔流在蒙古高原我遥远的家乡\n如今终于见到这辽阔大地\n站在这芬芳的草原上我泪落如雨\n河水在传唱着祖先的祝福\n保佑漂泊的孩子找到回家的路\n嘿嘿 父亲的草原\n哎嗨嘿 母亲的河\n虽然已经不能用\n不能用母语来诉说\n请接纳我的悲伤我的欢乐\n我也是高原的孩子啊\n心里有一首歌\n歌中有我父亲的草原\n母亲的河\n母亲的河\n`],
["好汉歌","https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/4b90f603738da977d247bce6bd51f8198718e397.jpg","https://www.qqmc.com/up/kwlink.php?id=98012560&.mp3",`好汉歌 - 刘欢\n作词：易茗\n作曲：赵季平\n大河向东流哇\n天上的星星参北斗哇\n嘿嘿嘿嘿参北斗哇\n生死之交一碗酒哇\n说走咱就走哇\n你有我有全都有哇\n嘿嘿嘿嘿全都有哇\n水里火里不回头哇\n路见不平一声吼哇\n该出手时就出手哇\n风风火火闯九州哇\n嘿呀依儿呀\n嘿嘿依儿呀\n嘿呀依儿呀\n唉嘿唉嘿依儿呀\n嘿嘿嘿呦嘿嘿\n不分贵贱一碗酒哇\n一路看天不低头哇\n`],
["胡杨","https://img95.699pic.com/photo/50074/5954.jpg_wh860.jpg","https://www.qqmc.com/up/kwlink.php?id=9838636&.mp3",
`胡杨 - 苏伟\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.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>

马黑黑 发表于 2022-11-9 17:58

列表点击后颜色应与众不同，我的多曲播放器有这个功能

起个网名好难 发表于 2022-11-9 18:42

突出显示选择的条目（变色或变字号）。

樵歌 发表于 2022-11-9 19:11

制作真精美。先欣赏一会。{:4_190:}

红影 发表于 2022-11-9 19:23

漂亮的制作，喜欢的歌儿。欣赏亚伦老师好帖{:4_204:}

查看完整版本: 我也克隆一下列表播放器《女人如烟等》