午夜怨曲（送小辣椒）
本帖最后由 马黑黑 于 2022-2-23 14:48 编辑 <br /><br /><style type="text/css">/* 帖子外框 */
#waiDiv { position: relative; left: -214px; top:80px; width: 1024px; height: 576px; background: url('/data/attachment/forum/202202/23/144139mro5dycgcj68vcjm.jpg') no-repeat; padding: 12px; }
/* 帖子标题 */
#txtDiv { position: absolute; color:#ddd; font-weight:bold; font-size: 2em; text-shadow: 2px 2px 4px #ccc; }
/* 歌词 */
#lrcDiv { width: 300px; height: 43px; overflow: hidden; position: relative; left: 500px; top: 40px; 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: #fff; text-shadow: 1px 1px 2px red ; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
/* 按钮 */
#btn-ro { position: relative; left: 450px; width: 8px; height: 8px; background: white; border: 13px solid; border-color: orange green; 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>
<div id="waiDiv">
<div id="txtDiv">午<br>夜<br>怨<br>曲</div>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<div id="btn-ro"></div>
</div>
<audio id="myplayer" src="http://www.kumeiwp.com/sub/filestores/2021/12/27/db5031ddc52e16860f4aeb70b530099b.mp3"></audio>
<script language="javascript">
var lrcAr=[
["00:00.000"," 作词 : 叶世荣"],
["00:01.000"," 作曲 : 黄家驹"],
["00:27.600","从来不知想拥有多少的理想"],
["00:33.599","还离不开种种困忧"],
["00:40.599","勉强去掩饰失意的感觉"],
["00:46.599","再次听到昨日的冷嘲"],
["00:52.599","徘徊於街中恐怕只得孤独"],
["00:58.599","寻回思忆中的碎片"],
["01:05.600","变作了一堆草芥风中散"],
["01:11.600","与你奏过午夜的怨曲"],
["01:16.600","总有挫折打碎我的心"],
["01:19.600","紧抱过去抑压了的手"],
["01:23.600","我与你也彼此一起艰苦过"],
["01:28.600","写上每句冰冷冷的诗"],
["01:31.600","不会放弃高唱这首歌"],
["01:36.600","我与你也彼此真的相识过"],
["01:55.600","从回忆中找不到天真的笑声"],
["02:01.600","曾留不低心中斗争"],
["02:08.600","每次去担当失意的主角"],
["02:14.600","冷笑变作故事的作者"],
["02:19.600","总有挫折打碎我的心"],
["02:22.600","紧抱过去抑压了的手"],
["02:27.600","我与你也彼此一起艰苦过"],
["02:32.600","写上每句冰冷冷的诗"],
["02:35.600","不会放弃高唱这首歌"],
["02:39.600","我与你也彼此真的相识过"],
["03:11.600","啊......啊......障碍能撕破"],
["03:22.600","总有挫折打碎我的心"],
["03:25.600","紧抱过去抑压了的手"],
["03:30.600","我与你也彼此一起艰苦过"],
["03:35.600","写上每句冰冷冷的诗"],
["03:38.600","不会放弃高唱这首歌"],
["03:42.600","我与你也彼此真的相识过"],
["03:47.600","总有挫折打碎我的心"],
["03:51.600","紧抱过去抑压了的手"],
["03:55.600","我与你也彼此一起艰苦过"],
["04:00.600","写上每句冰冷冷的诗"],
["04:03.600","不会放弃高唱这首歌"],
["04:07.600","我与你也彼此真的相识过"],
["04:12.600","总有挫折打碎我的心"],
["04:16.600","紧抱过去抑压了的手"],
["04:20.600","我与你也彼此一起艰苦过"],
["04:25.600","——永远的Beyond"]
];
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 = "#fff";
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>
另一个位置：
http://gxblk.byethost11.com/art/bshow.php?st=6&sd=yy&art=hm_1645599101 老黑这个礼物好。小辣椒收礼开心。{:4_204:}{:4_190:} 酒吧歌曲，挺好听的。{:4_190:} @小辣椒 加林森 发表于 2022-2-23 18:58
@小辣椒
{:5_108:} 马黑黑 发表于 2022-2-23 19:31
不客气。{:4_190:} 加林森 发表于 2022-2-23 19:42
不客气。
小辣椒是不是练脖子去了{:5_117:} 可以滚动的变色歌词同步，黑黑又出新教程{:4_187:} 马黑黑 发表于 2022-2-23 19:42
小辣椒是不是练脖子去了
可能还没有回家吧。 无论什么都能弄出来，黑黑太厉害了{:4_199:} 又来新效果，辣椒收礼开心 红影 发表于 2022-2-23 19:46
无论什么都能弄出来，黑黑太厉害了
这个我思考好久的，思考的结果还好，但真正动手做时老做不好，后来才发现原因是我抽的烟不对，是老乡给的烟，不能激发创作激情{:4_170:} 绿叶清舟 发表于 2022-2-23 19:58
又来新效果，辣椒收礼开心
下回找个马甲给你{:4_170:} 马黑黑 发表于 2022-2-23 20:00
下回找个马甲给你
哪个马的马甲{:4_189:} 绿叶清舟 发表于 2022-2-23 20:03
哪个马的马甲
黑马的好 哇塞~~~谢谢黑黑的礼物{:4_187:} 先看看这个可以高亮的歌词同步的精彩制作，黑黑没有你办不到的了{:4_178:} 这个设置是手动播放的 加林森 发表于 2022-2-23 17:12
老黑这个礼物好。小辣椒收礼开心。
谢谢队长，晚上好{:4_187:}