《走自己的路》 GALA TO：小辣椒
本帖最后由 加林森 于 2022-2-27 18:42 编辑 <br /><br /><style type="text/css">/* 帖子外框 */
#waiDiv { position: relative; left: -214px; top:80px; width: 1024px; height: 576px; background: url('https://pic.imgdb.cn/item/621b37e42ab3f51d91a79db4.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>路</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/2022/02/26/92f4ba2a09186aae5f79e702cef5fa42.mp3"></audio>
<script language="javascript">
var lrcAr=[
["00:01.64","走自己的路 - GALA[乐队"],
["00:16.08","词：苏朵 曲：苏朵"],
["00:18.28","编曲：GALA乐队&欧阳尹路"],
["00:19.43","岳麓山川我呼啸飞跃海拔"],
["00:23.08","桀骜不驯孤身驰骋到白发"],
["00:26.69","江河湖海我奔腾翻涌浪花"],
["00:30.72","所有辜负都以放逐为代价"],
["00:35.20","你曾点燃黑夜在星空之下"],
["00:39.54","那是一生中最怀念的刹那"],
["00:43.71","我不知道究竟该如何表达"],
["00:48.07","让你心碎我灵魂更似刀伐"],
["00:51.98","我是匹野马"],
["01:00.64","请忘记我吧"],
["01:09.57","日出送晚霞"],
["01:17.31","美丽如昙花"],
["01:43.51","物换星移寄托随冰雪融化"],
["01:47.52","远方再聚也许是痴人梦话"],
["01:51.60","只有鸟儿在身旁唱着歌啊"],
["01:55.62","你若听到就别再为我牵挂"],
["01:59.87","我是匹野马"],
["02:08.32","正浪迹天涯"],
["02:16.73","路在我脚下"],
["02:24.88","狂风卷起沙"],
["02:35.18","啦啦啦啦啦啦啦..."],
["02:41.30","啦啦啦啦啦啦啦..."],
["03:08.63","我是匹野马"],
["03:16.41","要浪迹天涯"],
["03:24.90","我是匹野马"],
["03:33.46","美丽如昙花"],
["04:26.14","谢谢欣赏"]
];
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> @小辣椒 @马黑黑 @红影 好漂亮的小碟播放器{:4_199:} 音乐很好听{:4_208:} 队长现在技艺高超，羡慕几下{:4_205:} 最开始有一句“回来爱的身边-林忆莲”，这个好像不是歌曲里的吧。 1、2句的歌词同步有点问题，后面的对了。队长真棒{:4_187:} 本帖最后由 加林森 于 2022-2-27 18:41 编辑
红影 发表于 2022-2-27 18:25
最开始有一句“回来爱的身边-林忆莲”，这个好像不是歌曲里的吧。
忘记删除了。{:4_189:} 千羽 发表于 2022-2-27 17:48
好漂亮的小碟播放器
谢谢千羽支持。{:4_187:}{:4_190:} 千羽 发表于 2022-2-27 17:49
音乐很好听
嗯嗯。{:4_190:} 红影 发表于 2022-2-27 18:27
1、2句的歌词同步有点问题，后面的对了。队长真棒
现在修改了。 不错的制作 马黑黑 发表于 2022-2-27 18:58
不错的制作
谢谢！{:4_190:} 好听好看，队长好分享， 真棒！ 辣椒收礼开心！
{:4_204:}{:4_199:} 大猫咪 发表于 2022-2-27 19:35
好听好看，队长好分享， 真棒！ 辣椒收礼开心！
猫猫也喜欢啊。{:4_189:} 加林森 发表于 2022-2-27 19:41
猫猫也喜欢啊。
经典，非常喜欢{:4_187:} 加林森 发表于 2022-2-27 19:33
谢谢！
{:5_108:} 加林森 发表于 2022-2-27 18:40
谢谢千羽支持。
队长不客气{:4_181:} 里面的乐手歌手没动作呵。能听到歌声。{:4_203:} 加林森 发表于 2022-2-27 18:37
忘记删除了。
嗯嗯，现在好了。