红枫 发表于 2022-9-14 22:35
我估计是歌词或播放器带有边框！暂还没去看代码。
谢谢您光临指导！我已认真看代码并改写了。
非常开心 发表于 2022-9-15 06:44
欣赏楼主的新作，点赞多谢分享！
谢谢您临贴支持和鼓励！
蓝魔 发表于 2022-9-14 22:31
欣赏一下，谢谢。
谢谢您临贴支持和鼓励！
寒冬残荷 发表于 2022-9-15 12:48
这个LRC歌词JS代码在手机上不能自动播放，所以播放器加了控制条，这样在手机上可以点击播放音乐。
我不用控制条（大小设为0），手机上要播放或暂停，点击图标就行。图标也可以用整幅大图替代的。
寒冬残荷 发表于 2022-9-15 12:48
这个LRC歌词JS代码在手机上不能自动播放，所以播放器加了控制条，这样在手机上可以点击播放音乐。
看看这个能不能在手机上播放，能播更好不能就按一下右下角的光盘图标
<style type="text/css">
@import"http://cesholl.cn3v.work/sstyle/lrcPlayerX.min.css";
#div1{position:relative; width: 1000px; height: 600px; margin: 15px auto; overflow : hidden; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 5px 15px #600030; background-size:100% 100%;background-image:url(https://s1.ax1x.com/2022/03/13/bbOClQ.gif); }
#dhx{animation: slider1 5s linear infinite ;width:700px; height:600px; position:absolute; top:50px; left:-120px; -webkit-mask-image:radial-gradient(black 25%, transparent 60%);}
@keyframes slider1 {
from {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(140%);}
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
to {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(140%);}}
.maskgif {width:100%; height:100%; position: absolute;top:0px; left:0px;}
.lrcShow ul li.active{ /* 缺省是40px 楷体 */
font-size: 55px;
font-family:微软雅黑;
}
.mCtrl { /* 缺省是90px 90px */
width:30px;height:30px;
}
</style>
<div id="div1">
<img id="dhx" src="https://pic.imgdb.cn/item/631f43ef16f2c2beb1a57359.gif" />
<img src="http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif" class="maskgif" />
<img src="http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213392999032271.gif" class="maskgif" />
<div class="items" style="position:absolute; top:50px; right:50px; color:#fff000;width:320px;height:80px; font-family:华文隶书; font-size:35px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px 0);"> 吉特巴舞曲- </br>《唱着歌儿嗨起来》</div>
<divclass="lrcShow" id='sLRC'></div>
<divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
document.write('<script src="http://cesholl.cn3v.work/scripts/lrcPlayerX.min.js" type="text/javascript"><\/script>');
</script>
<script type="text/javascript">
var lrc =`
《唱着歌儿嗨起来》
词：李秉笙
曲：敏子
演唱：敏子/许志刚
LRC歌词：寒冬残荷
你正在赶路
我在爬坡
人生就是一首歌
一呀一首歌
起起落落悲喜
悲喜都有
曲曲折折快乐
快乐度过
你正在翻山
我在趟河
人生就是一首歌
一呀一首歌
坎坎坷坷共同
共同闯过
风风雨雨一起
一起坚守
人生就是一首歌
一呀一首歌
酸甜苦辣唱着过
唱呀唱着过
月圆月缺人有离合
唱出快乐好生活
好呀好生活
人生就是一首歌
一呀一首歌
得失成败唱着过
唱呀唱着过
天有阴晴潮有涨落
唱着歌儿好幸福
好呀好幸福
风雨过后就有彩虹
寒冬尽头有春色
有呀有春色
只要你执着
执着朝前走
酸甜苦辣都是歌
都是歌
艰难困苦都是财富
一张白纸绘蓝图
绘呀绘蓝图
只要你坚强
坚强不退缩
青春年华莫错过
莫错过
人生就是一首歌
一呀一首歌
酸甜苦辣唱着过
唱呀唱着过
月圆月缺人有离合
唱出快乐好生活
好呀好生活
人生就是一首歌
一呀一首歌
得失成败唱着过
唱呀唱着过
天有阴晴潮有涨落
唱着歌儿好幸福
好呀好幸福
天有阴晴潮有涨落
唱着歌儿好幸福
好呀好幸福
唱着歌儿好幸福
好呀好幸福
【谢谢观看！】
`;
var opts = {
lrcTxt:lrc,
lrcShowID:'sLRC',
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'http://url.amp3a.com/kuwo.php/54238887.mp3'
};
new lrcPlayerX(opts);
</script>
寒冬残荷 发表于 2022-9-15 12:46
老师，中午好！是的，我全部从头到尾看了代码。除了JS部分看不懂改不了，其它的我都按我理解的改了。
最末尾的代码肯定是多余的。
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");
my_audio.onended = function(){document.getElementById("aplay").className="";};
my_audio.onpause = function(){document.getElementById("aplay").className="";};
var lyric = parseLyric(songkrc);
my_audio.ontimeupdate = function () { for (var i = 0;
i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("ullrc").innerHTML = lyric; if(i+1==lyric.length){document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric;};};};}; my_audio.play();
</script>
195400 发表于 2022-9-15 13:25
看看这个能不能在手机上播放，能播更好不能就按一下右下角的光盘图标
光盘在闪点图的下一层，点不了光盘。干脆以闪点图为按钮图吧！
红枫 发表于 2022-9-15 21:40
光盘在闪点图的下一层，点不了光盘。干脆以闪点图为按钮图吧！
光盘为了不太显眼做得较小，把画面放大一些就可以点上了。
195400 发表于 2022-9-15 13:25
看看这个能不能在手机上播放，能播更好不能就按一下右下角的光盘图标
老师，中午好！这个在手机上能自动播放。可惜不能循环。改为循环播放，音乐能循环，但第二遍起就没有LRC歌词。
寒冬残荷 发表于 2022-9-20 12:54
老师，中午好！这个在手机上能自动播放。可惜不能循环。改为循环播放，音乐能循环，但第二遍起就没有LRC ...
确实是有问题，在电脑上也是同样的表现。
换了一个代码，倒是能循环了就是显示差点意思。