小辣椒《涛声依旧》歌词调整
<style>#papa { margin: -214px; width: 1024px; height: 640px; background: #ccc; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 0; width: 300px; height: 80px; 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; transform: translateX(3px); 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: snow; text-shadow: 1px 1px #000; opacity: .75; }
#lrc { position: absolute; font: bold 2.6em sans-serif; color: rgba(255,255,255,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 1s; --state: running; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(160,200,40,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<div id="lrc" data-lrc="花潮论坛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 mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.src = 'https://pan.365.tf/uploads/lxx/tsyj.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.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
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;
if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
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>
歌词数组做了大致调整，主要针对唱词用时的秒数，少数几句也修改了起唱时间：
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
@小辣椒 黑鸭子的唱法有独特性，有些地方确实很难掐准，我这个调整也是大致的，并不是非常严格。 黑黑辛苦，这样弄一下，小辣椒对照着看，应该下次做起来没问题了{:4_204:} 红影 发表于 2022-9-28 09:30
黑黑辛苦，这样弄一下，小辣椒对照着看，应该下次做起来没问题了
我估计是对歌词数组元素的两个数组的定义不理解 马黑黑 发表于 2022-9-27 22:30
@小辣椒
谢谢黑黑，这个歌词中间的过门我真的做不好，主要是方法没有学会吧 马黑黑 发表于 2022-9-28 12:22
我估计是对歌词数组元素的两个数组的定义不理解
是的，我没有理解 马黑黑 发表于 2022-9-27 22:40
黑鸭子的唱法有独特性，有些地方确实很难掐准，我这个调整也是大致的，并不是非常严格。
这个黑鸭子我有好几个专辑的 小辣椒 发表于 2022-9-28 12:24
这个黑鸭子我有好几个专辑的
黑鸭子名气很大，但多数歌曲都是翻唱，并对原歌曲做一些创造性改动 马黑黑 发表于 2022-9-28 12:43
黑鸭子名气很大，但多数歌曲都是翻唱，并对原歌曲做一些创造性改动
我收藏的都是原创专辑，不是原唱我不收藏的 小辣椒 发表于 2022-9-28 12:24
是的，我没有理解
你这大概是急于求成的心态，这不好。玩一个新的玩法，要先理解新玩法的规矩，玩起来才能得心应手，即使玩错了也能知道错在哪里。仅仅依靠瞎探索的手段，玩的吃力不讨好不算，还会茫然，继而失去兴趣，最终该得的的没能得到。 小辣椒 发表于 2022-9-28 12:45
我收藏的都是原创专辑，不是原唱我不收藏的
黑鸭子的翻唱也是有功底的 小辣椒 发表于 2022-9-28 12:23
谢谢黑黑，这个歌词中间的过门我真的做不好，主要是方法没有学会吧
理解歌词前后的两个数字的含义，就应该能明白该怎么做的 马黑黑 发表于 2022-9-28 12:48
理解歌词前后的两个数字的含义，就应该能明白该怎么做的
这个我应该晓得，是歌词的时间，但过门时间加哪里，和歌词一起那就掐时间会长，不和歌词一起，那掐的时间过门音乐歌词就不显示了 马黑黑 发表于 2022-9-28 12:46
黑鸭子的翻唱也是有功底的
黑黑我先下，头晕乎乎的 小辣椒 发表于 2022-9-28 12:52
黑黑我先下，头晕乎乎的
好的，好好休息
小辣椒 发表于 2022-9-28 12:52
这个我应该晓得，是歌词的时间，但过门时间加哪里，和歌词一起那就掐时间会长，不和歌词一起，那掐的时间 ...
过门不用管。就管每句歌词的起唱时间和唱完歌词所用的秒数。 小辣椒 发表于 2022-9-28 12:24
是的，我没有理解
做歌词的时候掐前面的那个字的时间，这个亲爱的是知道的。微调的时候，是掐这句歌词的后面的时间，当最后一个字出来，就点一下暂停，这样整句歌词的前后时间就都有了。 红影 发表于 2022-9-28 16:07
做歌词的时候掐前面的那个字的时间，这个亲爱的是知道的。微调的时候，是掐这句歌词的后面的时间，当最后 ...
哈哈~~~亲爱的，我试了一下，修改了几句，感觉有点花时间的。{:4_173:}
页:
[1]
2