囚鸟（彭羚）TO：黑黑
<style type="text/css">.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #4a3122; border-radius: 10px; background: #988d85; }
.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:30px;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="570" height="380" src="https://pic.imgdb.cn/item/621b16642ab3f51d9158cb2a.jpg" /><br></p>
<h2 style="padding-bottom: 10px;">囚鸟（彭羚）</h2>
<h2 style="text-align:center;">TO：黑黑</h2>
<pre>
动人的歌曲总有动人的故事
他们的深情
都在那歌曲背后的创作故事里
《囚鸟》表达了繁华都市中
某些人与人之间情感的冷漠
创作者发现在都市里
真情真切的爱越来越少
孤独冷清的日子越来越多
特别失恋的人像是一只囚鸟
渴望爱人能够给自己一点的爱
看似简单的事情却如此遥不可及
只有眼泪与自己作伴肆意流淌
</pre>
<p style="margin: auto; width:120px; left:50px;text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >囚鸟（彭羚）TO：黑黑</marquee></p>
<p style="text-align:center;"><audio id="myplayer" src="https://s1.ananas.chaoxing.com/audio/78/6d/fb/05eaa9a4aa0ececc90f3730971b82c02/audio.mp3" controls="controls" autoplay="autoplay"></audio></p>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<p style="margin: 20px; text-align:center;">小辣椒2022 02 27</p>
</div>
</div>
<p style="margin: auto; width:420px; left:50px;text-align:center; font-size:14px; color:#000;">
<script language="javascript">
var lrcAr = [
["00:01.01","歌曲名:囚鸟"],
["00:15.23","歌手:彭羚"],
["00:20.96","囚鸟 词：十一郎 曲：张宇"],
["00:23.89","我是被你囚禁的鸟"],
["00:28.38","已经忘了天有多高"],
["00:32.87","如果离开你给我的小小城堡"],
["00:38.92","不知还有谁能依靠"],
["00:42.09","我是被你囚禁的鸟"],
["00:46.39","得到的爱越来越少"],
["00:51.07","看着你的笑在别人眼中燃烧"],
["00:56.93","我却要不到一个拥抱"],
["01:02.56","我像是一个你可有可无的影子"],
["01:07.60","冷冷的看着你说谎的样子"],
["01:11.54","这撩乱的城市"],
["01:13.79","容不下我的痴"],
["01:16.16","是什么让你这样迷恋这样的放肆"],
["01:21.03","我像是一个你可有可无的影子"],
["01:25.96","和寂寞交换着悲伤的心事"],
["01:30.08","对爱无计可施"],
["01:32.34","这无味的日子"],
["01:36.70","眼泪是唯一的奢侈"],
["01:45.18","LRC编辑：小辣椒"],
["02:05.13","我是被你囚禁的鸟"],
["02:09.67","已经忘了天有多高"],
["02:14.04","如果离开你给我的小小城堡"],
["02:19.95","不知还有谁能依靠"],
["02:25.55","我像是一个你可有可无的影子"],
["02:30.53","冷冷的看着你说谎的样子"],
["02:34.59","这撩乱的城市"],
["02:36.83","容不下我的痴"],
["02:39.20","是什么让你这样迷恋这样的放肆"],
["02:43.99","我像是一个你可有可无的影子"],
["02:48.93","和寂寞交换着悲伤的心事"],
["02:53.04","对爱无计可施"],
["02:55.41","这无味的日子"],
["02:59.59","眼泪是唯一的奢侈"],
["03:08.05","LRC编辑：小辣椒"],
["03:29.91","我像是一个你可有可无的影子"],
["03:35.28","冷冷的看着你说谎的样子"],
["03:39.20","这撩乱的城市"],
["03:41.50","容不下我的痴"],
["03:43.81","是什么让你这样迷恋这样的放肆"],
["03:48.55","我像是一个你可有可无的影子"],
["03:53.65","和寂寞交换着悲伤的心事"],
["03:57.64","对爱无计可施"],
["04:00.02","这无味的日子"],
["04:05.82","我的眼泪是唯一的奢侈"],
["04:16.17","谢谢欣赏"]
];
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>
<style type="text/css">
.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #4a3122; border-radius: 10px; background: #988d85; }
.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:30px;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="570" height="380" src="https://pic.imgdb.cn/item/621b16642ab3f51d9158cb2a.jpg" /><br></p>
<h2 style="padding-bottom: 10px;">囚鸟（彭羚）</h2>
<h2 style="text-align:center;">TO：黑黑</h2>
<pre>
动人的歌曲总有动人的故事
他们的深情
都在那歌曲背后的创作故事里
《囚鸟》表达了繁华都市中
某些人与人之间情感的冷漠
创作者发现在都市里
真情真切的爱越来越少
孤独冷清的日子越来越多
特别失恋的人像是一只囚鸟
渴望爱人能够给自己一点的爱
看似简单的事情却如此遥不可及
只有眼泪与自己作伴肆意流淌
</pre>
<p style="margin: auto; width:120px; left:50px;text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >囚鸟（彭羚）TO：黑黑</marquee></p>
<p style="text-align:center;"><audio id="myplayer" src="https://oss.shandianpan.com/c84d3f9e428bec21546ba4a31390bf79.mp3" controls="controls" autoplay="autoplay"></audio></p>
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<p style="margin: 20px; text-align:center;">小辣椒2022 02 27</p>
</div>
</div>
<p style="margin: auto; width:420px; left:50px;text-align:center; font-size:14px; color:#000;">
<script language="javascript">
var lrcAr = [
["00:01.01","歌曲名:囚鸟"],
["00:15.23","歌手:彭羚"],
["00:20.96","囚鸟 词：十一郎 曲：张宇"],
["00:23.89","我是被你囚禁的鸟"],
["00:28.38","已经忘了天有多高"],
["00:32.87","如果离开你给我的小小城堡"],
["00:38.92","不知还有谁能依靠"],
["00:42.09","我是被你囚禁的鸟"],
["00:46.39","得到的爱越来越少"],
["00:51.07","看着你的笑在别人眼中燃烧"],
["00:56.93","我却要不到一个拥抱"],
["01:02.56","我像是一个你可有可无的影子"],
["01:07.60","冷冷的看着你说谎的样子"],
["01:11.54","这撩乱的城市"],
["01:13.79","容不下我的痴"],
["01:16.16","是什么让你这样迷恋这样的放肆"],
["01:21.03","我像是一个你可有可无的影子"],
["01:25.96","和寂寞交换着悲伤的心事"],
["01:30.08","对爱无计可施"],
["01:32.34","这无味的日子"],
["01:36.70","眼泪是唯一的奢侈"],
["01:45.18","LRC编辑：小辣椒"],
["02:05.13","我是被你囚禁的鸟"],
["02:09.67","已经忘了天有多高"],
["02:14.04","如果离开你给我的小小城堡"],
["02:19.95","不知还有谁能依靠"],
["02:25.55","我像是一个你可有可无的影子"],
["02:30.53","冷冷的看着你说谎的样子"],
["02:34.59","这撩乱的城市"],
["02:36.83","容不下我的痴"],
["02:39.20","是什么让你这样迷恋这样的放肆"],
["02:43.99","我像是一个你可有可无的影子"],
["02:48.93","和寂寞交换着悲伤的心事"],
["02:53.04","对爱无计可施"],
["02:55.41","这无味的日子"],
["02:59.59","眼泪是唯一的奢侈"],
["03:08.05","LRC编辑：小辣椒"],
["03:29.91","我像是一个你可有可无的影子"],
["03:35.28","冷冷的看着你说谎的样子"],
["03:39.20","这撩乱的城市"],
["03:41.50","容不下我的痴"],
["03:43.81","是什么让你这样迷恋这样的放肆"],
["03:48.55","我像是一个你可有可无的影子"],
["03:53.65","和寂寞交换着悲伤的心事"],
["03:57.64","对爱无计可施"],
["04:00.02","这无味的日子"],
["04:05.82","我的眼泪是唯一的奢侈"],
["04:16.17","谢谢欣赏"]
];
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> @马黑黑
黑黑，我发现电脑预览和发论坛好像歌词位置不一样 这次我调整到
#lrcUl { position: absolute; left:30px;top: 0; } 还是发现有2个声音{:4_203:} 经典老歌，特别喜欢彭羚的声音，辣椒制作真好看 ，老黑收礼开心！
{:4_204:}{:4_190:} 大猫咪 发表于 2022-2-27 14:19
经典老歌，特别喜欢彭羚的声音，辣椒制作真好看 ，老黑收礼开心！
猫猫喜欢这个边框颜色可以套用代码玩 {:4_187:} 窗外有暖阳，配合着音乐正好，惬意{:4_171:} 小辣椒 发表于 2022-2-27 14:22
猫猫喜欢这个边框颜色可以套用代码玩
好 收藏代码了，谢谢辣椒{:4_179:}{:4_204:} 小九 发表于 2022-2-27 14:23
窗外有暖阳，配合着音乐正好，惬意
小九辛苦，星期天还没得休息{:4_179:} 这个边框颜色暖色调的，漂亮。黑黑收礼开心{:4_187:} 又一个新的制作，好厉害。喜欢的歌曲。{:4_199:} 这个也是很漂亮，小辣椒棒棒哒{:4_185:} 配图亮眼，歌儿好听{:4_199:}{:4_187:}
黑黑老师收礼开心{:4_205:} 小辣椒 发表于 2022-2-27 14:16
@马黑黑
黑黑，我发现电脑预览和发论坛好像歌词位置不一样
可能会有一些区别，毕竟本地环境是单一环境，而在论坛，帖子会放置于div和表格中，环境变得复杂了，当帖子也用了一些复杂的布局机制，就会受到干扰。 黑黑收礼开森{:4_170:} 俺就来听歌儿儿好了，其余迷糊。{:4_189:} 继续欣赏
页:
[1]