【雪落下的声音】学习老黑歌词同步代码作业
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1606297">
<style>
.mama { position: relative; left: -302px; width: 1200px; height: 801px; background: #ccc url('https://pic.imgdb.cn/item/63d3ba2dface21e9ef5e37aa.jpg')no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid { position: absolute; width: 1350px; height: 880px; object-fit: cover; opacity: 0.4; }
.lrcWrap { position: absolute; right: 0; padding: 20px; width: fit-content; height: fit-content; text-align: center; background: transparent; display: flex; flex-direction: column;align-items: center; }
.meterWrap { position: relative; display: flex; align-items: center; width: fit-content; height: 50px; }
.playbtn { width: 10px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
.playbtn:hover { background: red; }
.pausebtn { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
.pausebtn:hover { border-color: transparent red; }
.meter { position: relative; width:300px; height: 11px; cursor: pointer; background: linear-gradient(transparent 5px, snow 6px,transparent 0); }
.slider { display: block; position: absolute; width: 4px; height: 100%; background: white; }
.lrcWrap p { margin: 0 0 12px 0; padding: 0px; color: #ccc; font: normal 1.2em sans-serif; text-shadow: 1px 1px 1px #333; }
.lrcBox { margin: 0; padding: 0; width: 400px; height: 72px; overflow: hidden; user-select: none; position: relative; }
.lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
.lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 16px / 24px sans-serif; color: #ccc; text-shadow: 1px 1px 1px black; list-style-type: none; }
</style>
<div class="mama">
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="lrcWrap">
<p>雪落下的声音</p>
<div class="lrcBox"><ul class="lrcUl"></ul></div>
<div class="meterWrap">
<div class="playbtn"></div>
<div class="pausebtn"></div>
<div class="meter"><span class="slider"></span></div>
</div>
</div>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=2008095818.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('.aud'),
playbtn = document.querySelector('.playbtn'),
pausebtn = document.querySelector('.pausebtn'),
meter = document.querySelector('.meter'),
slider = document.querySelector('.slider'),
lrcUl = document.querySelector('.lrcUl');
let slip = 0;
let lrcAr = [
['0.00','雪落下的声音'],
['6.56','电视剧《延禧攻略》片尾曲'],
['12.21','作词：于正'],
['15.65','作曲：陆虎'],
['22.65','编曲：余雷'],
['24.31','原唱：陆虎'],
['28.95','轻轻落在我掌心'],
['40.91','静静在掌中结冰'],
['49.39','相逢是前世注定'],
['63.43','痛并把快乐尝尽'],
['74.59','明明话那么寒心'],
['86.13','假装那只是叮咛'],
['97.16','泪尽也不能相信'],
['108.70','此生如纸般薄命'],
['121.10','我慢慢地听雪落下的声音'],
['133.15','闭着眼睛幻想它不会停'],
['135.94','你没办法靠近决不是太薄情'],
['140.16','只是贪恋窗外好风景'],
['144.52','我慢慢地品雪落下的声音'],
['150.44','仿佛是你贴着我叫卿卿'],
['155.22','睁开了眼睛漫天的雪无情'],
['162.42','谁来赔这一生好光景'],
['172.17','明明话那么寒心'],
['183.46','假装那只是叮咛'],
['194.25','泪尽也不能相信'],
['206.28','此生如纸般薄命'],
['218.17','我慢慢地听雪落下的声音'],
['223.75','闭着眼睛幻想它不会停'],
['228.52','你没办法靠近决不是太薄情'],
['236.19','只是贪恋窗外好风景'],
['245.82','我慢慢地品雪落下的声音'],
['247.41','仿佛是你贴着我叫卿卿'],
['252.16','睁开了眼睛漫天的雪无情'],
['259.75','谁来赔这一生好光景'],
['266.91','谁来赔这一生好光景'],
['276.04','谁来赔这一生好光景'],
];
for(j=0; j<lrcAr.length; j++){
lrcUl.innerHTML += '<li id="li' + lrcAr + '" style="list-style-type: none">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
let prog = (meter.clientWidth - slider.clientWidth) * aud.currentTime / aud.duration;
slider.style.transform = 'translate(' + prog + 'px)';
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr - slip){
if(j > 0){
let idxLast = lrcAr;
document.getElementById('li' + idxLast).style.color = '#ccc';
lrcUl.style.top = '-' + (j * 24 - 24) + 'px';
}
let idx = lrcAr;
document.getElementById('li' + idx).style.color = 'ghostwhite';
}
}
})
aud.addEventListener('ended', () => {
document.getElementById("li" + lrcAr).style.color = '#ccc';
lrcUl.style.top = 0;
})
aud.addEventListener('pause', () => btnstate(1));
aud.addEventListener('play',() => btnstate(0));
meter.onclick = (e) => {
e = e || event;
aud.currentTime = (e.clientX - offset(meter,"left")) * aud.duration / meter.clientWidth;
}
pausebtn.onclick = () => { aud.pause(); btnstate(1); }
playbtn.onclick = () => { aud.play(); btnstate(0); }
let offset = (obj,direction) => {
let offsetDir = "offset" + direction.toUpperCase() + direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
let btnstate = (paused) => {
paused == 1 ? (playbtn.style.display = 'block', pausebtn.style.display = 'none') : (playbtn.style.display = 'none', pausebtn.style.display = 'block');
}
aud.paused ? btnstate(1) : btnstate(0);
</script></td></tr></table> 雨中悄然 发表于 2023-1-27 20:25
今天教程版看了不少，还是得慢慢来
建议看较新的 坐个沙发 马黑黑 发表于 2023-1-27 20:13
坐个沙发
欢迎莅临指导 又来一能银{:4_190:} 马黑黑 发表于 2023-1-27 20:13
坐个沙发
歌词同步是早些的版。很多播放器可以用，只不过还不会改。我 雨中悄然 发表于 2023-1-27 20:14
欢迎莅临指导
这是早前的歌词同步模板，只要每句歌词开始的时间。现在的歌词同步模板模拟性更好，当然制作起来也会更麻烦。 樵歌 发表于 2023-1-27 20:15
又来一能银
晚上好 雨中悄然 发表于 2023-1-27 20:17
歌词同步是早些的版。很多播放器可以用，只不过还不会改。我
现在的同步机制都封装成了插件，针对歌词、播放器只需做配置，帖子部分自己完成。 马黑黑 发表于 2023-1-27 20:17
这是早前的歌词同步模板，只要每句歌词开始的时间。现在的歌词同步模板模拟性更好，当然制作起来也会更麻 ...
在线制作的。没有用到加餐 马黑黑 发表于 2023-1-27 20:19
现在的同步机制都封装成了插件，针对歌词、播放器只需做配置，帖子部分自己完成。
今天教程版看了不少，还是得慢慢来 知道泡沫是悄然，不知道雪落下的声音有什么玄机。觉得帖子很漂亮，这雪花飘得真好看{:4_187:} 慢慢地看雪花漂亮的样子，真好看{:4_204:} 三行歌词的还是很前面的呢，看着很亲切的感觉{:4_187:} 雨中悄然 发表于 2023-1-27 20:22
在线制作的。没有用到加餐
其实也都行，喜欢就好 哈哈哈哈 马黑黑 发表于 2023-1-27 20:40
建议看较新的
周深专辑，就图和播放器，就想不知道能不能再加一层装饰视频。
翻贴时发现你的天气贴可以，就先抄个作业试试。
没想到播放器出到好多版了 马黑黑 发表于 2023-1-27 20:41
其实也都行，喜欢就好
记岔了，加了 红影 发表于 2023-1-27 20:41
三行歌词的还是很前面的呢，看着很亲切的感觉
一次三行，这是老牌播放器 烟雨客 发表于 2023-1-27 20:42
哈哈哈哈
雪落下是这个声音