砍掉进度调节之模拟逐字同步歌词

马黑黑 · 发表于 2022-9-16 12:56

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-9-16 13:11 编辑

lrc

马黑黑 · 发表于 2022-9-16 12:57

本帖最后由马黑黑于 2022-9-16 13:12 编辑

代码

<style>
#papa { margin: auto; width: 1024px; height: 640px; background: #ccc; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; width: 360px; height: 100px; display: grid; place-items: end center; cursor: pointer; }
#mplayer span { position: absolute; transition: .5s; }
#mplayer:hover #btnwrap { transform: translateY(-25px); opacity: .75; }
#prog { width: 360px; height: 20px; background: linear-gradient(90deg, red,green 40%, snow 0) no-repeat 100% 100% / 100% 100%; border-radius: 20px; border: 1px solid #ccc; font: normal 14px / 20px sans-serif; color: tan; text-align: center; opacity: .95; }
#btnwrap { width: 60px; height: 60px; border-radius: 50%; border: 5px solid silver; opacity: 0; display: grid; place-items: center; }
#btnpause { width: 10px; height: 30px; border: 0px solid olive; border-width: 0 10px 0 10px; display: none; }
#btnplay { width: 30px; height: 30px; background: olive; clip-path: polygon(0 0, 0 100%, 100% 50%); transform: translateX(4px); }
#lrc { position: absolute; top: 10px; font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, darkred, tan) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; }
@keyframes bgMove { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>
<div id="papa">
<div id="lrc">lrc</div>
<div id="mplayer">
<span id="prog"></span>
<span id="btnwrap"><span id="btnpause"></span><span id="btnplay"></span></span>
</div>
</div>
<script>
let lrcAr = [
['0.00','刀郎 - 阿瓦尔古丽','22'],
['22.62','我骑着马儿唱起歌','5'],
['28.70','走过了伊犁','5'],
['35.67','看见了美丽的阿瓦尔古丽','7'],
['43.69','天涯海角有谁能比的上你','9'],
['53.42','哎呀美丽的阿瓦尔古丽','6'],
['61.82','流浪的人儿踏破了天山','5.2'],
['68.16','越过那戈壁','5'],
['75.00','告诉你美丽的阿瓦尔古丽','7'],
['82.96','我要寻找的人儿就是你','7'],
['93.00','哎呀美丽的阿瓦尔古丽','8'],
['120.61','我骑着马儿唱起歌','5'],
['127.21','走过了伊犁','5'],
['133.78','看见了美丽的阿瓦尔古丽','7.2'],
['141.83','我要寻找的人儿就是你','9'],
['151.83','哎呀美丽的阿瓦尔古丽','7'],
['160.01','哎呀美丽的阿瓦尔古丽','6'],
['168.10','哎呀美丽的阿瓦尔古丽','6'],
['185','','11']
];
let aud = new Audio() ,lrcKey = 0, mFlag = true;
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://music.163.com/song/media/outer/url?id=61060.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, orange, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr[j][0]) {
if(lrcKey === j) showLrc();
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
let showLrc = () => {
lrc.style.animation = 'bgMove ' + lrcAr[lrcKey][2] + 's linear forwards';
lrc.innerHTML = lrcAr[lrcKey][1];
setTimeout(() => {
lrc.style.animation = '';
}, 1000 * lrcAr[lrcKey][2]);
lrcKey += 1;
if(lrcKey >= lrcAr.length) lrcKey = 0;
}
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>

复制代码

马黑黑 · 发表于 2022-9-16 13:13

每句歌词数组的第三个元素加本句的时间信息不能大于下一句歌词的时间信息

马黑黑 · 发表于 2022-9-16 13:19

之所以先砍掉进度调节功能，是因为这种设计思路有一定局限，回退播放时需要更多的代码去处理一些细节，回退播放的否则动画不能正常运行或不能更好地模拟逐字同步功能。

本帖，不再使用两个相同内容的@keyframes关键帧动画，仅一个，用一个定时器在前一个动画做完后先设置lrc盒子的animation为空，然后再根据马上要播放的歌词的相关时间信息重新设计animation。这是另一种实现反复调用同一关键帧动画的机制。