照搬网名老师代码：多曲音乐选播
<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:15px; 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:600px;position:relative;font-size:16px;overflow:hidden;border-radius:0px;margin:10px 16px 32px -255px; 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:#d0d0d0 15px inset; border-top:#e0e0e0 15px inset;border-bottom:#adadad 15px inset; }
#wb{position:absolute; left:60px; top:10px; text-align:center; font-size:4em; color:#d94600; width: 950px;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:10px; left:10px;"></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://pic1.imgdb.cn/item/63666eb916f2c2beb1869e03.jpg", "http://music.163.com/song/media/outer/url?id=1840861309.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 "],
["听闻远方有你", "https://pic1.imgdb.cn/item/63667ca616f2c2beb1bb51d1.jpg", "https://www.qqmc.com/up/kwlink.php?id=201791225.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这算不算相逢\n我还是那么喜欢你\n想与你到白头\n我还是一样喜欢你\n只为你的温柔\n \n"],
["还没有爱够", "https://pic1.imgdb.cn/item/6366809116f2c2beb1d45a58.jpg", "https://www.qqmc.com/up/kwlink.php?id=212925971.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 "],
];
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>
觉得还唱男声听着舒服些。 https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F13500260565%2F0&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670283007&t=f3aed0d6dae8b9b2d7cc37de11dd4a83 欣赏精美音画佳作！ {:4_199:}{:4_199:}
欣赏佳作 问好寒冬残荷，欣赏精彩的制作{:4_187:} 标题字用的漂亮{:4_178:} 樵歌 发表于 2022-11-6 07:00
觉得还唱男声听着舒服些。
感谢樵歌管理临贴支持和鼓励！ 起个网名好难 发表于 2022-11-6 07:30
感谢老师临贴支持和鼓励！没有时间慢慢“消化”那些JS代码，只是找到我想添加的部分加入我想要的效果的语句。{:5_114:} 相约爱晚亭 发表于 2022-11-6 07:38
欣赏精美音画佳作！
感谢您临贴支持和鼓励！ 冬天的雨 发表于 2022-11-6 08:09
欣赏佳作
感谢冬天的雨的支持和鼓励！ 小辣椒 发表于 2022-11-6 15:34
问好寒冬残荷，欣赏精彩的制作
晚上好！感谢小辣椒管理临贴支持和鼓励！ 寒冬残荷 发表于 2022-11-6 20:07
晚上好！感谢小辣椒管理临贴支持和鼓励！
不客气，感谢你的精彩分享 小辣椒 发表于 2022-11-6 15:35
标题字用的漂亮
谢谢小辣椒版主的赞赏！照抄网名老师的代码总得有自己的一点点东西呀！{:5_117:} 寒冬残荷 发表于 2022-11-6 20:10
谢谢小辣椒版主的赞赏！照抄网名老师的代码总得有自己的一点点东西呀！
漂亮，白天我仔细看了，都非常精彩 寒冬残荷 发表于 2022-11-6 20:03
感谢老师临贴支持和鼓励！没有时间慢慢“消化”那些JS代码，只是找到我想添加的部分加入我想要的效果的语 ...
不急不急，我也在试着改进它。 有摇摆字效果还有换背景多歌曲切换效果，这个帖子好漂亮{:4_187:} 本帖最后由 深秋红枫 于 2022-11-7 18:20 编辑
很棒！赞一个！！！
你能找到 "也曾经年轻“的 LRC 标识码？我找到了，确实藏得很深！ 红影 发表于 2022-11-7 17:04
有摇摆字效果还有换背景多歌曲切换效果，这个帖子好漂亮
感谢红影管理临贴支持和鼓励！{:4_204:} 深秋红枫 发表于 2022-11-7 17:13
很棒！赞一个！！！
你能找到 "也曾经年轻“的 LRC 标识码？我找到了，确实藏得很深！
谢谢欣赏！
能找到呀，网名老师的所有关于音乐JS代码中都藏有“也曾年轻”的代码。以前我使用时还去掉呢，这里我没有去掉是因为既然是照搬的就不去掉为好（尊重老师{:5_117:}），但我都避过不让这四个字显示。{:5_117:}
页:
[1]
2