马黑黑 发表于 2022-9-15 07:26
代码
黑黑，这个歌词同步的的排列怎么和以前的不一样？
小辣椒 发表于 2022-9-15 21:41
黑黑，这个歌词同步的的排列怎么和以前的不一样？
这是尝试中的排列。可能存在其他问题
红影 发表于 2022-9-15 21:38
黑黑总能带来精彩
{:4_203:}
绿叶清舟 发表于 2022-9-15 21:32
这个效果很可爱的啊
观赏性还行，不过有bug
马黑黑 发表于 2022-9-15 21:42
这是尝试中的排列。可能存在其他问题
大概会什么问题？
马黑黑 发表于 2022-9-15 21:45
观赏性还行，不过有bug
没发现啊
马黑黑 发表于 2022-9-15 21:43
这些可爱的歌词比星星更可爱{:4_173:}
红影 发表于 2022-9-15 22:05
这些可爱的歌词比星星更可爱
也是
绿叶清舟 发表于 2022-9-15 21:56
没发现啊
慢慢会发现的
小辣椒 发表于 2022-9-15 21:48
大概会什么问题？
其他问题
<style>
#papa { left: -214px; width: 1024px; background: #333 url('/data/attachment/forum/202209/15/072036vgzc22ypyks7444l.jpg') no-repeat center/cover; height: 640px; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; position: relative; }
#mplayer { position: absolute; bottom: 10px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); cursor: pointer; }
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay { width: 20px; height: 20px; background: #ccc; clip-path: polygon(0 0, 0 100%, 100% 50%); transform: translateX(3px); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 300px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(0,255,0,.25); }
#tmsg { font: normal 16px sans-serif; color: lightgreen;}
#lrc { position: absolute; top: 40px; font: bold 1.5em sans-serif; color: lightgreen; text-shadow: 1px 1px 2px #000; text-align: center; }
.lrcChar { margin: 1px; padding: 6px; width: 60px; height: 60px; text-align: center; clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);font: bold 1.0em / 66px sans-serif; display: inline-block; text-shadow: 1px 1px 1px #000; opacity: .65; backdrop-filter: blur(3px); position: relative; }
</style>
<div id="papa">
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
<div id="lrc">lrc歌词</div>
</div>
<script>
let lrcAr = [['0.02','可爱的星星 - 张心柔'],['1.00','词：吕德安'],['1.02','曲：张心柔'],['1.03','编曲：张心柔'],['6.06','如果这些可爱的星星不是星星'],['16.04','那又是什么'],['20.07','该如何称呼'],['26.05','那么高的一种现实'],['30.08','那么冷漠'],['36.07','一生都与我们若即若离'],['46.02','如果这些可爱的星星不是星星'],['55.04','那又是什么'],['59.07','该如何称呼'],['65.04','那么高的一种现实'],['69.05','那么冷漠'],['75.03','一生都与我们若即若离'],['84.09','又让人去幻想和追求'],['88.10','有时我常常想'],['93.05','直到如今'],['98.08','星星不过是星星'],['103.02','你承认它'],['107.06','高高在上'],['112.03','冥冥之中'],['117.03','有种力量或寂静的知识'],['142.06','又让人去幻想和追求'],['146.05','有时我常常想'],['150.08','直到如今'],['155.10','星星不过是星星'],['160.00','你承认它'],['164.02','高高在上'],['168.07','冥冥之中'],['173.07','有种力量或寂静的知识'],['183.00','而这些都还是我们自己的事情'],['191.06','我们知道它非人间之物'],['200.07','或只是天堂里的一种爱'],['209.04','但它引导我们不得不穷尽一生'],['213.08','去爱一些不能爱的事物'],['218.03','去属于它们'],['220.06','然后才去属于自己'],['227.07','而这些都还是我们自己的事情'],['236.04','我们知道它非人间之物'],['245.06','或只是天堂里的一种爱'],['254.02','但它引导我们不得不穷尽一生'],['258.06','去爱一些不能爱的事物'],['263.03','去属于它们'],['265.06','然后才去属于自己']];
let aud = new Audio(), lrcKey = 0;
aud.src = 'https://music.163.com/song/media/outer/url?id=480719471.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.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) {
if(lrcKey == j) lrc.innerHTML = showLrc(lrcAr);
else continue;
}
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
let showLrc = (text) => {
let tstr = '';
Array.from({length: text.length}).forEach((ele,key) => {
if(text.substr(key,1).trim() != '') tstr += `<span class="lrcChar" style='top: ${ranNum(-10,10)}px; background: #${setColor()}; color: #${setColor()};'>${text.substr(key,1)}</span>`;
});
lrcKey += 1;
if(lrcKey >= lrcAr.length) lrcKey = 0;
return tstr;
}
let setColor = () => Math.random().toString(16).substr(-6);
let ranNum = (min,max) => Math.floor(Math.random() * (max - min + 1)) + min;
</script>
试验一下把文字外框直接变成星星，完了，发现我自己跟本看不到效果，就当保存个试验在这吧{:4_173:}
红影 发表于 2022-9-16 10:53
试验一下把文字外框直接变成星星，完了，发现我自己跟本看不到效果，就当保存个试验在这吧
要元素出现星星效果，不必这么折腾，给 .lrcChar 加一个或两个伪元素，用伪元素简单模拟一下星星形状
马黑黑 发表于 2022-9-16 12:28
要元素出现星星效果，不必这么折腾，给 .lrcChar 加一个或两个伪元素，用伪元素简单模拟一下星星形状
发现用星星形状，要放大背景框才能放得下文字，缩小文字又怕看不清，还是算了{:4_173:}
红影 发表于 2022-9-16 21:30
发现用星星形状，要放大背景框才能放得下文字，缩小文字又怕看不清，还是算了
所以呢，在CSS设置两个伪元素，有边框，各自旋转一定角度
马黑黑 发表于 2022-9-16 21:58
所以呢，在CSS设置两个伪元素，有边框，各自旋转一定角度
嗯嗯，这样就不会受文字大小的限制了，但有点难度的，我这水平，也只是想想罢了{:4_173:}
红影 发表于 2022-9-17 10:50
嗯嗯，这样就不会受文字大小的限制了，但有点难度的，我这水平，也只是想想罢了
你懂得 ::before 和 ::after 就成
马黑黑 发表于 2022-9-17 10:51
你懂得 ::before 和 ::after 就成
嗯嗯，这两个知道的。
红影 发表于 2022-9-17 14:54
嗯嗯，这两个知道的。
就是用它们的
马黑黑 发表于 2022-9-17 17:35
就是用它们的
好的，空了我去试试。{:4_187:}