论坛 › 欢乐水吧 › 镇命歌（简单示波器演示）

马黑黑 发表于 2022-12-15 08:22

镇命歌（简单示波器演示）

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t22/webp/vmg.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#papa::before { position: absolute; content: '镇命歌'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #000; text-shadow: 2px 2px 3px #eee; }
#mplayer { position: absolute; top: 0; left: calc(50% - 50px); cursor: pointer; }
</style>

<div id="papa">
        <canvas id="mplayer"></canvas>
        <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/12/15/354ddd17871b3b8749a5eb348f25898e.mp3" autoplay></audio>
</div>

<script>
(function() {
        ypData = ;
        let total = 120,idx = 0;
        let ctx = mplayer.getContext('2d');
        let w = mplayer.width = 400, h = mplayer.height = 100;
        let slice = w / total, vmax = Math.max.apply(null, ypData);
        aud.loop = false;
        ctx.strokeStyle = 'hsla(0, 80%, 90%, .66)';
        ctx.fillStyle = 'hsla(0, 70%, 95%, .75)';
        ctx.font = '14px sans-serif';
        ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
        ctx.shadowBlur = 1;
        ctx.shadowColor = '#000';
        ctx.fillText('play', 100, 50);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('ended', () => { idx = 0; aud.play(); });
        aud.addEventListener('timeupdate', () => {
                draw();
                idx ++;
                if(idx > ypData.length - 1) idx = 0;
        });

        let draw = () => {
                let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData * h / vmax));
                ctx.clearRect(0,0,w,h);
                ctx.beginPath();
                Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar));
                ctx.stroke();
                ctx.fillText(toMin(aud.currentTime) + ' / ' + toMin(aud.duration), 10, 30);
        }
        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;};
})();
</script>

马黑黑 发表于 2022-12-15 08:22

代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t22/webp/vmg.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#papa::before { position: absolute; content: '镇命歌'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #000; text-shadow: 2px 2px 3px #eee; }
#mplayer { position: absolute; top: 0; left: calc(50% - 50px); cursor: pointer; }
</style>

<div id="papa">
        <canvas id="mplayer"></canvas>
        <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/12/15/354ddd17871b3b8749a5eb348f25898e.mp3" autoplay></audio>
</div>

<script>
(function() {
        ypData = ;
        let total = 120,idx = 0;
        let ctx = mplayer.getContext('2d');
        let w = mplayer.width = 400, h = mplayer.height = 100;
        let slice = w / total, vmax = Math.max.apply(null, ypData);
        aud.loop = false;
        ctx.strokeStyle = 'hsla(0, 80%, 90%, .66)';
        ctx.fillStyle = 'hsla(0, 70%, 95%, .75)';
        ctx.font = '14px sans-serif';
        ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
        ctx.shadowBlur = 1;
        ctx.shadowColor = '#000';
        ctx.fillText('play', 100, 50);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('ended', () => { idx = 0; aud.play(); });
        aud.addEventListener('timeupdate', () => {
                draw();
                idx ++;
                if(idx > ypData.length - 1) idx = 0;
        });

        let draw = () => {
                let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData * h / vmax));
                ctx.clearRect(0,0,w,h);
                ctx.beginPath();
                Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar));
                ctx.stroke();
                ctx.fillText(toMin(aud.currentTime) + ' / ' + toMin(aud.duration), 10, 30);
        }
        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;};
})();
</script>

马黑黑 发表于 2022-12-15 08:26

不要被长串长串的 ybData 变量值吓倒，那个用工具制作后不用管，无视它即可。它是示波器运行的依据，是歌曲声音信息记录，如果不需要相对自然一点的示波响应效果，可以用随机数代替。

马黑黑 发表于 2022-12-15 08:28

这个模拟的简易示波器用 canvas 画布制作，也可以用 span 标签模拟，用画布更省事

马黑黑 发表于 2022-12-15 08:28

上班去了

红影 发表于 2022-12-15 09:26

这个就是上次那个圆环播放器里面的那个吧，你曾叫它心电图的那个{:4_173:}

红影 发表于 2022-12-15 09:32

漂亮，像是鹦鹉嘴里吐出来的，漂亮{:4_187:}

红影 发表于 2022-12-15 09:32

马黑黑 发表于 2022-12-15 08:28
上班去了

上班前这么点时间就能出新效果，黑黑厉害{:4_199:}

梦油 发表于 2022-12-15 10:07

这一大片代码把我给看晕了。{:4_201:}

马黑黑 发表于 2022-12-15 13:26

梦油 发表于 2022-12-15 10:07
这一大片代码把我给看晕了。

忽略它

马黑黑 发表于 2022-12-15 13:26

红影 发表于 2022-12-15 09:32
上班前这么点时间就能出新效果，黑黑厉害

一般般

马黑黑 发表于 2022-12-15 13:27

红影 发表于 2022-12-15 09:26
这个就是上次那个圆环播放器里面的那个吧，你曾叫它心电图的那个

有所同有所不同

马黑黑 发表于 2022-12-15 13:27

红影 发表于 2022-12-15 09:32
漂亮，像是鹦鹉嘴里吐出来的，漂亮

还可以一看

醉美水芙蓉 发表于 2022-12-15 16:40

侃大山 发表于 2022-12-15 16:44

又一个新效果，好看

马黑黑 发表于 2022-12-15 17:43

侃大山 发表于 2022-12-15 16:44
又一个新效果，好看

这个相对简单

梦油 发表于 2022-12-15 19:48

马黑黑 发表于 2022-12-15 13:26
忽略它

原因就是因为我不懂。

辫子哥哥 发表于 2022-12-15 19:54

看看很漂亮，但不是我的菜{:4_170:}

马黑黑 发表于 2022-12-15 19:56

辫子哥哥 发表于 2022-12-15 19:54
看看很漂亮，但不是我的菜

好菜共享

马黑黑 发表于 2022-12-15 19:57

梦油 发表于 2022-12-15 19:48
原因就是因为我不懂。

不懂可以无视{:4_170:}

查看完整版本: 镇命歌（简单示波器演示）