电子琴串串烧

马黑黑 · 发表于 2023-3-13 07:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-3-13 07:43

帖子代码

<style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #aaa url('https://638183.freep.cn/638183/t23/1/dzqb.jpg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mydiv { position: absolute; bottom: 60px; left: 60px; width: 160px; height: 80px; color: var(--border); text-shadow: 1px 1px 1px #000; background: #ddb2af; backdrop-filter: blur(20px); border: 6px dotted var(--border); border-radius: 80px 80px 0 0; opacity: .72; display: grid; place-items: end center; cursor: pointer; transform: perspective(2000px) rotateY(-33deg); --deg: 0; --border: hsla(20,80%,40%,.6); }
#mydiv::before { position: absolute; content: ''; width: 8px; height: 78px; background: var(--border); border-radius: 8px; transform-origin: center bottom; transform: rotate(var(--deg)); transition: transform .5s; }
</style>
<div id="papa">
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1885233480" autoplay loop></audio>
</div>
<script>
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;};
mydiv.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('timeupdate', () => {
let deg = 80 - Math.floor(Math.random()*160);
mydiv.style.setProperty('--deg',deg + 'deg');
mydiv.innerText = toMin(aud.currentTime) + '/' + toMin(aud.duration);
});
</script>

复制代码

马黑黑 · 发表于 2023-3-13 07:46

音乐都是老音乐，时长共 50 分钟，可以听个够

马黑黑 · 发表于 2023-3-13 07:57

音乐播放/暂停控制器模拟乱序的简易节拍器，拼多多有卖，6毛钱一个。

简易节拍器的技巧，主要是半圆的CSS画法。可参阅这里的代码和解释：
https://www.huachaowang.com/foru ... &extra=page%3D1

节拍器的运行，由 audio 元素（id="aud"）的 timeupdate 监听事件直接驱动，配合 #mydiv 的 transition 设定，最终运行形态就是酱紫了。transition 的值值得尝试。这个机制，火狐浏览器下的效果很生硬。

JS 的 toMin 函数是将秒数时间信息格式化为分钟结构，这个自定义函数使用率很高，在我的绝大多数提供有时间信息的音乐帖中都会使用，建议收藏这个函数，它在许多场合也会派上用场。它的调用方法：

toMin(秒数)