泉水 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2022-12-18 08:25

泉水

本帖最后由马黑黑于 2022-12-18 08:29 编辑 <br /><br /><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/Pic/81/18u.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: url('https://638183.freep.cn/638183/Pic/81/xq.jpeg'); transform: translate(400px) scale(0.6); mix-blend-mode: multiply; }
#papa::after { position: absolute; content: url('https://638183.freep.cn/638183/Pic/2022/btf.gif'); transform: translate(350px); filter: blur(1px); }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1965439628.mp3" autoplay></audio>
</div>

<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],ypData: new Array(600).fill(0).map((v, k) => Math.random() * 150 + Math.random() * (k < 300 ? k : (500 - k)) * 0.15),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.7 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };mplayer.onclick = (e) => {if(e.offsetY < h * 0.7) {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 = '16px 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, 0.7 * (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, 0.7 * (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,
lrc_css: '--bg: linear-gradient(hsla(120,50%,95%,.45),hsla(120,100%,50%,.65)); color: hsla(120,50%,95%, .7);',
player_css: '--color1: green; --color2: lightgreen;--ww: 300px; --hh: 80px; bottom: 20px; ',
});
})();
</script>

马黑黑 发表于 2022-12-18 08:39

本帖最后由马黑黑于 2022-12-18 09:15 编辑

帖子右边的棋盘是神仙对弈的证据。棋盘与溪岸岩石已融为一体，历经几千年的风吹雨打，依然不腐不朽。

棋盘原本长酱紫，一看就知道是俺手工做的，画的还行，就是河界二字以及棋子上的字，写的初小水平，@东篱闲人见笑了：

https://638183.freep.cn/638183/Pic/81/xq.jpeg
蝴蝶对象棋感兴趣吗？不，它们在探究并尝试收集远古时期的仙气吧？

李白没来过这里，这里是十八水仙境，当地菇凉个个如花似玉能歌善舞喝酒如喝水，但李白出远门求官时百度了一下，晓得这里天高皇帝远，决定不南下，错过了一段又一段的风流。

马黑黑 发表于 2022-12-18 08:44

本帖使用 32号插件，进度可调。

关于示波图，本帖使用了歌曲自身的。如果不配置 ypData 参数，示波图也会有，长酱紫：

梦油发表于 2022-12-18 09:47

瀑布边的对弈那将是一番怎样的意境啊！

红影发表于 2022-12-18 10:08

马黑黑发表于 2022-12-18 08:44
本帖使用 32号插件，进度可调。

关于示波图，本帖使用了歌曲自身的。如果不配置 ypData 参数，示波图也 ...

还是用歌曲自身的示波比较漂亮，而且每个都不同，各擅风情{:4_173:}

红影发表于 2022-12-18 10:09

马黑黑发表于 2022-12-18 08:39
帖子右边的棋盘是神仙对弈的证据。棋盘与溪岸岩石已融为一体，历经几千年的风吹雨打，依然不腐不朽。

棋 ...

自己画棋盘，这个厉害了{:4_199:}

红影发表于 2022-12-18 10:18

这里的环境特别清幽，不仅蝴蝶可以汲取到仙气，人在帖子中徜徉，一样能获得仙气呢{:4_187:}

马黑黑 发表于 2022-12-18 10:22

红影发表于 2022-12-18 10:18
这里的环境特别清幽，不仅蝴蝶可以汲取到仙气，人在帖子中徜徉，一样能获得仙气呢

有那么好吗{:4_173:}

马黑黑 发表于 2022-12-18 10:23

红影发表于 2022-12-18 10:09
自己画棋盘，这个厉害了
我是中国象棋爱好者，就是水平老上不去，跟东篱下只能让两个马和一个车

马黑黑 发表于 2022-12-18 10:23

红影发表于 2022-12-18 10:08
还是用歌曲自身的示波比较漂亮，而且每个都不同，各擅风情

对，就是要麻烦制作一下

马黑黑 发表于 2022-12-18 10:24

梦油发表于 2022-12-18 09:47
瀑布边的对弈那将是一番怎样的意境啊！

这里坡度有些高，人无法安然对弈，神仙才行

梦油发表于 2022-12-18 14:41

马黑黑发表于 2022-12-18 10:24
这里坡度有些高，人无法安然对弈，神仙才行

那可就是真正的仙境了。

马黑黑 发表于 2022-12-18 15:03

梦油发表于 2022-12-18 14:41
那可就是真正的仙境了。

{:4_181:}

红影发表于 2022-12-18 16:14

马黑黑发表于 2022-12-18 10:22
有那么好吗

非常喜欢的环境{:4_187:}

红影发表于 2022-12-18 16:16

马黑黑发表于 2022-12-18 10:23
我是中国象棋爱好者，就是水平老上不去，跟东篱下只能让两个马和一个车

哈哈，我更惨，曾经和同事玩，让我车马炮，我都还输{:4_189:}

红影发表于 2022-12-18 16:16

马黑黑发表于 2022-12-18 10:23
对，就是要麻烦制作一下

这个制作也是方便的呢，黑黑有相应的工具呀。

马黑黑 发表于 2022-12-18 16:28

红影发表于 2022-12-18 16:16
这个制作也是方便的呢，黑黑有相应的工具呀。

会花几分钟时间的

马黑黑 发表于 2022-12-18 16:31

红影发表于 2022-12-18 16:16
哈哈，我更惨，曾经和同事玩，让我车马炮，我都还输

这个要下很多很多才有水平

马黑黑 发表于 2022-12-18 16:37

红影发表于 2022-12-18 16:14
非常喜欢的环境

挺好

小辣椒 发表于 2022-12-18 17:20

马黑黑发表于 2022-12-18 16:28
会花几分钟时间的

适合最懒的小辣椒{:4_170:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

泉水