《夜空中最亮的星》- 戴羽彤 （根据老黑同步歌词制作）
本帖最后由 加林森 于 2022-6-5 15:01 编辑 <br /><br /><style>/* 界面及音乐控制 */
.mama { left: -339.5px; width: 1275px; height: 717px; background: #eee url('https://pic.imgdb.cn/item/629c503a09475431299ccb71.jpg') no-repeat; position: relative; }
.goose { position: absolute; bottom: 360px; width: 200px; cursor: pointer; }
.meter { position: absolute; left: 50%; bottom: 140px; transform: rotate(-15deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv { left: 50%; top: 50%; width: 340px; height: 60px; overflow: hidden; position: absolute; padding: 8px; }
#lrcDiv ul, lrcli { margin: 0; padding: 0;}
#lrcUl { position: absolute; top: 0; }
#lrcUl li { height: 24px; font: normal 20px / 24px sans-serif; color: #64b4d5; text-shadow: 1px 1px 1px #333; list-style-type: none; }
#myplayer { outline: none; list-style-type: none; }
</style>
<div class="mama">
<div id="lrcDiv"><ul id="lrcUl"></ul></div>
<img class="goose" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif" alt="" />
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="http://www.kumeiwp.com/sub/filestores/2022/01/31/eeb6c41d26bae2b2f32fc06bde0ff37c.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
//元素句柄
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
goose = document.querySelector('.goose'),
lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[
['ti:','夜空中最亮的星'],
['ar:','逃跑计划'],
['al:','戴羽彤专辑'],
['by:','毛川/李赤'],
['00:08.40','夜空中最亮的星-戴羽彤'],
['00:09.90','词：逃跑计划'],
['00:10.87','曲：逃跑计划'],
['00:11.91','LRC制作：加林森'],
['00:13.13','夜空中最亮的星 能否听清'],
['00:28.28','那仰望的人 心底的孤独和叹息'],
['00:37.35','夜空中最亮的星 能否记起'],
['00:45.96','曾与我同行 消失在风里的身影'],
['00:53.98','我祈祷拥有一颗透明的心灵'],
['00:59.12','和会流泪的眼睛'],
['01:04.12','给我再去相信的勇气'],
['01:07.78','越过谎言去拥抱你'],
['01:12.46','每当我找不到存在的意义'],
['01:16.74','每当我迷失在黑夜里'],
['01:21.55','夜空中最亮的星'],
['01:24.99','请指引我靠近你'],
['01:28.90','夜空中最亮的星 是否知道'],
['01:48.52','曾与我同行的身影 如今在哪里'],
['01:56.88','夜空中最亮的星 是否在意'],
['02:06.59','是等太阳升起 还是意外先来临'],
['02:14.88','我宁愿所有痛苦都留在心里'],
['02:19.60','也不愿忘记你的眼睛'],
['02:24.77','给我再去相信的勇气'],
['02:28.91','越过谎言去拥抱你'],
['02:33.32','每当我找不到存在的意义'],
['02:37.62','每当我迷失在黑夜里'],
['02:44.18','夜空中最亮的星 请照亮我前行'],
['03:09.01','我祈祷拥有一颗透明的心灵'],
['03:13.91','和会流泪的眼睛'],
['03:18.86','给我再去相信的勇气'],
['03:22.80','越过谎言去拥抱你'],
['03:26.58','每当我找不到存在的意义'],
['03:31.29','每当我迷失在黑夜里'],
['03:37.42','夜空中最亮的星'],
['03:40.72','请照亮我前行'],
['03:45.63','夜空中最亮的星 能否听清'],
['03:54.49','那仰望的人 心底的孤独和叹息'],
['03:58.54','谢谢欣赏']
];
//处理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;
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
goose.style.transform = 'translate(' + prog * 11 + 'px)';
meter.value = prog;
//歌词同步
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr){
if(j > 0){
let idxLast = lrcAr;
document.getElementById("li" + idxLast).style.color = "#64b4d5";
lrcUl.style.top ="-" + (j * 24 - 24) + "px"; //乘减依据: 行高设定
}
let idx = lrcAr;
document.getElementById("li" + idx).style.color = "#fff";
}
}
});
// 播放结束重置歌词样式
aud.onended = function() {
document.getElementById("li" + lrcAr).style.color = "#64b4d5";
lrcUl.style.top = 0;
this.play();
}
//音乐控制
meter.onclick = goose.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@马黑黑 好像这个老白鹅太慢了。{:4_170:} 队长可以把大鹅换成蝴蝶什么的动图，干嘛让大白鹅偷窥人家情侣约会啊{:4_173:} 做得挺漂亮的，原图右下角貌似有点文字，应该处理一下才好{:4_187:} 红影 发表于 2022-6-5 14:30
队长可以把大鹅换成蝴蝶什么的动图，干嘛让大白鹅偷窥人家情侣约会啊
哈哈哈哈，我换鹰来玩玩。 红影 发表于 2022-6-5 14:32
做得挺漂亮的，原图右下角貌似有点文字，应该处理一下才好
看见了，全部去处理完。 红影 发表于 2022-6-5 14:32
做得挺漂亮的，原图右下角貌似有点文字，应该处理一下才好
现在全部处理完了，红影在来看看。 加林森 发表于 2022-6-5 14:32
哈哈哈哈，我换鹰来玩玩。
鹰的高度可以放到空中的位置，鹰不能在地上飞啊{:4_173:} 加林森 发表于 2022-6-5 14:43
现在全部处理完了，红影在来看看。
嗯嗯，现在的没原来的文字了。这个制作很漂亮。把鹰的高度再改一下就更好了{:4_187:} 红影 发表于 2022-6-5 14:57
嗯嗯，现在的没原来的文字了。这个制作很漂亮。把鹰的高度再改一下就更好了
飞上去了，你再来看看。{:4_189:} 队长又撒鹰了，这样挺好的呢！ 马黑黑 发表于 2022-6-5 16:07
队长又撒鹰了，这样挺好的呢！
这样好看吗？ 加林森 发表于 2022-6-5 16:08
这样好看吗？
那肯定好看的 马黑黑 发表于 2022-6-5 16:10
那肯定好看的
嗯嗯。谢谢！ 图中的文字挺好看的。 梦油 发表于 2022-6-5 16:52
图中的文字挺好看的。
是啊，字体是专门制作的。 加林森 发表于 2022-6-5 16:56
是啊，字体是专门制作的。
漂亮、漂亮！ 梦油 发表于 2022-6-5 17:01
漂亮、漂亮！
嗯嗯，谢谢！ 加林森 发表于 2022-6-5 17:02
嗯嗯，谢谢！
别客气。
页:
[1]
2