《回来爱的身边》 -林忆莲
<style type="text/css">
/* 帖子外框 */
#waiDiv { position: relative; left: -214px; top:80px; width: 1024px; height: 576px; background: url('https://pic.imgdb.cn/item/621a0b7c2ab3f51d916ece5a.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>的<br>身<br>边</div>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<div id="btn-ro"></div>
</div>
<audio id="myplayer" src="https://www.joy127.com/url/88732.mp3"></audio>
<script language="javascript">
var lrcAr=[
["00:00:00","回来爱的身边-林忆莲"],
["00:49.00","触不到你的梦"],
["00:50.22","感不到你心动"],
["00:51.15","听不到你的话"],
["00:53.76","听得到我哭吧"],
["00:54.92","又站在你眼前"],
["00:55.35","望着是你默然"],
["00:56.58","正要强忍不哭"],
["00:57.18","那里禁得心酸"],
["00:58.46","知不知我呼唤"],
["00:59.57","知不知我依伴"],
["01:02.71","知不知我心乱"],
["01:03.41","知不知我不断"],
["01:04.67","念着是你当年"],
["01:06.04","日夜在痛缠绵"],
["01:08.31","纵似爱的深渊"],
["01:10.57","我却再想依恋"],
["01:18.10","回来爱的身边"],
["01:22.43","这天"],
["01:24.70","回来爱的身边"],
["01:28.85","可否给我热暖"],
["01:31.40","我是舍不得爱恋"],
["01:34.78","可知我心里依然"],
["01:45.04","知不知我呼唤"],
["01:48.12","知不知我依伴"],
["01:50.95","知不知我心乱"],
["02:04.39","知不知我不断"],
["02:08.19","念着是你当年"],
["02:15.56","但愿让我回旋"],
["02:34.88","再爱你多一点"],
["02:58.10","再爱你多一天"],
["03:06.55","求你也再次为我醉一遍"],
["03:24.20","爱就算曾离弃过尚有点"],
["03:48.81","OOH"],
["03:53.20","可不可再次热恋"],
["03:56.72","说吧说声但求承认"],
["03:58.44","爱尚有的是明天"],
["04:10.04","回来爱的身边留多一天"],
["04:40.81","(这天)"],
["04:43.10","回来爱的身边"],
["04:47.60","可知一切未变"],
["04:49.57","我是舍不得爱恋"],
["04:56.07","可否再一次依然"],
["04:59.92","让我躺于你的肩"],
["05:03.61","让我安躺于你的肩"],
["05:18.33","回来爱的身边"]
];
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> 队长晚上好，你这个歌词没有同步 小辣椒 发表于 2022-2-26 21:49
队长晚上好，你这个歌词没有同步
好像是有点问题，我还得慢慢地去调啊。 加林森 发表于 2022-2-26 21:54
好像是有点问题，我还得慢慢地去调啊。
队长，歌词同步自己调是很难操作的，你歌词编辑器进去听一遍音乐，就完成了。我不知道你怎么辑的 第一次听的，好听 小辣椒 发表于 2022-2-26 21:58
队长，歌词同步自己调是很难操作的，你歌词编辑器进去听一遍音乐，就完成了。我不知道你怎么辑的
歌词编辑器？是论坛的还是另外地方的？ 绿叶清舟 发表于 2022-2-26 22:03
第一次听的，好听
清舟晚上好，老歌曲了。 加林森 发表于 2022-2-26 22:05
歌词编辑器？是论坛的还是另外地方的？
你上次给我看过你的编辑器，我也是有发你过，我还问你解压没有，你说都解压了 加林森 发表于 2022-2-26 22:05
歌词编辑器？是论坛的还是另外地方的？
是另外的，有个小软件，可以自己编辑歌词。 队长做得很漂亮，用了css按钮，还有歌词同步的歌词颜色也做了调整。{:4_187:}
就是同步有点问题，还有图片也有点失真了。 红影 发表于 2022-2-26 22:08
是另外的，有个小软件，可以自己编辑歌词。
我没有这个软件 小辣椒 发表于 2022-2-26 22:06
你上次给我看过你的编辑器，我也是有发你过，我还问你解压没有，你说都解压了
嗯嗯，我记起来了，这几天忙着学教程吧这个软件忘记了。{:5_111:} 红影 发表于 2022-2-26 22:09
队长做得很漂亮，用了css按钮，还有歌词同步的歌词颜色也做了调整。
就是同步有点问题，还有图片 ...
是的是的，下次一定注意了。谢谢红影提醒。{:4_187:} 加林森 发表于 2022-2-26 22:06
清舟晚上好，老歌曲了。
队长好，还是老歌好听的 绿叶清舟 发表于 2022-2-26 22:15
队长好，还是老歌好听的
就是，老歌曲有灵魂的。 加林森 发表于 2022-2-26 22:09
我没有这个软件
我微信上发给过你的，就是前段时间。队长去找找。 经典老歌，队长好分享， 真棒！
{:4_204:}{:4_190:} 红影 发表于 2022-2-26 22:34
我微信上发给过你的，就是前段时间。队长去找找。
嗯嗯，谢谢！{:4_187:} 大猫咪 发表于 2022-2-26 22:37
经典老歌，队长好分享， 真棒！
猫猫喜欢就好！{:4_190:} 加林森 发表于 2022-2-26 23:11
猫猫喜欢就好！
非常喜欢 谢谢队长 中午好 {:4_187:}{:4_190:}
页:
[1]
2