砍掉进度调节之模拟逐字同步歌词
本帖最后由 马黑黑 于 2022-9-16 13:11 编辑 <br /><br /><style>#papa { left: -214px; 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) {
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 + 's linear forwards';
lrc.innerHTML = lrcAr;
setTimeout(() => {
lrc.style.animation = '';
}, 1000 * lrcAr);
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: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) {
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 + 's linear forwards';
lrc.innerHTML = lrcAr;
setTimeout(() => {
lrc.style.animation = '';
}, 1000 * lrcAr);
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>
每句歌词数组的第三个元素 加 本句的时间信息 不能大于下一句歌词的时间信息 之所以先砍掉进度调节功能，是因为这种设计思路有一定局限，回退播放时需要更多的代码去处理一些细节，回退播放的否则动画不能正常运行或不能更好地模拟逐字同步功能。
本帖，不再使用两个相同内容的@keyframes关键帧动画，仅一个，用一个定时器在前一个动画做完后先设置lrc盒子的animation为空，然后再根据马上要播放的歌词的相关时间信息重新设计animation。这是另一种实现反复调用同一关键帧动画的机制。 学习老师的代码，感谢分享！{:4_187:} 梦缘 发表于 2022-9-16 16:48
学习老师的代码，感谢分享！
这个还是尝试中 让进度条不能再调整了，以便让歌词能正常播放吧？ 其实若选的歌曲的歌词能被均匀地唱出来，这个就已经能很好地变成逐字效果了{:4_187:} 比如这首歌曲阿瓦尔三个字太快，若是占2个字的位置，就会正好了{:4_173:} 红影 发表于 2022-9-16 19:19
比如这首歌曲阿瓦尔三个字太快，若是占2个字的位置，就会正好了
细调在这里做不到。它实际上不是针对单字。 红影 发表于 2022-9-16 19:15
让进度条不能再调整了，以便让歌词能正常播放吧？
不是。而是，如果可调节播放进度的话，需要更多的细节处理，可以弄，需要点时间与精力以及耐心。 红影 发表于 2022-9-16 19:17
其实若选的歌曲的歌词能被均匀地唱出来，这个就已经能很好地变成逐字效果了
但这是不可能的 马黑黑 发表于 2022-9-16 12:57
代码
这个歌词后面还加餐了{:4_189:} 马黑黑 发表于 2022-9-16 13:19
之所以先砍掉进度调节功能，是因为这种设计思路有一定局限，回退播放时需要更多的代码去处理一些细节，回退 ...
黑黑这个歌词后面加的感觉没有什么规律，你数字大小不一 这个后面的数字是自己乱加的？我去试一下 小辣椒 发表于 2022-9-16 22:30
这个后面的数字是自己乱加的？我去试一下
不是乱加。是从第一个字唱到最后一个字所用的秒数 小辣椒 发表于 2022-9-16 22:28
黑黑这个歌词后面加的感觉没有什么规律，你数字大小不一
根据唱每一句歌词所有的时间
小辣椒 发表于 2022-9-16 22:27
这个歌词后面还加餐了
加餐能长胖 马黑黑 发表于 2022-9-16 22:35
加餐能长胖
不行啊，我加餐没有效果出来 马黑黑 发表于 2022-9-16 22:34
不是乱加。是从第一个字唱到最后一个字所用的秒数
哦。那我还得重新去弄