似水流年（学习黑黑教程分享套用一个）
<style>
#papa { left: -340px; width: 1280px; height: 704px; top: 150px; box-shadow: 3px 3px 20px #000; background: lightblue url('https://pic.imgdb.cn/item/630f015b16f2c2beb194a7c0.jpg') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; left: calc(50% - 80px); bottom: 100px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; left: 480px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 495px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 500px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left:520px; font: normal 16px sans-serif; color: #ddd; }
#lrctext { position: absolute; left: calc(60% + 30px); 140px; bottom: 180px; font: bold 1.5em sans-serif; color: snow; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>
<div id="papa">
<div id="btnwrap">
<span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
<span id="tmsg">00:00<br>00:00</span>
</div>
<div id="lrctext">lrc歌词</div>
</div>
<script>
let aud = new Audio();
let lrcAr = [
['0.06','《似水流年》'],
['8.37','梅艳芳经典原唱'],
['16.34','谢谢黑黑教程分享'],
['27.70','望着海一片'],
['32.82','满怀倦无泪也无言'],
['40.60','望着天一片'],
['45.58','只感到情怀乱'],
['53.62','我的心又似小木船'],
['58.25','远景不见'],
['62.27','但仍向着前'],
['66.06','谁在命里主宰我'],
['71.27','每天挣扎人海里面'],
['80.35','心中感叹似水流年'],
['88.23','不可以留住昨天'],
['93.25','留下只有思念'],
['99.42','一串串永远缠'],
['105.95','浩瀚烟波里'],
['111.30','我怀念怀念往年'],
['119.50','外貌早改变'],
['124.81','处境都变'],
['128.15','情怀未变'],
['135.48','LRC编辑：小辣椒'],
['159.32','留下只有思念'],
['164.32','一串串永远缠'],
['171.43','浩瀚烟波里'],
['177.21','我怀念怀念往年'],
['184.20','外貌早改变'],
['195.08','处境都变'],
['193.12','情怀未变'],
['199.16','留下只有思念'],
['204.27','一串串永远缠'],
['210.91','浩瀚烟波里'],
['216.77','我怀念怀念往年'],
['224.54','外貌早改变'],
['229.39','处境都变'],
['232.84','情怀未变'],
['238.45','留下只有思念'],
['244.06','一串串永远缠'],
['250.43','浩瀚烟波里'],
['256.01','我怀念怀念往年'],
['263.99','外貌早改变'],
['268.93','处境都变'],
['272.12','情怀未变'],
['278.64','留下只有思念'],
['283.59','一串串永远缠'],
['289.85','浩瀚烟波里'],
['295.57','我怀念怀念往年'],
['303.76','外貌早改变'],
['309.56','谢谢欣赏！'],
['317.73','谢谢欣赏！'],
['317.98','']
];
aud.src = 'http://wx.ttt.dj/data/nfs/mp3/ssln.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
for (j = 0; j < lrcAr.length;j ++) {
if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
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>
<br><br><br><br><br><br><br><br> @马黑黑
这个播放器很喜欢的，昨天晚上做，被这首歌词同步搞晕了。主要歌曲不熟 帖子构思大气，制作细腻。精品！ 很酷啊，漂亮 这个帖子虽然是黑色的底，但是配色和布局都很漂亮，亲爱的真棒{:4_199:} 我差点把这个帖漏掉。真漂亮的制作。我喜欢的歌曲！{:4_199:} 很有艺术范儿， 美美达{:4_187:} 熟悉的旋律，多谢老师的分享！{:4_204:} 醉美水芙蓉 发表于 2022-8-31 21:33
欣赏小辣椒漂亮制作！
谢谢水芙蓉欣赏{:4_187:} 马黑黑 发表于 2022-8-31 21:57
帖子构思大气，制作细腻。精品！
哇瑟，谢谢黑黑教程分享，小辣椒套用一个{:4_187:} 绿叶清舟 发表于 2022-8-31 21:59
很酷啊，漂亮
清舟你的图图才漂亮的 红影 发表于 2022-8-31 22:42
这个帖子虽然是黑色的底，但是配色和布局都很漂亮，亲爱的真棒
亲爱的，还是求速度，用的旧图图 加林森 发表于 2022-9-1 13:19
我差点把这个帖漏掉。真漂亮的制作。我喜欢的歌曲！
队长也是喜欢梅艳芳啊{:4_187:}
谢谢队长欣赏 千羽 发表于 2022-9-1 20:27
很有艺术范儿， 美美达
美女你会夸奖的，轻松我就套用黑黑的代码玩一下的 小辣椒的作品日趋完美了哦{:4_185:} 梦缘 发表于 2022-9-1 20:28
熟悉的旋律，多谢老师的分享！
谢谢梦缘欣赏，欢迎来到花潮论坛一起学习，一起玩{:4_171:} 小辣椒 发表于 2022-9-1 20:40
美女你会夸奖的，轻松我就套用黑黑的代码玩一下的
很羡慕你的轻松啊……{:4_173:} 千羽 发表于 2022-9-1 20:42
很羡慕你的轻松啊……
你去看看黑黑分享的教程真的套用就轻松的 千羽 发表于 2022-9-1 20:41
小辣椒的作品日趋完美了哦
那是你太夸张了{:4_170:}