茉莉花

马黑黑 · 发表于 2023-4-6 08:16

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-4-6 08:18 编辑

HCPlayer

马黑黑 · 发表于 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>