论坛 › 音乐沙龙 › 电子琴串串烧

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

电子琴串串烧

<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: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/forum.php?mod=viewthread&tid=67258&extra=page%3D1

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

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

    toMin(秒数)

马黑黑 发表于 2023-3-13 08:10

如果想要一个有规律的节拍器，可以考虑以下代码：

<style>
#mplayer {
        position: relative;
        width: 160px;
        height: 80px;
        color: var(--border);
        text-shadow: 1px 1px 1px #000;
        border: 6px dotted var(--border);
        border-radius: 100px 100px 0 0;
        display: grid;
        place-items: end center;
        cursor: pointer;
        --border: hsla(20,80%,40%,.6);
}
#mplayer::before {
        position: absolute;
        content: '';
        width: 8px;
        height: 78px;
        background: var(--border);
        border-radius: 8px;
        transform-origin: center bottom;
        animation: swing .6s infinite alternate linear;
}
@keyframes swing {
        from {transform: rotate(60deg); }
        to {transform: rotate(-60deg); }
}
</style>

<div id="mplayer"></div>

寻梦花园 发表于 2023-3-13 08:17

问好朋友
欣赏学习了{:4_178:}

马黑黑 发表于 2023-3-13 08:21

寻梦花园 发表于 2023-3-13 08:17
问好朋友
欣赏学习了

早上好

红影 发表于 2023-3-13 08:44

马黑黑 发表于 2023-3-13 08:10
如果想要一个有规律的节拍器，可以考虑以下代码：

有规律的不好玩，真的成了钟摆了，还是这样的好玩{:4_187:}

红影 发表于 2023-3-13 08:46

这个节拍器做在帖子里还是很漂亮的，而且非常适合这样的背景，黑黑的帖子太棒了{:4_199:}

庶民 发表于 2023-3-13 10:28

真美，点赞。

焱鑫磊 发表于 2023-3-13 10:40

欣赏学习！{:4_176:}

梦油 发表于 2023-3-13 11:32

欣赏美乐。谢谢啦！

马黑黑 发表于 2023-3-13 12:00

梦油 发表于 2023-3-13 11:32
欣赏美乐。谢谢啦！

{:4_190:}

马黑黑 发表于 2023-3-13 12:01

红影 发表于 2023-3-13 08:44
有规律的不好玩，真的成了钟摆了，还是这样的好玩

钟摆也是不错的，有空弄个

马黑黑 发表于 2023-3-13 12:01

焱鑫磊 发表于 2023-3-13 10:40
欣赏学习！

中午好

马黑黑 发表于 2023-3-13 12:01

庶民 发表于 2023-3-13 10:28
真美，点赞。

感谢支持

马黑黑 发表于 2023-3-13 12:01

红影 发表于 2023-3-13 08:46
这个节拍器做在帖子里还是很漂亮的，而且非常适合这样的背景，黑黑的帖子太棒了

一班一班{:5_106:}

樵歌 发表于 2023-3-13 12:27

这是哪家小闺女，弹得真好！{:4_174:}

樵歌 发表于 2023-3-13 12:29

想听下一首，或快进怎么办{:4_173:}

马黑黑 发表于 2023-3-13 12:46

樵歌 发表于 2023-3-13 12:29
想听下一首，或快进怎么办

串起来的木有这个设置

查看完整版本: 电子琴串串烧