DJ音乐梅花弄弄弄 TO：冬天的雨
<style type="text/css">/* 帖子外框 */
#waiDiv { position: relative; left: -420px; top:150px; width: 1440px; height: 720px; background: url('https://wj.zp68.com/lxx/yunhua/2022/06/mhnnn.gif') no-repeat; padding: 12px; }
/* 帖子标题 */
//#txtDiv { position: absolute; color:#cd406b; font-weight:bold; font-size: 2em; text-shadow: 1px 1px 2px #cdb840; }
/* 歌词 */
#lrcDiv { width: 300px; height: 43px; overflow: hidden; position: relative; left: 180px; top: 100px; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 20px; font-size: 1em; line-height: 20px; color: #fffe89; text-shadow: 1px 1px 2px Red ; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
/* 按钮 */
#btn-ro { position: relative; left: 180px; top: -70px; width: 8px; height: 8px; background: white; border: 13px solid; border-color: orange Red; border-radius: 50%; box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25); cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
#9400D3
//<div id="waiDiv">
//<div id="txtDiv">帖<br>赠<br>：<br>冬<br>雨</div>
//<div id="lrcDiv"><ul id="lrcUl"></ul></div>
//<div id="btn-ro"></div>
</div>
<audio id="myplayer" src="https://wj.zp68.com/lxx/yunhua/2022/06/mhnnn.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<script language="javascript">
var lrcAr=[
["00:00.000",""],
["00:01.96","梅花弄弄弄"],
["00:04.33","词：言亭 曲：马博"],
["00:07.74","帖赠：冬雨"],
["00:11.35","LRC编辑：小辣椒"],
["00:15.51","山野间蓝的天亦空空如也"],
["00:19.07","满山得红梅花开的多娇艳"],
["00:22.86","牵着你的小手一起看蓝天"],
["00:26.72","云朵变成你的笑脸"],
["00:30.45","梅花它虽不及玫瑰的美艳"],
["00:34.19","它却是山野中最强的花仙"],
["00:37.85","你的冷傲像孤梅那样的干脆"],
["00:41.65","想把你保护把你陪"],
["00:44.94","梅花弄弄弄弄弄弄弄弄"],
["00:48.67","我们相识在寒冷的冬天"],
["00:52.47","就算到海角就算到天边"],
["00:56.27","我们一起谱写这诗篇"],
["01:00.19","梅花弄弄弄弄弄弄弄弄"],
["01:03.75","我们相遇在梅海的山间"],
["01:07.66","问情是何物叫人心相连"],
["01:11.28","我们一起牵手到永远"],
["01:17.75","冬雨做一次这个歌词同步"],
["01:48.02","山野间蓝的天亦空空如也"],
["01:51.58","满山的红梅花开的多娇艳"],
["01:55.18","牵着你的小手一起看蓝天"],
["01:59.10","云朵变成你的笑脸"],
["02:02.88","梅花它虽不及玫瑰的美艳"],
["02:06.56","它却是山野中最强的花仙"],
["02:10.22","你的冷傲像孤梅那样的干脆"],
["02:14.08","想把你保护把你陪"],
["02:17.57","梅花弄弄弄弄弄弄弄弄"],
["02:21.17","我们相识在寒冷的冬天"],
["02:24.90","就算到海角就算到天边"],
["02:28.69","我们一起谱写这诗篇"],
["02:32.67","梅花弄弄弄弄弄弄弄弄"],
["02:36.22","我们相识在梅海的山间"],
["02:40.14","问情是何物叫人心相连"],
["02:43.80","我们一起牵手到永远"],
["02:47.96","梅花弄弄弄弄弄弄弄弄"],
["02:51.27","我们相识在寒冷的冬天"],
["02:55.19","就算到海角就算到天边"],
["02:58.79","我们一起谱写这诗篇"],
["03:02.65","梅花弄弄弄弄弄弄弄弄"],
["03:06.51","我们相遇在梅海的山间"],
["03:10.25","问情是何物叫人心相连"],
["03:13.91","我们一起牵手到永远"],
["03:20.25","冬雨做一次这个歌词同步"],
["04:22.43","谢谢欣赏"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
var mbtn = document.getElementById('btn-ro'); //播放暂停按钮
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步高亮、翻滚歌词
myaud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "#fffe89";
lrcUl.style.top ="-" + (j * 20 - 20) + "px";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "orange";
}
}
}
// 播放结束重置歌词样式
myaud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "black";
lrcUl.style.top = 0;
this.play();
}
// 按钮相关
myaud.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mbtn.onclick = function(){ myaud.paused ? (myaud.play(), this.style.animationPlayState="running") : (myaud.pause(), this.style.animationPlayState="paused"); }
</script>
<br><br><br><br><br><br><br><br><br><br><br><br> @冬天的雨
做一次，这个不限时间{:4_170:}
源码
午夜怨曲（送小辣椒）
https://www.huachaowang.com/forum.php?mod=viewthread&tid=57266&fromuid=4275
(出处: 花潮论坛)
黑黑的源码你自己可以看看，我现在就改了自动播放，字体颜色我改不好，就现在这样了 小辣椒制作得好漂亮啊。真美，赞！{:4_187:} @马黑黑
黑黑，这个歌词同步，其实我早在做了，只是歌词颜色我改不好，本来想你的绿和黄的按钮播放器颜色改歌词同步颜色，就是改不好{:4_203:}
其实用css做歌词同步真的很强大，播放器按钮也是纯css制作，我第一次看见这个就喜欢上了，就是歌词颜色修改不好，感觉这个颜色随歌词变动换颜色，我看不懂代码，所以不知道怎么改，瞎捣鼓好久了，还是就这样。。。。。
加林森 发表于 2022-3-8 21:34
小辣椒制作得好漂亮啊。真美，赞！
队长好，谢谢欣赏{:4_187:} 小辣椒 发表于 2022-3-8 21:38
队长好，谢谢欣赏
我现在泡音乐厅的感觉呢。{:4_170:} 辣椒这制作真棒 {:5_106:} 好可爱，哈哈，冬雨收礼开心 {:4_187:}{:4_191:} 亲爱的这个做得真漂亮，那个原本的播放器是截的动图吧，按钮这个才是真的能操控的。
制作漂亮，构思巧妙。这个做得真棒{:4_199:} 亲爱的最帖子肯动脑筋，这个好棒的{:4_199:} 小辣椒 发表于 2022-3-8 21:37
@马黑黑
黑黑，这个歌词同步，其实我早在做了，只是歌词颜色我改不好，本来想你的绿和黄的按钮播放器颜 ...
这个歌词颜色跟跳舞小人背后的背景很协调的，已经很棒了{:4_187:} 加林森 发表于 2022-3-8 21:41
我现在泡音乐厅的感觉呢。
哈哈~~DJ音乐就这样的，特别动感 大猫咪 发表于 2022-3-8 21:57
辣椒这制作真棒好可爱，哈哈，冬雨收礼开心
猫猫，这个是歌词同步，黑黑分享的教程，你也是可以学习做的 小辣椒 发表于 2022-3-8 22:01
猫猫，这个是歌词同步，黑黑分享的教程，你也是可以学习做的
好的先把那2个搞熟悉了，就学习 {:4_187:} 红影 发表于 2022-3-8 21:57
亲爱的这个做得真漂亮，那个原本的播放器是截的动图吧，按钮这个才是真的能操控的。
制作漂亮，构思巧妙。 ...
是的，这个按钮我会换颜色，歌词我不会换，换来换去出来都不是我想要的颜色，很奇怪的我明明绿的色码，出来是灰的了{:4_203:} 红影 发表于 2022-3-8 21:59
亲爱的最帖子肯动脑筋，这个好棒的
主要是DJ音乐，我就用了这个场景 大猫咪 发表于 2022-3-8 22:02
好的先把那2个搞熟悉了，就学习
你可以学习很多的，其实黑黑分享的东东太多了 小辣椒 发表于 2022-3-8 22:05
你可以学习很多的，其实黑黑分享的东东太多了
嗯嗯 必须学习{:4_187:}挺好玩的 大猫咪 发表于 2022-3-8 22:06
嗯嗯 必须学习挺好玩的
会上瘾的，其实我不玩播放器早就退出网络了，周围的朋友都不玩了，就我舍不得丢了{:4_173:} 小辣椒 发表于 2022-3-8 22:07
会上瘾的，其实我不玩播放器早就退出网络了，周围的朋友都不玩了，就我舍不得丢了
就是 没事情学习下也好，网络时代了，多学点也是好的{:4_187:}
页:
[1]
2