张明敏 - 乡间小路

马黑黑 · 发表于 2022-10-18 13:11

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

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

x

花潮lrc在线

马黑黑 · 发表于 2022-10-18 13:12

参考代码

<style>
#papa { margin: auto; width: 1024px; height: 640px; background: tan url('https://638183.freep.cn/638183/t22/webp/547.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; display: grid; grid-template-rows: 1fr 3fr 1fr; grid-template-areas: 'top top top' 'left mid mid' '. foot foot'; z-index: 1; }
#papa > div { position: relative; display: grid; }
.pTop { grid-area: top; place-items: center; }
.pMid { grid-area: mid; }
.pFoot { grid-area: foot; place-items: center; }
.pLeft { grid-area: left; place-items: end; }
#mplayer { position: absolute;bottom: 0; width: 300px; height: 80px; user-select: none; 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, hsla(0,100%,50%, .5), hsla(120,100%,50%, .5)); 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 hsla(0,50%,80%, .65); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; background: #eee; 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 { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, hsla(120,100%,50%, .6), hsla(0,100%,50%, .75) 100%, transparent 0); border: 1px solid hsla(120,100%,70%, .6); font: normal 14px / 16px sans-serif; color: hsl(60,100%,50%); opacity: .75; }
#lrc { font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, hsla(120,40%,50%, .6), hsla(120,100%,100%, .5)) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; filter:drop-shadow(1px 1px 2px #000); }
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>
<div id="papa">
<div class="pTop"><span id="lrc">花潮lrc在线</span></div>
<div class="pMid"><img src="https://638183.freep.cn/638183/t22/animal/bird3.gif" alt="" /></div>
<div class="pLeft"><img src="https://638183.freep.cn/638183/t22/rabbit.gif" alt="" style="width: 120px; mix-blend-mode: multiply; transform: translateX(-40px);" /></div>
<div class="pFoot">
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span></div>
</div>
</div>
<script>
let lrcAr = [[0,"张明敏 - 乡间的小路",6],[6.15,"走在乡间的小路上",4.5],[11.55,"暮归的老牛是我同伴",5.0],[17.21,"蓝天配朵夕阳在胸膛",4.9],[22.89,"缤纷的云彩是晚霞的衣裳",4.7],[30.12,"荷把锄头在肩上",4.6],[35.67,"牧童的歌声在荡漾",5.2],[41.49,"喔呜喔喔他们唱",4.7],[47.11,"还有一支短笛隐约在吹响",5.1],[54.2,"笑意写在脸上",2.5],[56.86,"哼一曲乡居小唱",2.7],[60.03,"任思绪在晚风中飞扬",4.4],[65.55,"多少落寞惆怅",2.6],[68.24,"都随晚风飘散",2.9],[71.52,"遗忘在乡间的小路上",4.4],[76.66,"---Music---",6.0],[82.65,"走在乡间的小路上",4.6],[88.21,"暮归的老牛是我同伴",4.7],[94.02,"蓝天配朵夕阳在胸膛",4.7],[99.75,"缤纷的云彩是晚霞的衣裳",5.6],[105.57,"---Music---",28.4],[133.95,"笑意写在脸上",2.6],[136.7,"哼一曲乡居小唱",2.6],[140.04,"任思绪在晚风中飞扬",4.6],[145.36,"多少落寞惆怅",2.7],[148.08,"都随晚风飘散",2.9],[151.4,"遗忘在乡间的小路上",4.3],[155.93,"---Music---",6.7],[162.63,"走在乡间的小路上",4.3],[168.09,"牧童的歌声在荡漾",4.9],[173.87,"喔呜喔喔他们唱",4.7],[179.48,"还有一支短笛隐约在吹响",5.0],[189.67,"还有一支短笛隐约在吹响",5.0],[196.74,"还有一支短笛隐约在吹响",5.0]];
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=194740.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, hsla(120,100%,50%, .6), hsla(0,100%,50%, .75) ' + aud.currentTime / aud.duration * 100 + '%, hsla(0,100%,100%, .45) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) {if(mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
let showLrc = (time) => {lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';lrc.innerHTML = lrcAr[mKey][1];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 mtime = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(mtime);}
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>