雾
<style>#papa { margin: auto; width: 760px; height: 460px; background: gray url('https://638183.freep.cn/638183/t22/hl/mist.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; }
#papa::before { position: absolute; content: 'Mist'; font: bold 3em sans-serif; left: 30px; top: 15px; color: #57535e; text-shadow: 2px 2px 12px snow;}
</style>
<div id="papa">
<img src="https://638183.freep.cn/638183/t22/gif/sss.gif" alt="" onmouseover="javascript: this.src='https://638183.freep.cn/638183/t22/gif/sss.gif'" style="transform: translateY(100px);cursor: pointer;" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1381745587.mp3" autoplay loop></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {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; }</style><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;let ctx = mplayer.getContext('2d');let getCssVal = (e,v) => getComputedStyle(e).getPropertyValue(v);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('timeupdate', () => {idx = Math.round(data.ypData.length * aud.currentTime / aud.duration);if(idx > data.ypData.length - 1) idx = data.ypData.length - 1;draw();});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 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);
ypData = ;
HCPlayer({
ypData: ypData,
player_css: '--color1: purple; --color2: snow; --ww: 280px; --hh: 80px; left: calc(50% - 140px); bottom: 20px; ',
});
})();
</script>
鼠标移动桥上的大可爱有交互 本帖使用测试中的示波播放器插件，详情请看
https://www.huachaowang.com/forum.php?mod=viewthread&tid=65318&extra=page%3D1 那个笑眯眯的大可爱挺有意思{:4_173:} 马黑黑 发表于 2022-12-16 21:41
鼠标移动桥上的大可爱有交互
嗯，试了，有趣{:4_181:} 马黑黑 发表于 2022-12-16 21:41
鼠标移动桥上的大可爱有交互
啊~~~这个好玩，还带趣味性的{:4_178:} 马黑黑 发表于 2022-12-16 21:42
本帖使用测试中的示波播放器插件，详情请看
https://www.huachaowang.com/forum.php?mod=viewthread&tid ...
有插件了，做起来会轻松一点了 好像每首曲子的示波都不一样的呢。嗯，鼠标上去，大可爱会摇头{:4_187:} 在雾中守护着桥么？此路是我开，要留下买路钱的节奏{:4_189:} 红影 发表于 2022-12-16 22:27
在雾中守护着桥么？此路是我开，要留下买路钱的节奏
正是正是{:4_170:} 红影 发表于 2022-12-16 22:26
好像每首曲子的示波都不一样的呢。嗯，鼠标上去，大可爱会摇头
当然不一样的。每支歌曲，都有自己独特的声音状况 小辣椒 发表于 2022-12-16 22:25
有插件了，做起来会轻松一点了
那是自然 小辣椒 发表于 2022-12-16 22:24
啊~~~这个好玩，还带趣味性的
看得出原理吗 千羽 发表于 2022-12-16 22:21
嗯，试了，有趣
好玩吧 千羽 发表于 2022-12-16 22:20
那个笑眯眯的大可爱挺有意思
给钱钱就让你过桥 马黑黑 发表于 2022-12-16 22:35
正是正是
笑嘻嘻的劫匪啊{:4_173:} 马黑黑 发表于 2022-12-16 22:35
当然不一样的。每支歌曲，都有自己独特的声音状况
是啊，前面这几个帖子的示波相差那么多。 红影 发表于 2022-12-16 23:17
是啊，前面这几个帖子的示波相差那么多。
都会有差异的，很大 红影 发表于 2022-12-16 23:16
笑嘻嘻的劫匪啊
有礼貌 大可爱还会眨眼，是挺可爱的。