欣赏队长的童丽靓声
嗯嗯，我这个是同步的吧。
<style>
#papa { left: -214px; width: 1024px; height: 884px; background: gray url('https://pic.imgdb.cn/item/630f25bd16f2c2beb1ae1de7.jpg') no-repeat center/cover;box-shadow: 3px 3px 20px #000; position: relative; user-select: none; z-index: 1; }
#mplayer { position: absolute; left:60PX；calc(50% - 150px); bottom: 10px; width: 300px; height: 86px; background: rgba(0,0,0,.35); border: 4px double #ccc; border-radius: 3px; border-color: red orange purple tomato; backdrop-filter: blur(4px); display: grid; place-items: center; }
#mplayer span { position: absolute; transition: .5s; }
#lrc { top: 4px; padding: 2px; font: normal 1.4em sans-serif; color: #00BFFF; text-shadow: 1px 1px 1px #FFD700; }
#prog { bottom: 6px; width: 290px; height: 1px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer; }
#prog::before { position: absolute; height: 10px; width: 290px; top: -4px; content: ''; }
#btnmain { bottom: 14px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnmain:hover { background: orange; }
#btnplay { position: absolute; left: 8px; width: 16px; height: 16px; background: #bbb; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { position: absolute; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #bbb; display: none; }
#dur, #cur { font: normal 14px sans-serif; bottom: 14px; color: #eee; }
#dur:hover, #cur:hover, #lrc:hover { color: tomato; }
#cur { left: 5px ; }
#dur { right: 5px; }
</style>
<div id="papa">
<div id="mplayer">
<span id="lrc">lrc歌词</span>
<span id="prog"></span>
<span id="btnmain">
<span id="btnplay"></span>
<span id="btnpause"></span>
</span>
<span id="dur">00:00</span>
<span id="cur">00:00</span>
</div>
</div>
<script>
let lrcAr = [
['00.00','阖眸烟云-东篱'],
['3.98','作词 : 知月倾城'],
['5.88','作曲 : 舜禹'],
['27.31','我来时烟树花落故道'],
['32.71','云霞避处隐现仙宴谈笑'],
['38.23','烟与云追寻拢羽袖角'],
['43.66','沉淀我于亘古破晓'],
['49.62','我居时群芳频催华韶'],
['54.98','落英残垣蜿蜒云水迢遥'],
['61.11','风露间远望满目寂寥'],
['69.78','方知我仍年少'],
['75.96','岁月负我情衷'],
['80.13','羽化我曾摸索的每一双眼眸'],
['87.64','隔烟云千重纵容着我'],
['92.93','徒劳的挽留'],
['97.65','岁月窃我皓首'],
['101.78','懵懂我铭记的恩仇'],
['106.05','最后这烟云还与我'],
['113.82','惘然如旧'],
['147.96','我曾撷十方烟笼桃夭'],
['153.34','云笔涛墨洇作隔世笙箫'],
['158.90','烟与云追寻炊烟小桥'],
['164.42','遗落我于春寒料峭'],
['170.37','迷途中蜃楼更迭尘嚣'],
['176.01','陷我蹒跚行与曦色浩渺'],
['181.99','天海间流光划破衣袍'],
['190.60','泣我仍未苍老'],
['196.16','岁月负我情衷'],
['200.85','羽化我曾摸索的每一双眼眸'],
['208.30','隔烟云千重纵容着我'],
['213.70','徒劳的挽留'],
['218.42','岁月窃我皓首'],
['222.76','懵懂我铭记的恩仇'],
['226.69','最后这烟云还与我'],
['234.37','惘然如旧']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=31062971.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.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 4px';
dur.innerText = toMin(aud.duration);
cur.innerText = toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
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;
}
</script>
小辣椒 发表于 2022-7-14 20:53
队长这个小星星效果做出来了
是的。谢谢！ 好听的多听！
页:
1
[2]