梅花泪 帖赠：虎妞 祝早日康复
<style>#papa { margin: 150px 0 0 calc( 50% - 790px); width: 1397px; height: 788px; display: grid; place-items: center; background: gray url('https://xlaj.cn/assets/file/zp/20230729101746.gif') no-repeat center/cover; box-shadow: 1px 1px 10px #000; position: relative; opacity: .95; user-select: none; overflow: hidden; z-index: 1; --state: paused; }
#papa::before { position: absolute; content: ''; width: 370px; height: 208px; top: 350px; left:500px; background: url('https://xlaj.cn/assets/file/zp/20230729101808.gif') 0px -10px/ cover no-repeat; border-radius: 50%; box-shadow: 4px 4px 4px hsla(0,0%,0%,.15); animation: rot 6s infinite alternate linear; }
#dt1{ position: absolute; width: 136px; height: 145px; top: 440px; left: 50px; }
#dt2{ position: absolute; width: 97px; height: 80px; top: 60px; left: 175px; }
@keyframes rot { from { transform: rotate(10deg); } to { transform: rotate(-10deg); } }
</style>
<div id="papa">
<img id="dt" src="ttps://yinhua.ru/20221219/0002.png" alt="" style="position: absolute; mix-blend-mode: multiply; transform: translate(30px, 40px) rotate(360deg); " />
<img id="dt" src="ttps://yinhua.ru/20221219/0F.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: translate(30px, 40px) rotate(360deg); " />
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230729101628.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: 800; --hh: 80; position: absolute; cursor: pointer; }#lrc { --motion: cover2;--tt: 2s;--state: paused; --bg: linear-gradient(180deg, hsla(120, 88%, 50%,.55), hsla(120, 88%,50%,.55)); position: absolute; top: 60px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px 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 = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
ypData = ;
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
player_css: '--color1: Wheat; --color2: #299b13; bottom: 20px;',
});
})();
</script>
谢谢老头的图图，你的就是我的，所以加了我的logo{:4_170:}@东篱闲人
继续复习黑黑以前的播放器@马黑黑 发帖是我们的真心祝福，但不发链接，等待虎妞的归来再发，离开虎妞上次送翻唱已经大半年了这段时间虎妞一直眼睛不好，希望这次手术后可以痊愈，祝福亲爱的，一切安好！ 小辣椒 发表于 2023-7-29 10:45
继续复习黑黑以前的播放器@马黑黑
这个用在你这个帖子挺合适的。梅花泪也是一首挺好的歌，这个翻唱也是把握的不错。 马黑黑 发表于 2023-7-29 10:52
这个用在你这个帖子挺合适的。梅花泪也是一首挺好的歌，这个翻唱也是把握的不错。
谢谢黑黑的教程分享，这个播放器我一直想做一次，这次是老头帮我做是图，刚好用上了 小辣椒 发表于 2023-7-29 10:55
谢谢黑黑的教程分享，这个播放器我一直想做一次，这次是老头帮我做是图，刚好用上了
看着舒服 马黑黑 发表于 2023-7-29 11:02
看着舒服
其实前面学过的有许多播放器没有做过第二次，有的根本没有做的，好可惜啊，慢慢再复习做一次了 小辣椒 发表于 2023-7-29 11:09
其实前面学过的有许多播放器没有做过第二次，有的根本没有做的，好可惜啊，慢慢再复习做一次了
不急的 还有红梅可以一朵朵开出来呢。亲爱的真漂亮的制作。辫子哥哥的翻唱也好听{:4_199:} 小辣椒 发表于 2023-7-29 10:52
发帖是我们的真心祝福，但不发链接，等待虎妞的归来再发，离开虎妞上次送翻唱已经大半年了这段时间虎妞一直 ...
还不知道呢，同祝虎妞早日痊愈{:4_204:} 图中的泪滴滑落得好快啊{:4_173:} 马黑黑 发表于 2023-7-29 11:10
不急的
是准备慢慢来，一个个复习一遍 红影 发表于 2023-7-29 11:13
还有红梅可以一朵朵开出来呢。亲爱的真漂亮的制作。辫子哥哥的翻唱也好听
亲爱的，图图是老头做的，我就加了几个效果上去 红影 发表于 2023-7-29 11:14
还不知道呢，同祝虎妞早日痊愈
一起祝福吧，等待虎妞的归来一起玩 小辣椒 发表于 2023-7-29 11:20
是准备慢慢来，一个个复习一遍
不要太心急，东西都在论坛里 红影 发表于 2023-7-29 11:15
图中的泪滴滑落得好快啊
泪流不止{:4_189:}
眼泪是白颜色的，图图底颜也是白的，我就改了眼泪的颜色，深颜色就感觉更加快了 马黑黑 发表于 2023-7-29 11:24
不要太心急，东西都在论坛里
好的，来日方长。。。。 小辣椒 发表于 2023-7-29 11:48
好的，来日方长。。。。
嗯嗯