|
|

楼主 |
发表于 2023-4-6 08:20
|
显示全部楼层
测试:单标签实现播放控制、lrc歌词同步全部功能。参考代码:
- <style>
- #papa { margin: auto; width: 1024px; height: 640px; background: lightblue url('485.jpeg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
- #lrc { position: absolute; left: 50%; top: 20px; transform: translate(-50%); height: 50px; font: bold 40px/50px sans-serif; background: transparent; color: gray; display: grid; place-items: center start; pointer-events: none; --motion: cover2; --state: running; --tt: 1s; }
- #lrc::before, #lrc::after { position: absolute; content: ''; }
- #lrc::before { content: attr(data-lrc); width: 0%; height: 100%; color: green; white-space: pre; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }
- #lrc::after { width: 100px; height: 100px; left: -100px; border-radius: 50%; background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 4s infinite linear var(--state); }
- @keyframes cover1 { to { width: 100%; } }
- @keyframes cover2 { to { width: 100%; } }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="papa">
- <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2013109760" autoplay="autoplay" loop="loop"></audio>
- <script>
- let mKey = 0, mFlag = true;
- let lrcAr = [[2,"银临 @ 黄诗扶 - 茉莉花",6],[22.07,"临:……",22.9],[45.01,"好一朵美丽的茉莉花",4.1],[50.04,"好一朵美丽的茉莉花",5.0],[55.09,"芬芳美丽满枝桠",5.0],[61.03,"又香又白人人夸",5.0],[66.09,"让我来将你摘下",5.0],[72.04,"送给别人家",4.0],[76.06,"茉莉花呀 茉莉花",6.0],[86.03,"一树柳州来 偏以女手栽",10.0],[97.02,"香因人气甚 花以月明开",10.0],[107.03,"临:……",1.0],[108.03,"好一朵美丽的茉莉花",5.0],[113.08,"好一朵美丽的茉莉花",5.0],[119.03,"芬芳美丽满枝桠",5.0],[124.08,"又香又白人人夸",8.9],[134.01,"黄:……",24.0],[158,"一树柳州来 偏以女手栽",9.1],[168.1,"香因人气甚 花以月明开",10.0],[179.02,"临:……",0.1],[179.1,"好一朵美丽的茉莉花",5.0],[185.05,"好一朵美丽的茉莉花",5.0],[191,"芬芳美丽满枝桠",4.1],[196.05,"又香又白人人夸",8.0],[204.08,"合:……",3.0],[207.06,"啊 茉莉花啊",7.9],[217.03,"一笑风前尽吐香",8.1],[226.07,"黄:……",2.0],[228.04,"摘来几朵倍芬芳",5.0],[234.05,"琼姿馥馥羞珠翠",5.0],[239.08,"合:……",1.0],[240.07,"留与婵娟助晚妆",6]];
- let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr[mKey][1];lrc.dataset.lrc = lrcAr[mKey][1].replace(/<br>/, '\n');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[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
- aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr[j][0]) {if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
- aud.addEventListener('pause', () => mState());
- aud.addEventListener('play', () => mState());
- aud.addEventListener('seeked', () => calcKey());
- lrc.onclick = () => aud.paused ? aud.play() :aud.pause();
- </script>
复制代码
|
评分
-
查看全部评分
|