模拟逐字同步歌词的尝试
本帖最后由 马黑黑 于 2022-9-15 20:06 编辑要以完全形态实现歌词逐字同步，需要的歌词时间信息也应是逐字的，信息量不少、难度不小。但大概模拟总可以尝试一下。思路可以是这样——
在花潮lrc歌词同步数组模板的基础上，给每一句歌词数组元素再加一个信息，记录该句歌词从第一个字到唱完最后一个字的总用时，原来的单句歌词数组是酱紫：
['160.01','哎呀美丽的阿瓦尔古丽']
现在我们把它改成酱紫：
['160.01','哎呀美丽的阿瓦尔古丽','6']
如此，我们拥有了一个该句歌词的总用时，6秒，不一定特别精准，毫秒可以忽略不计的。这个总用时，将用于驱动渲染文本颜色的依据，它是大概的，就是假设每一个字在歌词中所用的时间是平均的，这就是模拟，粗糙的、大概的效果，不会很精准的。
以我昨晚发布的 阿瓦尔古丽 为例，我改造了一下代码，全部代码如下（本地代码，为测试方便，没有背景图）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>阿瓦尔古丽</title>
<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; left: 20px; bottom: 0px; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: .25; }
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: white;opacity: .75; }
#lrc { --dur: 6s; position: absolute; top: 10px; font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, darkred, gold, orange, snow) 100% 0 / 200% 100%; background-clip: text; -webkit-background-clip: text; animation: bgMerg1 1s linear infinite; }
@keyframes bgMerg1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMerg2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>
</head>
<body>
<div id="papa">
<div id="lrc">lrc</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let lrcAr = [
['0.00','刀郎 - 阿瓦尔古丽','22'],
['22.62','我骑着马儿唱起歌走过了伊犁','12'],
['35.67','看见了美丽的阿瓦尔古丽','7'],
['43.69','天涯海角有谁能比的上你','9'],
['53.42','哎呀美丽的阿瓦尔古丽','6'],
['61.82','流浪的人儿踏破了天山','7'],
['68.16','越过那戈壁','5'],
['75.00','告诉你美丽的阿瓦尔古丽','7'],
['82.96','我要寻找的人儿就是你','7'],
['93.00','哎呀美丽的阿瓦尔古丽','8'],
['120.61','我骑着马儿唱起歌','6.4'],
['127.21','走过了伊犁','5'],
['133.78','看见了美丽的阿瓦尔古丽','7.2'],
['141.83','我要寻找的人儿就是你','9'],
['151.83','哎呀美丽的阿瓦尔古丽','7'],
['160.01','哎呀美丽的阿瓦尔古丽','6'],
['168.10','哎呀美丽的阿瓦尔古丽','6'],
['185','','4']
];
let aud = new Audio() ,lrcKey = 0, flag = 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();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, orange, red ' + aud.currentTime / aud.duration * 100 + '%, transparent 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 btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let showLrc = () => {
if(lrcKey < lrcAr.length - 1) {
lrc.style.animation = (flag ? 'bgMerg1 ' : 'bgMerg2 ') + lrcAr + 's linear forwards';
flag = !flag;
}
lrc.innerText = 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>
</body>
</html>在本地测试，上述代码的第四行很重要，是字符集声明。文档要保存为 UTF-8 编码，否则测试效果出现乱码。
本帖最后由 马黑黑 于 2022-9-15 20:07 编辑 <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; left: 20px; bottom: 0px; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: .25; }
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: white;opacity: .75; }
#lrc { --dur: 6s; position: absolute; top: 10px; font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, darkred, gold, orange, snow) 100% 0 / 200% 100%; background-clip: text; -webkit-background-clip: text; animation: bgMerg1 1s linear infinite; }
@keyframes bgMerg1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMerg2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>
<div id="papa">
<div id="lrc">lrc</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let lrcAr = [
['0.00','刀郎 - 阿瓦尔古丽','22'],
['22.62','我骑着马儿唱起歌走过了伊犁','12'],
['35.67','看见了美丽的阿瓦尔古丽','7'],
['43.69','天涯海角有谁能比的上你','9'],
['53.42','哎呀美丽的阿瓦尔古丽','6'],
['61.82','流浪的人儿踏破了天山','7'],
['68.16','越过那戈壁','5'],
['75.00','告诉你美丽的阿瓦尔古丽','7'],
['82.96','我要寻找的人儿就是你','7'],
['93.00','哎呀美丽的阿瓦尔古丽','8'],
['120.61','我骑着马儿唱起歌','6.4'],
['127.21','走过了伊犁','5'],
['133.78','看见了美丽的阿瓦尔古丽','7.2'],
['141.83','我要寻找的人儿就是你','9'],
['151.83','哎呀美丽的阿瓦尔古丽','7'],
['160.01','哎呀美丽的阿瓦尔古丽','6'],
['168.10','哎呀美丽的阿瓦尔古丽','6'],
['185','','4']
];
let aud = new Audio() ,lrcKey = 0, flag = 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();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, orange, red ' + aud.currentTime / aud.duration * 100 + '%, transparent 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 btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let showLrc = () => {
if(lrcKey < lrcAr.length - 1) {
lrc.style.animation = (flag ? 'bgMerg1 ' : 'bgMerg2 ') + lrcAr + 's linear forwards';
flag = !flag;
}
lrc.innerText = 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> 用单句歌词的用时取平均值，分配给每个字，这法子聪明{:4_187:} “如此，我们拥有了一个该句歌词的总用时，6秒，”
这个是手动加的吧？我白天没法看，我去看看没加这个数字的时候的那个阿瓦尔古丽，比较一下。 原来后面的数字并不是简单地相减出来的，而是真正歌词演唱完所用的时间，之前还以为是后面一个数字减去前面的呢。嗯，这样最后一个字唱完有拖音或者有过门因为等都不会有影响了{:4_187:} 不错的代码，感谢分享！{:4_204:} 这个用最简洁的方式，已经基本能模拟逐字歌词同步了，黑黑厉害{:4_199:} 一个小问题，暂停以后，歌词和音乐都停止变化了，但颜色涂抹还在继续{:4_173:} 不管怎么说，这个已经很完美了{:4_199:} 发现这个歌词同步进度条快进的时候能匹配歌词，快退的时候无法匹配，会停留在当前一句，只有当歌词再次越过当前歌词，才能继续正确匹配。当然也有可能是我自己的电脑问题。{:4_173:} 红影 发表于 2022-9-15 21:03
发现这个歌词同步进度条快进的时候能匹配歌词，快退的时候无法匹配，会停留在当前一句，只有当歌词再次越过 ...
也许会有这样的问题，不过可以修正 红影 发表于 2022-9-15 20:34
用单句歌词的用时取平均值，分配给每个字，这法子聪明
但的确做不到精准，毕竟很少有平均分配时间到每一个字的 红影 发表于 2022-9-15 20:36
“如此，我们拥有了一个该句歌词的总用时，6秒，”
这个是手动加的吧？我白天没法看，我去看看没加这个数 ...
目前必须手动加 醉美水芙蓉 发表于 2022-9-15 21:03
黑黑老师厉害，按钮停止歌词也停了！效果不错！
一般一般，可能还存在问题的 马黑黑 发表于 2022-9-15 21:05
也许会有这样的问题，不过可以修正
嗯嗯，黑黑辛苦{:4_187:} 马黑黑 发表于 2022-9-15 21:06
但的确做不到精准，毕竟很少有平均分配时间到每一个字的
但至少可以解决拖音问题了，还有个办法，就是歌词结束的地方加入一句空白歌词，和这个效果一样。 马黑黑 发表于 2022-9-15 21:06
目前必须手动加
但能解决问题了，很棒的{:4_187:} 红影 发表于 2022-9-15 21:53
但能解决问题了，很棒的
这是一个思路 红影 发表于 2022-9-15 21:53
但至少可以解决拖音问题了，还有个办法，就是歌词结束的地方加入一句空白歌词，和这个效果一样。
道理是一样的，就是缩减一点时间，但如果是一句一句连着唱，那加空白歌词就不灵了
页:
[1]
2