人间烟火（学习黑黑歌词制作）
<style>.mama { left: -242px;top:120px; width: 1080px; height: 640px; background: #eee url('https://pic.imgdb.cn/item/629f3bcb0947543129dbcfa0.jpg') no-repeat; box-shadow: 2px 2px 2px #333; position: relative; }
.mama::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top:10px;
right: 5px;
transform: rotateY(180deg);
background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
opacity: .1;
}
.meter { position: absolute; left: 70px; top: 238px; width: 100px; transform: rotate(-90deg); cursor: pointer; }
#lrcDiv_outer { position: absolute; left: 120px; top: 200px; width: fit-content; height: fit-content;
padding: 10px 14px; background: transparent linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.15)); box-shadow: 2px 2px 4px #309D30; border-radius: 6px; }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>
<div class="mama">
<div class="stone"></div>
<div id="lrcDiv_outer">
<div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
</div>
<meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div><br><br><br><br><br><br>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=1929363849.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
meter = document.querySelector('.meter'),
lrcUl = document.getElementById('lrcUl');
let lrcAr=[
['0.20','《人间烟火》-程响'],
['12.10','学习黑黑歌词制作'],
['24.11','一人后来过江南 烟雨锁惆怅'],
['31.87','听得乌篷轻摇桨 竟不知所想'],
['39.54','画船萧鼓声声唱 几曲断人肠'],
['47.29','谁家墙头有梅 自芬芳'],
['55.20','人间一场烟火 你曾盛开过'],
['62.80','刻几人在心窝 从此孤独活'],
['70.58','江南花已凋落 怎堪再斟酌'],
['78.32','可怜良辰无多 竟似无人说'],
['101.56','你撑纸伞回头望 千年乌衣巷'],
['109.33','问君青丝有几丈 能把风月量'],
['116.97','谁言杯酒醉他乡 红尘皆可忘'],
['124.75','凭栏数尽孤帆 泪两行'],
['132.56','人间一场烟火 你曾盛开过'],
['140.24','刻几人在心窝 从此孤独活'],
['147.98','江南花已凋落 怎堪再斟酌'],
['155.67','可怜良辰无多 竟似无人说'],
['163.45','人间一场烟火 你曾盛开过'],
['171.19','刻几人在心窝 从此孤独活'],
['178.98','江南花已凋落 怎堪再斟酌'],
['186.68','可怜良辰无多 竟似无人说'],
['194.35','可怜良辰无多 竟似无人说'],
['202.15','可怜良辰无多 再难与人说'],
['212.39','制作红影 2022.6.7']
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
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 = 'lightgreen';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'gold';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = 'lightgreen';
lrcUl.style.top = 0;
})
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 好像用你的方式制作出来的歌词有一点点的滞后，可能听到的瞬间来不及反应吧@马黑黑 {:4_173:} 我觉得我是听到歌词出来的瞬间就点了的，可能还需要考虑这期间的一点点差异的吧。 不过用这个做LRC真的太好了，黑黑太棒了{:4_199:} 红影 发表于 2022-6-7 20:32
好像用你的方式制作出来的歌词有一点点的滞后，可能听到的瞬间来不及反应吧@马黑黑
手慢 影儿的背景图古韵味满满的，暗影的{:4_187:}动图很有神秘感 马黑黑 发表于 2022-6-7 20:39
手慢
手慢无{:4_189:} 漂亮的制作，厉害的啊 放歌词的漂亮小卷轴{:4_187:}精致玲珑，这样的形式很美的 绿叶清舟 发表于 2022-6-7 20:43
手慢无
要多多练练手 本帖最后由 马黑黑 于 2022-6-7 20:49 编辑
红影 发表于 2022-6-7 20:32
好像用你的方式制作出来的歌词有一点点的滞后，可能听到的瞬间来不及反应吧@马黑黑
其实我也考虑到操作中会手慢，纠结过是否减去几个毫秒，后来感觉这个想法不够科学，所以没加入纠错机制
红影 发表于 2022-6-7 20:35
我觉得我是听到歌词出来的瞬间就点了的，可能还需要考虑这期间的一点点差异的吧。
考虑过的，但觉得不好把握，所以没加入这个解决误差的机制。对歌曲熟悉的制作起来可能效果会更好 千羽 发表于 2022-6-7 20:45
放歌词的漂亮小卷轴精致玲珑，这样的形式很美的
你这是在飘扬俺么{:4_170:} 马黑黑 发表于 2022-6-7 20:48
你这是在飘扬俺么
嗯，飘扬你的创作经典又唯美，也是飘扬影儿心灵手巧，作业完成精彩得满分{:4_187:} 千羽 发表于 2022-6-7 20:59
嗯，飘扬你的创作经典又唯美，也是飘扬影儿心灵手巧，作业完成精彩得满分
哎哎，离羽图还是有一定距离的 马黑黑 发表于 2022-6-7 21:03
哎哎，离羽图还是有一定距离的
太不敢当了，无语……{:4_201:} 千羽 发表于 2022-6-7 21:06
太不敢当了，无语……
咋的呢 马黑黑 发表于 2022-6-7 21:09
咋的呢
俺差的太多了，完全没有可比性{:4_181:} 千羽 发表于 2022-6-7 21:17
俺差的太多了，完全没有可比性
怎么可能！审美与技术没有直接关系 马黑黑 发表于 2022-6-7 21:19
怎么可能！审美与技术没有直接关系
谦虚可以，只是别太过了哦{:4_181:}