茶山笛语
本帖最后由 马黑黑 于 2022-12-4 09:33 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 593px); position: relative; width: 1024px; height: 640px; background: #000 url('https://638183.freep.cn/638183/t22/webp/iudy.webp') no-repeat center/cover; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
#tit { position: absolute; left: 0; top: 0; padding: 10px 16px; font: bold 2em sans-serif; color: lightgreen; text-shadow: 1px 2px 4px #000; animation: fly 40s infinite alternate linear; transition: color .5s; }
#tit:hover { color: green; }
@keyframes fly { to { left: 860px; } }
</style>
<div id="papa">
<span id="tit">茶山笛语</span>
</div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1670113373100023.mp3" autoplay loop crossorigin="anonymous"></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = { size: 20,player_css: 'left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer { --ww: 100%; position: absolute; width: var(--ww); height: 260px; cursor: pointer; }.ball { --hh: 15px; position: absolute; border-radius: 50%; transition: .15s; }.ball::before { position: absolute; content: ''; width: 2px; height: var(--hh); left: calc(50% - 1px); top: 100%; background: linear-gradient(hsla(0,0%,90%,.25),transparent); transform-origin: 50% 0; }</style><div id="mplayer"></div>,`};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let ballSize = data.size;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();(function () {let gap = 2;let maWidth = mplayer.offsetWidth;let total = Math.round(maWidth / (ballSize + gap + 1));if(total % 2 != 0 ) total -= 1;let audCtx = new AudioContext();let audSrc = audCtx.createMediaElementSource(aud);audSrc.crossorigin = 'anonymous';let analyser = audCtx.createAnalyser();audSrc.connect(analyser);analyser.connect(audCtx.destination);mplayer.style.cssText += `bottom: ${ballSize + gap}px;`;for(j=0; j<total; j++) {let el = document.createElement('span');let xx = j%2 === 0 ? maWidth/2 + (ballSize + gap) * j / 2 : maWidth/2 - (ballSize + gap) * (j-1) / 2 - ballSize;el.className = 'ball';el.style.cssText += `width: ${ballSize}px; height: ${ballSize}px; left: ${xx}px; background: linear-gradient(135deg,hsla(${Math.ceil(Math.random()*360)},${Math.round(Math.random()*100)}%,${Math.round(Math.random()*50)}%,.75),hsla(${Math.ceil(Math.random()*360)},100%,50%,.75))`;mplayer.appendChild(el);}let voiceHeight = new Uint8Array(analyser.frequencyBinCount);let balls = document.querySelectorAll('.ball');(function draw() {analyser.getByteFrequencyData(voiceHeight);let step = Math.round(voiceHeight.length / total);for (let j = 0; j < total; j++) {let a8h = voiceHeight;balls.style.top = mplayer.offsetHeight - a8h/2 + 'px';balls.style.setProperty('--hh',a8h/2 + 'px');}window.requestAnimationFrame(draw);})();})();};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({size: 28});
})();
</script>
又是一个新的封装，这一串小球，为茶山增添了美妙的色彩{:4_199:} 红影 发表于 2022-12-4 08:37
又是一个新的封装，这一串小球，为茶山增添了美妙的色彩
这个是昨天发的那个的改进版，火狐测试通过，较低版本（核心100以内）的chromium也测试通过 李志辉的音乐带有浓厚的民族与时代气息，二者完美结合，营造出美得令人窒息的音乐效果 马黑黑 发表于 2022-12-4 08:47
这个是昨天发的那个的改进版，火狐测试通过，较低版本（核心100以内）的chromium也测试通过
厉害，终于给黑黑研究出来了{:4_199:} 本帖最后由 马黑黑 于 2022-12-4 09:21 编辑
红影 发表于 2022-12-4 09:00
厉害，终于给黑黑研究出来了
这个本来不难呀。昨天的帖子，我为了方便控制小球的排列，用了反射，制作右半边的小球，结果火狐下不行，就去查火狐的开发文档，发现它有 element(#id) 的背景属性，没想到discuz不认可。所以，今天做的，回到常规排列小球，设计一个算法就可以了：
从中间排列，双数的往右边排，单数的往左边排，所得小球如果不是双数，则减掉一个。 黑黑这个比较昨天的点点多了一点，还有游动字标题，高难度制作只能套用了 小辣椒 发表于 2022-12-4 09:26
黑黑这个比较昨天的点点多了一点，还有游动字标题，高难度制作只能套用了
你分析一下源码，会发现当前它可以定义一些东东，在 HCPlayer({}) 里配置一下两个参数：
HCPlayer({
size: 40,
player_css: '--ww: 80%; left: 50%; transform: translate(-50%);',
});
size 是小球的直径，player_css 有一个 CSS 变量 --ww，用于设置小球父元素的宽度，可用 left 设置左边值，我举的例子还用了 transform: translate()，目的是居中。
这个效果还在改进中，但方向大致就这样了。 马黑黑 发表于 2022-12-4 09:31
你分析一下源码，会发现当前它可以定义一些东东，在 HCPlayer({}) 里配置一下两个参数：
HCPlayer({
我现在手机，等电脑看看，晚上找音乐套一个 小辣椒 发表于 2022-12-4 09:38
我现在手机，等电脑看看，晚上找音乐套一个
好 马黑黑 发表于 2022-12-4 09:18
这个本来不难呀。昨天的帖子，我为了方便控制小球的排列，用了反射，制作右半边的小球，结果火狐下不行， ...
聪明{:4_199:} 红影 发表于 2022-12-4 10:12
聪明
这个与聪明与否无关，在尊重声音的音高音低规律，通常，高的在中间，然后往两边依次减弱 马黑黑 发表于 2022-12-4 10:15
这个与聪明与否无关，在尊重声音的音高音低规律，通常，高的在中间，然后往两边依次减弱
能想到这规律并有手段去实现它，就是聪明呢{:4_187:} 真美的茶山，感谢老师的精彩分享，真棒！{:4_199:} 梦缘 发表于 2022-12-4 10:23
真美的茶山，感谢老师的精彩分享，真棒！
{:4_191:} 红影 发表于 2022-12-4 10:21
能想到这规律并有手段去实现它，就是聪明呢
这个，如果猪猪会编程，猪猪也会想得到 千变万化的播放器真漂亮 梦油 发表于 2022-12-4 11:16
千变万化的播放器真漂亮
这个主要是能喝音乐交互 马黑黑 发表于 2022-12-4 11:11
这个，如果猪猪会编程，猪猪也会想得到
这话说的，还好是你自己说的，别人这样说你，你还不得跳起来啊{:4_170:} 茶山的青幽美雅，配合小球的活泼跳跃，好玩得紧。