小鸡小鸡
<style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 600px; display: grid; place-items: center; background: gray url('https://638183.freep.cn/638183/t22/animal/xjxj.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; opacity: .95; user-select: none; overflow: hidden; z-index: 1; --state: paused; }
#papa::before { position: absolute; content: ''; width: 400px; height: 400px; top: 100px; left:10px; background: url('https://638183.freep.cn/638183/t22/animal/xjxj.webp') -270px -10px / cover no-repeat; border-radius: 50%; box-shadow: 4px 4px 4px hsla(0,0%,0%,.15); animation: rot 6s infinite alternate linear; }
@keyframes rot { from { transform: rotate(10deg); } to { transform: rotate(-10deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29567381.mp3" autoplay></audio>
</div>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],ypData: new Array(600).fill(0).map((v, k) => Math.floor(Math.random() * 200) + 10),player_css: 'bottom: 15px; left: 50%; transform: translate(-50%); ',playerCode: `<style>#mplayer { --color1: red; --color2: pink; --ww: 200; --hh: 80; position: absolute; cursor: pointer; }#lrc { --motion: cover2;--tt: 2s;--state: paused; --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75)); position: absolute; top: 20px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%;height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }@keyframes cover1 {from {width: 0;} to {width: 100%;}}@keyframes cover2 {from {width: 0;} to {width: 100%;}}</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><canvas id="mplayer"></canvas>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;aud.loop = false;let mKey = 0, mFlag = true;let getCssVal = (e,v) => getComputedStyle(e).getPropertyValue(v);let ctx = mplayer.getContext('2d');let w = mplayer.width = getCssVal(mplayer,'--ww').replace(/[^0-9]/ig,''), h = mplayer.height = getCssVal(mplayer,'--hh').replace(/[^0-9]/ig,''), idx = 0;let slice = w / data.ypData.length, vmax = Math.max.apply(null, data.ypData);mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };mplayer.onclick = (e) => {if(e.offsetY < h * 0.8) {let ac = aud.duration * e.offsetX / w;idx = Math.round(data.ypData.length * ac / aud.duration);aud.currentTime = ac;} else {aud.paused ? aud.play() : aud.pause();}};aud.addEventListener('pause', () => mState());aud.addEventListener('playing', () => mState());aud.addEventListener('seeked', () => calcKey());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {idx = Math.round(data.ypData.length * aud.currentTime / aud.duration);if(idx > data.ypData.length - 1) idx = data.ypData.length - 1;draw();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let draw = () => {ctx.clearRect(0,0,w,h);ctx.strokeStyle = getCssVal(mplayer,'--color1');ctx.fillStyle = getCssVal(mplayer,'--color2');ctx.font = '14px sans-serif';ctx.shadowOffsetX = ctx.shadowOffsetY = 1;ctx.shadowBlur = 2;ctx.shadowColor = '#555';ctx.textAlign = 'center';ctx.beginPath();for(j = 0; j <= idx; j ++) {ctx.lineTo(slice*j, h - data.ypData * h / vmax);}ctx.stroke();ctx.beginPath();ctx.strokeStyle = getCssVal(mplayer,'--color2');for(j = idx; j < data.ypData.length; j ++) {ctx.lineTo(slice*j, h - data.ypData * h / vmax);}ctx.stroke();ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let mState = () => aud.paused ? lrc.style.setProperty('--state', 'paused') : lrc.style.setProperty('--state', 'running');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;};draw();};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let ypData = ;
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
player_css: '--color1: red; --color2: lightblue; bottom: 20px; ',
});
})();
</script> 开心、开心。幽默、诙谐的让人开怀大笑。 梦油 发表于 2022-12-17 11:20
开心、开心。幽默、诙谐的让人开怀大笑。
这歌挺好玩的 马黑黑 发表于 2022-12-17 11:28
这歌挺好玩的
鸡鸣狗叫……全来了。挺好玩的。 梦油 发表于 2022-12-17 11:31
鸡鸣狗叫……全来了。挺好玩的。
拟声的曲子，非常有特色 听得笑，现在都什么歌啊{:4_173:} 左边那摇摆的小鸡我以为是我鼠标移上去的缘故，结果不是的。不知这个转动是不是跟音乐相关{:4_173:} 红影 发表于 2022-12-17 13:41
左边那摇摆的小鸡我以为是我鼠标移上去的缘故，结果不是的。不知这个转动是不是跟音乐相关
没有 原来是从原图上裁一块，让它转动。这个法子不错，半边比较空的倒是挺好用的{:4_204:} 红影 发表于 2022-12-17 13:40
听得笑，现在都什么歌啊
这歌好 红影 发表于 2022-12-17 13:50
原来是从原图上裁一块，让它转动。这个法子不错，半边比较空的倒是挺好用的
赖得设计，就这么弄 马黑黑 发表于 2022-12-17 12:22
拟声的曲子，非常有特色
出奇制胜。{:4_199:} 马黑黑 发表于 2022-12-17 13:50
没有
嗯嗯，就是个摇摆图图{:4_204:} 马黑黑 发表于 2022-12-17 13:50
这歌好
是的，倒也轻松解压{:4_173:} 红影 发表于 2022-12-17 16:29
嗯嗯，就是个摇摆图图
它是独立于音乐的 马黑黑 发表于 2022-12-17 13:51
赖得设计，就这么弄
又学了一招{:4_173:} 红影 发表于 2022-12-17 16:29
又学了一招
不过小辣椒更喜欢往里塞各种图片、粒子 红影 发表于 2022-12-17 16:29
是的，倒也轻松解压
这歌唱起来有难度的 梦油 发表于 2022-12-17 14:45
出奇制胜。
王蓉唱的歌还不错的 这歌好听，听了挺开心的！{:4_189:}