{:4_204:}{:4_180:} 本帖最后由 加林森 于 2022-2-25 21:43 编辑 <br /><br />大猫咪 发表于 2021-11-16 12:19
很好听，队长好推荐，中午好！
猫猫下午好{:4_171:}
<style type="text/css">
.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
.ctBox p,img, h2,button { text-align:center; }
#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; left:10px;top: 0; }
#lrcUl li { height: 20px; font-size:14px; line-height:20px;left:50px; color: black; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>
<div class="mnBox">
<div class="ctBox">
<p style="text-align:center;"><img alt="550" height="362" src="https://pic.imgdb.cn/item/6218c22c2ab3f51d91ffcb8c.jpg" /><br></p>
<h2 style="padding-bottom: 10px;"> 微微(Live)(Live)</h2>
<h2 style="text-align:center;">歌手--龚琳娜</h2>
<pre>
看见小辣椒分享的
歌词同步高亮制作
在这个css边框中测试一下
感觉这个歌词同步高亮效果
加上这个边框特别漂亮
这样分享音乐也是不错
感谢小辣椒又一个精彩分享
我也跟到制作一个，感谢小辣椒及老黑！
感谢老黑和小辣椒的精彩分享
自动播放歌词同步高亮制作
</pre>
<p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >谢谢小辣椒的精彩分享</marquee></p>
<p style="text-align:center;"><audio id="myplayer" src="http://www.kumeiwp.com/sub/filestores/2022/02/25/1de0679b2249807a03c112a185da30a6.mp3" controls="controls" autoplay="autoplay"></audio></p>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<p style="margin: 20px; text-align:center;">加林森2022 02 25</p>
</div>
</div>
<script language="javascript">
var lrcAr = [
["00:00.11","微微(Live)"],
["00:03.11"," 歌手：龚琳娜"],
["00:10.48"," 微微晨光点亮这喧嚣世界"],
["00:16.76"," 微微温暖融化昨夜的冰雪"],
["00:21.64"," 就像是每一秒都称为岁月"],
["00:27.07"," 微微从不停歇"],
["00:33.60"," 微微就是秋天里每片落叶"],
["00:39.83"," 微微就是彩虹里每滴雨点"],
["00:46.26"," 微微她很渺小却从不疲倦"],
["00:53.24"," 微微就是我们"],
["00:59.68"," 微 微 微 微"],
["01:04.36"," 微 微 微 微"],
["01:06.75"," 多少次跌跌撞撞才学会坚强"],
["01:13.83"," 多少次在迷茫之中寻找方向"],
["01:16.91"," 多少次跌跌撞撞才学会坚强"],
["01:22.56"," 多少次跌倒之后再站起来面对"],
["01:29.03"," 再勇敢去闯啊"],
["01:35.95"," 多少次跌跌撞撞才学会坚强"],
["01:42.15"," 多少次在迷茫之中寻找方向"],
["01:44.73"," 多少次跌倒之后再站起来面对"],
["01:49.31"," 再勇敢去闯啊"],
["01:55.45"," 微微晨光点亮这喧嚣世界"],
["02:02.83"," 微微温暖融化昨夜的冰雪"],
["02:08.91"," 就像是每一秒都称为岁月"],
["02:15.44"," 微微从不停歇"],
["02:24.03"," 微微就是秋天里每片落叶"],
["02:48.19"," 微微就是彩虹里每滴雨点"],
["02:55.01"," 微微她很渺小却从不疲倦"],
["03:01.24"," 微微就是我们"],
["03:05.87"," 微 微 微 微"],
["03:08.22"," 微 微 微 微"],
["03:15.46"," 微 微 微 微"],
["03:18.50"," 多少次跌跌撞撞才学会坚强"],
["03:24.18"," 多少次在迷茫之中寻找方向"],
["03:30.36"," 多少次跌倒之后再站起来面对"],
["03:37.54"," 再勇敢去闯啊"],
["04:04.53"," 微 微 微 微"],
["04:10.56"," 微 微 微 微"],
["04:17.09"," 微 微 微 微"],
["04:27.51"," 微 微 微 微"],
["04:10.56"," 谢谢欣赏"]
];
var myaud = document.getElementById('myplayer'); //播放器标识
var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识
//处理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 = "black";
lrcUl.style.top ="-" + (j * 20 - 20) + "px";
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "red";
}
}
}
// 播放结束重置歌词样式
myaud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "black";
lrcUl.style.top = 0;
this.play();
}
</script>
页:
1
[2]