测试歌词出来没有
<style>
#papa { left: -344px; width: 1280px; background: #333 url('https://pic.imgdb.cn/item/63233d1e16f2c2beb1abcaf4.jpg') no-repeat center/cover; height: 650px; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; position: relative; }
#mplayer { position: absolute; bottom: 450px; left:344px;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: 540px;left: 514px;font: bold 1.5em sans-serif; color: lightgreen; text-shadow: 1px 1px 2px #000; text-align: center; }
.lrcChar { margin: 1px; padding: 6px; width: 30px; height: 30px; text-align: center; border-radius: 40% 20%; font: bold 1.2em / 30px 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">谁在窗外流泪</div>
</div>
<script>
let lrcAr = [['00.00','谁在窗外流泪 '],
['13.73','歌手： 小骆驼'],
['25.20','曲/词：刀郎'],
['37.51','看着窗外烟雨中'],
['41.00','依旧车水马龙'],
['45.92','始终无法清晰的记起'],
['51.03','昨夜谁入梦'],
['55.44','毕竟心里也不敢轻易去碰'],
['61.00','刚愈合的痛'],
['64.82','你再忍一忍'],
['69.66','你再等一等'],
['77.15','是谁把我昨夜的泪水'],
['80.81','全装进酒杯'],
['85.50','是否能用这短短的一夜'],
['89.87','把痛化做无悔'],
['95.37','毕竟泪不是飘落在窗外'],
['99.18','无心的雨水'],
['104.58','只要被打碎'],
['108.91','就会随风飞'],
['114.91','LRC编辑：小辣椒'],
['134.95','谁在窗外流泪'],
['138.74','流的我心碎'],
['143.24','雨打窗听来这样的伤悲'],
['148.10','刹那间拥抱你给我的美'],
['152.79','尽管准备了千万种面对'],
['156.95','谁曾想会这样心碎'],
['164.36','谁在窗外流泪'],
['168.62','流得我心碎'],
['173.25','情路上一朵雨打的玫瑰'],
['178.12','凋零在爱与恨的负累'],
['182.55','就让痛与悲哀与伤化做雨水'],
['189.31','随风飘飞'],
['195.97','LRC编辑：小辣椒'],
['231.61','谁在窗外流泪'],
['235.88','流的我心碎'],
['240.81','雨打窗听来这样的伤悲'],
['245.16','刹那间拥抱你给我的美'],
['249.66','尽管准备了千万种面对'],
['253.88','谁曾想会这样心碎'],
['261.55','谁在窗外流泪'],
['265.41','流得我心碎'],
['270.19','情路上一朵雨打的玫瑰'],
['275.10','凋零在爱与恨的负累'],
['279.68','就让痛与悲哀与伤化做雨水'],
['285.98','随风飘飞'],
['291.69','随风飘飞']];
let aud = new Audio(), lrcKey = 0;
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/14/liul.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>
<br><br><br><br><br><br><br><br><br><br> @马黑黑
黑黑看见你歌词的排列很奇怪。我测试老的样式试一下 这个有彩色底板的好像是浅颜色背景比较清晰 不知道bug在哪里，感觉可以的啊{:4_170:} 小辣椒 发表于 2022-9-15 23:01
@马黑黑
黑黑看见你歌词的排列很奇怪。我测试老的样式试一下
颜色是随机的 马黑黑 发表于 2022-9-15 23:05
颜色是随机的
颜色是随机的啊，那还是做浅色背景了，这个我测试歌词同步的排列。一样的可以用 明天选图 重新做一个了 厉害厉害，变化大了啊。{:4_199:} 小辣椒 发表于 2022-9-15 23:07
颜色是随机的啊，那还是做浅色背景了，这个我测试歌词同步的排列。一样的可以用
不过，你把CSS 的 .lrcChar 选择器中的如下几个语句删掉，估计深色背景对歌词的影响也不大，试试看：
opacity: .65; backdrop-filter: blur(3px);
亲爱的歌曲我在单位里也能听的呢，太好了。这个星星歌词好漂亮，和图片结合的也特别好，亲爱的太棒了{:4_199:} 像沙滩上的鹅卵石，干净的背景特别凸显歌词呢{:4_187:} 亲爱的那里还有什么别的这样地址的歌曲？在单位能听到的歌曲，我就白天也能做帖子了{:4_173:} 谢谢老师的分享，问好！{:4_191:} 梦缘 发表于 2022-9-16 08:45
谢谢老师的分享，问好！
谢谢梦缘欣赏{:4_187:} 红影 发表于 2022-9-16 08:30
亲爱的那里还有什么别的这样地址的歌曲？在单位能听到的歌曲，我就白天也能做帖子了
亲爱的，你想什么音乐发我，我休息天给你一次上传，你慢慢玩 马黑黑 发表于 2022-9-15 23:51
不过，你把CSS 的 .lrcChar 选择器中的如下几个语句删掉，估计深色背景对歌词的影响也不大，试试看：
...
黑黑~~~这个歌词同步我测试了一下，进度条音乐回前面去，这个歌词不会回去。 红影 发表于 2022-9-16 08:27
亲爱的歌曲我在单位里也能听的呢，太好了。这个星星歌词好漂亮，和图片结合的也特别好，亲爱的太棒了{:4_19 ...
哈哈~~这个是测试背景颜色用怎么样的比较漂亮 小辣椒 发表于 2022-9-16 20:33
黑黑~~~这个歌词同步我测试了一下，进度条音乐回前面去，这个歌词不会回去。
这就是bug，会处理的，但预计不完美{:5_106:} 红影 发表于 2022-9-16 08:28
像沙滩上的鹅卵石，干净的背景特别凸显歌词呢
这个歌词同步配背景应该是浅色的比较好 马黑黑 发表于 2022-9-15 23:51
不过，你把CSS 的 .lrcChar 选择器中的如下几个语句删掉，估计深色背景对歌词的影响也不大，试试看：
...
黑黑这个我试了，颜色出来好一点，但白背景更加对比度大，漂亮