杨花落尽子规啼
<style>
#papa { left: -214px; width: 1024px; height: 683px; box-shadow: 3px 3px 20px #000; background: lightblue url('https://pic.imgdb.cn/item/630e130116f2c2beb1277702.jpg') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; left: calc(50% - 80px); bottom: 20px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; 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: 15px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 20px; 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: 40px; font: normal 16px sans-serif; color: #ddd; }
#lrctext { position: absolute; left: calc(50% + 30px); 140px; bottom: 50px; 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 = [
['00.00','杨花落尽子规啼-G2er / 黄诗扶 / 国风堂'],
['0.92','（G2er）'],
['1.33','杨花落尽子规啼'],
['1.61','闻道龙标过五溪'],
['8.76','我寄愁心与明月'],
['11.55','随风直到夜郎西'],
['14.90','（黄诗扶）'],
['15.45','倘若相逢即别离'],
['18.56','迢迢千里无期'],
['22.55','此地 何时 再相遇'],
['28.44','（G2er）'],
['57.87','清风起'],
['59.55','风将温酒拂去一腔暖意'],
['64.49','知心人'],
['66.21','酒过半巡称知己'],
['69.03','（黄诗扶）'],
['71.90','诗中句'],
['73.25','总是难叙当时语'],
['78.50','他提笔'],
['80.32','借离别 嘁嘁'],
['83.56','（G2er）'],
['86.27','杨花落尽子规啼'],
['89.20','闻道龙标过五溪'],
['92.62','我寄愁心与明月'],
['96.40','随风直到夜郎西'],
['98.73','（黄诗扶）'],
['100.55','倘若相逢即别离'],
['103.34','迢迢千里无期'],
['107.47','此地 何时 再相遇'],
['111.79','-Music-'],
['113.17','（G2er）'],
['142.59','话中题'],
['143.97','总是难述平生遇'],
['149.40','他提笔'],
['150.99','借花月 噫噫'],
['155.99','（黄诗扶）'],
['156.99','杨花落尽子规啼'],
['158.23','闻道龙标过五溪'],
['163.23','我寄愁心与明月'],
['166.92','随风直到夜郎西'],
['169.78','（G2er）'],
['171.17','倘若相逢即别离'],
['173.87','迢迢千里无期'],
['177.82','何地 何时 再相遇'],
['182.19','（合）'],
['184.75','杨花落尽子规啼'],
['188.08','闻道龙标过五溪'],
['191.53','我寄愁心与明月'],
['195.05','随风直到夜郎西'],
['198.84','倘若相知即相惜'],
['202.21','昭昭明月无比'],
['206.10','何问 何惧 能与你'],
['214.00','谢谢欣赏']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=1375935067.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>
@马黑黑我试着把歌词一起用气起来了。 加林森 发表于 2022-8-30 22:03
@马黑黑我试着把歌词一起用气起来了。
这个本身就是支持lrc歌词同步的 马黑黑 发表于 2022-8-30 22:04
这个本身就是支持lrc歌词同步的
就是。所以我才说很方便的。 加林森 发表于 2022-8-30 22:06
就是。所以我才说很方便的。
额，方便的 马黑黑 发表于 2022-8-30 22:07
额，方便的
很好用。真的得感谢你！{:4_191:} 加林森 发表于 2022-8-30 22:10
很好用。真的得感谢你！
不客气 加林森友友，作业100分。。。。{:4_204:} 马黑黑 发表于 2022-8-30 22:56
不客气
嗯嗯。明白的！ 这个做得漂亮，欣赏队长好帖{:4_187:} 青青子衿 发表于 2022-8-30 23:00
加林森友友，作业100分。。。。
感谢青青支持！{:4_204:}‘{:4_190:} 红影 发表于 2022-8-30 23:07
这个做得漂亮，欣赏队长好帖
谢谢啦。我在试同步的。 欣赏佳作，问候老林。 梦油 发表于 2022-8-31 09:58
欣赏佳作，问候老林。
老梦上午好！ 加林森 发表于 2022-8-30 23:12
谢谢啦。我在试同步的。
这张图图特别美{:4_187:} 红影 发表于 2022-8-31 12:18
这张图图特别美
嗯嗯。用PS制作的。 加林森 发表于 2022-8-31 12:21
嗯嗯。用PS制作的。
其实用什么制作没关系的，那些软件都只是工具而已。 红影 发表于 2022-8-31 13:14
其实用什么制作没关系的，那些软件都只是工具而已。
你说了算。 加林森 发表于 2022-8-31 10:12
老梦上午好！
你好，老林。 梦油 发表于 2022-8-31 14:15
你好，老林。
下午好！
页:
[1]