马黑大神卡拉ok字幕新潮流
<style>
#papa { left: -214px; width: 1024px; height: 300px; background: #000000; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; top: 140px; 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: #1551C8; opacity: .75; }
#lrc { position: absolute; top: 100px; font: bold 2.5em sans-serif;font-family:华文隶书; filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);color: transparent; letter-spacing: 2px; background: linear-gradient(50deg, #000080, #ff0000, #000000, #00f000) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; }
#mpic { position: absolute; width: 100%; height: 100%; mix-blend-mode: multiply; }
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>
<div id="papa">
<img id="mpic" src="https://638183.freep.cn/638183/t22/hl/b77.png" alt="" />
<div id="lrc">马黑老师卡拉OK播放器</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 = [
['1.00','旧梦 (大神慧版DJ) - 大神慧','2'],
['3.00','词：梁帅 曲：梁帅','2'],
['5.00','制作人：亚伦','2'],
['7.00','今夜风阵阵','2'],
['9.00','今夜花纷纷','2'],
['11.00','今夜雨濛濛','2'],
['15.00','我不能忘记 往日的誓约','4'],
['19.00','往日的蜜意柔情','3'],
['22.00','今夜泪涟涟','2'],
['24.00','今夜雾茫茫','2'],
['26.00','今夜歌声声','4'],
['30.00','我怎能抛却 对你的思念','4'],
['34.00','默默在心中奔涌','3'],
['37.00','风呀咦呀吹个不停','4'],
['41.00','想你呀咦呀想不停','4'],
['45.00','爱的承诺 一个又一个','4'],
['49.00','早已默默地凋零','3'],
['52.00','雨呀咦呀下个不停','4'],
['56.00','想你呀咦呀想不停','4'],
['60.00','爱的苦酒 一杯又一杯','4'],
['64.00','像一场逝去地旧梦','4'],
['82.00','今夜风阵阵','2'],
['84.00','今夜花纷纷','2'],
['86.00','今夜雨濛濛','4'],
['90.00','我不能忘记 往日的誓约','4'],
['94.00','往日的蜜意柔情','3'],
['97.00','今夜泪涟涟','2'],
['99.00','今夜雾茫茫','2'],
['101.00','今夜歌声声','4'],
['105.00','我怎能抛却 对你的思念','4'],
['109.00','默默在心中奔涌','3'],
['112.00','风呀咦呀吹个不停','4'],
['116.00','想你呀咦呀想不停','4'],
['120.00','爱的承诺 一个又一个','4'],
['124.00','早已默默地凋零','3'],
['127.00','雨呀咦呀下个不停','4'],
['131.00','想你呀咦呀想不停','4'],
['135.00','爱的苦酒 一杯又一杯','4'],
['139.00','像一场逝去地旧梦','3'],
['142.00','爱的苦酒 一杯又一杯','4'],
['146.00','像一场逝去地旧梦','3']
];
let mKey = 0, mSeek = false, mFlag = true;
let aud = new Audio();
aud.src = 'https://www.qqmc.com/mp3/music224613721.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', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, green, 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(mKey === j) showLrc(lrcAr);
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 = (time) => {
lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
lrc.innerHTML = lrcAr;
mKey += 1;
mFlag = !mFlag;
}
let calcKey = () => {
for(j = 0; j < lrcAr.length; j ++) {
if(aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if(mKey <0) mKey = 0;
let mtime = lrcAr - (aud.currentTime - lrcAr);
showLrc(mtime);
}
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> 你一直想实现逐字同步。现在，终于可以模拟一下，而且实现机制不算复杂。
当然，这个不是真正意义上的卡拉OK同步模式，是个大致模拟。
专业的OK同步，酷狗做出来了，有专利；QQ音乐也做出来了，无专利（我怀疑以腾讯的风格，不要专利属于聪明之举）；还有其他家的。数据大都加密，反正不外传，自家用，破解也不容易（到目前至，能完美破解的不是没有但不敢公开，会吃官司的）。
俺们玩这个，一切是自主的、原创的，自娱自乐。不求精准同步不意味着没这个能力，做真正的逐字同步理论上不是难题，只是数据的构建成本过高，暂不去弄它。 马老师是自创不存在侵权， 基本实现了拉卡ok模式，不必花很大心思，每句基本实现同步！ 这个同步很准确，给亚伦老师点赞{:4_187:} 马黑黑 发表于 2022-9-18 07:59
你一直想实现逐字同步。现在，终于可以模拟一下，而且实现机制不算复杂。
当然，这个不是真正意义上的卡 ...
黑黑的这个完全原创的，太厉害了。{:4_199:}
发现不太有拖音的歌曲特别适合你给的代码，设置不用调整。其他的歌曲就需要手动微调一下了。 红影 发表于 2022-9-18 09:08
黑黑的这个完全原创的，太厉害了。
发现不太有拖音的歌曲特别适合你给的代码，设置不用调整。 ...
你才知道是原创阿{:4_173:}
你去百度一下，用JS做这个效果的，有多少个案例？如有，也绝对不是用我的方案。 马黑黑 发表于 2022-9-18 09:22
你才知道是原创阿
你去百度一下，用JS做这个效果的，有多少个案例？如有，也绝对不是用我的 ...
黑黑，你这个歌词同步确实强大，今天早上做的时候就在想，你咋这么厉害，只要脑子一转，瞬间我们想要的效果就出来了。。。。 小辣椒 发表于 2022-9-18 11:03
黑黑，你这个歌词同步确实强大，今天早上做的时候就在想，你咋这么厉害，只要脑子一转，瞬间我们想要的效 ...
原理在那里，如果技术跟得上，又想去做，那一般来说大半是可以实现的 马黑黑 发表于 2022-9-18 11:41
原理在那里，如果技术跟得上，又想去做，那一般来说大半是可以实现的
所以跟黑黑学习后，收获是巨大的{:4_187:} 小辣椒 发表于 2022-9-18 11:43
所以跟黑黑学习后，收获是巨大的
就是时间不够用哈 真漂亮。{:4_199:} 马黑黑 发表于 2022-9-18 09:22
你才知道是原创阿
你去百度一下，用JS做这个效果的，有多少个案例？如有，也绝对不是用我的 ...
其实这里黑黑弄的都是原创呢，你有本事什么都按自己的思路去做，很赞的{:4_199:} 红影 发表于 2022-9-18 19:42
其实这里黑黑弄的都是原创呢，你有本事什么都按自己的思路去做，很赞的
一般般坛里倒数第三 这个好，感谢老师的分享！ 马黑黑 发表于 2022-9-18 07:59
你一直想实现逐字同步。现在，终于可以模拟一下，而且实现机制不算复杂。
当然，这个不是真正意义上的卡 ...
感谢老师的代码，问好！{:4_187:} 梦缘 发表于 2022-9-18 20:54
感谢老师的代码，问好！
同问
页:
[1]