《错位时空》（学习歌词同步制作）
<style type="text/css">
#bigPa { position: relative; left:-303px; width: 1200px; height: 700px; top: 120px; background:#333 url('http://image.hnol.net/c/2022-02/17/16/202202171622055671-5088534.gif') no-repeat center/cover; box-shadow: 0 0 0 4px #444;}
#gcDiv { width: 380px;position:relative; left: 760px;top: 380px;}
#lrcDiv { position: relative; top: 20px; color: #A4D1D7; font-size: 1.8em; text-shadow: 1px 1px 2px #000; }
.btn-ro {
width: 14px; height: 14px;
background: LightCyan;
border: 24px solid;
border-color: PowDerBlue LightBLue;
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="bigPa">
<div id="gcDiv">
<div id="btn-ro" class="btn-ro">
<div styl="position:relative;left:360px;top:80px;"></div></div>
<audio id="ymusic" src="http://www.kumeiwp.com/sub/filestores/2021/01/26/3257549a45c411cb86e2472da1afa6d8.mp3"
autoplay="autoplay" loop="loop"></audio>
<div id="lrcDiv" style="padding:10px; width:380px;height:30px;">艾辰 - 错位时空</div>
</div>
</div>
<script language="javascript">
var lrcAr=[
["00:01.20","歌词同步播放器学习"],
["00:04.20","感谢黑黑的代码"],
["00:09.20","祝马黑黑工作顺利"],
["00:13.51",""],
["00:15.50","填不满半排观众的电影"],
["00:19.12","直到散场时突然亮起灯"],
["00:23.03","字幕定格在某某出品和发行"],
["00:26.30","我目送 他们行色匆匆"],
["00:29.88","像个自不量力的复读生"],
["00:33.45","完不成金榜题名的使命"],
["00:37.28","命不是猜剪刀石头布的决定"],
["00:41.03","那么任性"],
["00:44.52","我吹过你吹过的晚风"],
["00:48.12","那我们算不算 相拥"],
["00:51.73","可如梦初醒般的两手空空"],
["00:55.34","心也空"],
["00:58.90","我吹过你吹过的晚风"],
["01:02.50","是否看过同样 风景"],
["01:06.10","像扰乱时差留在错位时空"],
["01:09.67","终是空 是空"],
["01:30.88","数不完见证许愿的繁星"],
["01:34.31","没灵验谁来安慰坏心情"],
["01:38.23","十字路口闪烁不停的信号灯"],
["01:41.49","有个人 显然心事重重"],
["01:45.11","三个字 只能说给自己听"],
["01:48.64","仰着头不要让眼泪失控"],
["01:52.50","哪里有可以峰回路转的宿命"],
["01:56.22","我不想听"],
["01:59.80","我吹过你吹过的晚风"],
["02:03.36","那我们算不算 相拥"],
["02:07.00","可如梦初醒般的两手空空"],
["02:10.56","心也空"],
["02:13.93","我吹过你吹过的晚风"],
["02:17.73","是否看过同样 风景"],
["02:21.36","像扰乱时差留在错位时空"],
["02:24.84","终是空 是空"],
["02:32.10","我吹过你吹过的晚风"],
["02:35.65","空气里弥漫着 心痛"],
["02:39.23","可我们 最后 在这错位时空"],
["02:42.90","终成空"],
["02:46.45","我吹过你吹过的晚风"],
["02:49.95","空气里弥漫着 心痛"],
["02:53.55","可我们 最后 在这错位时空"],
["02:57.13","终成空 成空"],
["03:02.51",""],
["03:03.51","学习制作：红影"],
["03:08.51","制作日期：2022.2.17"],
["03:13.51","歌词及音乐来自网络"],
["03:18.51","再次感谢马黑黑"]
];
var myaud = document.getElementById('ymusic'); //播放器标识
var lrcDiv = document.getElementById('lrcDiv'); //歌词显示div标识
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('btn-ro');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(),
mbtn.style.animationPlayState="paused"); }
//处理lrc歌词数组：时间转换成秒
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步显示歌词
myaud.ontimeupdate = function() {
let tt = myaud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr) lrcDiv.innerHTML = lrcAr;
}
}
</script>
<br><br><br><br> 换一个这个转动的按钮试试{:4_173:} 这个很好的制作！{:4_199:} 加林森 发表于 2022-2-17 17:17
这个很好的制作！
我主要试验一下，黑黑以前教的旋转按钮能不能替换进来。现在看来是可以的{:4_173:} 这个制作漂亮的{:4_204:} 红影 发表于 2022-2-17 20:06
我主要试验一下，黑黑以前教的旋转按钮能不能替换进来。现在看来是可以的
嗯嗯，明白的，你好厉害啊。{:4_187:} 太厉害了，简直学霸级制作。{:4_173:} 对号入座一下，这个女孩的侧面像谁。{:4_170:} 绿叶清舟 发表于 2022-2-17 20:30
这个制作漂亮的
这里面的代码都是黑黑曾经分享过的，我只是组合一下{:4_173:} 红影 发表于 2022-2-17 20:57
这里面的代码都是黑黑曾经分享过的，我只是组合一下
歌词同步很麻烦的 加林森 发表于 2022-2-17 20:33
嗯嗯，明白的，你好厉害啊。
都是现成的代码啊，应该把那个转动光棒也弄进来才好，否则总感觉图图有点单薄。 樵歌 发表于 2022-2-17 20:47
对号入座一下，这个女孩的侧面像谁。
师兄又想猜地主家的娃啊{:4_189:} 樵歌 发表于 2022-2-17 20:46
太厉害了，简直学霸级制作。
就是跟在后面复制代码放在一起，就出来了啊{:4_173:} 红影 发表于 2022-2-17 20:58
都是现成的代码啊，应该把那个转动光棒也弄进来才好，否则总感觉图图有点单薄。
哈哈，我也是这样，制作好了这个又忘记那个了。{:4_189:} 绿叶清舟 发表于 2022-2-17 20:58
歌词同步很麻烦的
反正黑黑都做好了，只要引用就好了啊。反正那里面的JS我不敢动，一动说不定就弄坏了{:4_173:} 加林森 发表于 2022-2-17 21:00
哈哈，我也是这样，制作好了这个又忘记那个了。
制作过的不管怎样也算是学到了{:4_173:} 红影 发表于 2022-2-17 21:07
反正黑黑都做好了，只要引用就好了啊。反正那里面的JS我不敢动，一动说不定就弄坏了
同步歌词前面的数字得去弄来的啊 绿叶清舟 发表于 2022-2-17 21:17
同步歌词前面的数字得去弄来的啊
一般比较火的歌都能直接找到歌词，实在找不到的只能自己做出来了。 红影 发表于 2022-2-17 21:22
一般比较火的歌都能直接找到歌词，实在找不到的只能自己做出来了。
那就更难了，得边听边记时间了吧 红影 发表于 2022-2-17 21:07
反正黑黑都做好了，只要引用就好了啊。反正那里面的JS我不敢动，一动说不定就弄坏了
嗯嗯，我也怕搞乱了。