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

马黑黑

马黑黑

代码

1. <style>
   
2. #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; }
   
3. #papa::before { position: absolute; content: '镇命歌'; left: 30px; top: 15px; font: bold 2.4em sans-serif; color: #000; text-shadow: 2px 2px 3px #eee; }
   
4. #mplayer { position: absolute; top: 0; left: calc(50% - 50px); cursor: pointer; }
   
5. </style>
   
6. 
   
7. <div id="papa">
   
8.         <canvas id="mplayer"></canvas>
   
9.         <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/12/15/354ddd17871b3b8749a5eb348f25898e.mp3" autoplay></audio>
   
10. </div>
    
11. 
    
12. <script>
    
13. (function() {
    
14.         ypData = [0,0,73,112,94,96,101,68,48,80,41,71,85,59,95,106,81,110,91,81,69,95,69,43,43,40,99,108,99,79,83,63,60,89,57,87,90,62,92,107,81,69,86,65,62,83,53,74,32,16,119,121,117,120,104,93,128,118,97,101,72,95,123,89,99,114,91,69,81,84,101,133,126,104,126,111,107,98,87,97,124,117,95,112,84,92,133,100,112,83,82,94,122,119,100,73,73,77,158,117,119,165,155,153,159,157,145,161,111,128,145,122,140,159,135,134,146,165,139,139,133,107,166,134,136,134,117,125,158,122,126,117,96,117,152,109,112,121,120,130,134,128,121,121,112,108,155,136,138,158,137,146,150,153,148,144,113,117,134,123,142,144,122,152,151,164,153,119,143,105,156,157,144,138,118,113,150,143,112,135,131,117,139,118,129,119,110,153,129,140,149,121,99,91,131,164,148,135,126,148,146,164,159,124,139,129,129,148,155,131,151,153,129,156,154,163,141,124,121,143,138,138,135,136,137,149,139,118,120,126,119,168,153,136,117,151,120,149,142,132,136,140,128,143,161,121,132,146,127,156,159,144,149,154,97,138,157,131,156,163,134,159,156,131,165,145,123,134,153,123,129,163,131,168,142,134,135,138,136,129,138,127,126,143,118,144,138,106,115,100,98,177,150,147,169,155,129,160,150,139,155,136,144,162,148,146,160,125,140,159,159,146,154,150,142,153,146,131,160,139,140,152,148,146,153,159,141,151,136,155,136,128,142,160,140,160,150,136,140,153,158,132,154,154,157,137,156,140,146,151,150,140,156,145,151,152,140,153,141,135,131,156,156,146,139,151,156,137,150,137,145,143,137,135,144,156,142,147,146,141,152,157,131,136,153,138,145,153,147,145,116,150,137,148,151,131,136,148,143,139,135,164,138,147,154,147,138,156,124,144,167,125,158,157,146,135,135,175,140,148,129,142,129,94,103,105,85,90,73,99,73,94,83,99,78,81,85,106,75,96,93,71,104,80,116,61,76,103,66,79,76,78,85,86,87,94,82,90,69,102,93,73,81,73,87,66,78,85,73,73,82,102,109,106,89,94,119,87,94,82,85,84,75,70,109,82,109,86,71,91,59,87,63,114,85,81,68,82,84,89,78,83,86,92,83,70,79,79,82,65,80,75,100,73,83,92,72,78,90,78,86,89,72,80,81,83,79,102,78,76,103,68,77,56,88,69,82,90,95,78,111,81,86,79,69,98,68,86,96,84,112,99,86,67,77,87,79,69,79,97,76,81,77,78,65,92,66,79,86,85,104,66,73,88,79,89,82,85,107,66,102,82,94,65,77,60,83,92,67,78,91,66,89,84,90,69,76,102,108,105,86,75,90,103,107,113,96,85,87,92,82,66,76,68,101,97,100,85,87,96,116,62,96,71,86,98,73,78,86,87,69,82,80,91,72,86,87,63,75,78,94,78,71,91,72,98,68,85,85,105,78,109,92,93,108,73,89,73,74,82,76,83,102,71,95,90,78,77,91,97,95,79,71,83,78,72,81,92,77,89,112,73,66,92,88,103,96,76,60,85,80,59,67,116,74,80,65,72,71,96,75,74,86,100,98,78,85,78,72,106,92,109,99,71,83,108,79,85,79,88,90,102,92,98,99,101,94,78,111,99,96,107,105,79,103,92,105,81,85,78,103,113,101,104,98,102,97,109,90,78,93,93,104,111,103,94,86,92,109,94,97,87,96,87,92,91,107,84,96,107,101,100,106,108,98,96,94,107,97,97,91,103,86,98,96,157,160,170,159,162,153,156,135,141,154,167,160,157,148,158,146,170,164,130,161,172,164,152,167,143,140,158,139,158,154,147,153,136,142,111,129,110,110,104,125,145,128,151,130,171,161,153,188,168,184,158,166,157,164,153,160,147,133,157,164,158,144,167,157,166,155,147,147,135,148,157,164,152,156,151,148,138,143,145,134,122,161,155,136,156,148,127,179,157,170,152,152,168,151,146,163,175,163,160,156,186,136,149,167,150,148,148,128,139,154,152,178,173,170,156,154,140,163,151,127,142,159,130,166,151,142,138,143,136,141,144,136,140,143,139,155,154,144,137,155,169,138,161,164,150,173,140,171,162,165,149,141,128,122,133,132,142,159,136,156,153,148,155,138,124,136,175,137,156,150,152,164,144,142,141,142,140,144,156,142,152,132,151,163,155,151,151,152,134,135,152,131,161,153,125,163,161,146,164,154,145,152,130,123,169,142,128,164,148,136,156,148,152,115,151,157,143,148,136,147,162,139,156,139,156,138,144,162,155,140,146,146,107,165,166,136,146,124,125,131,154,135,139,176,164,134,159,139,122,146,110,124,143,137,115,154,145,132,141,129,115,136,104,139,135,111,119,142,126,127,164,119,116,109,120,113,130,105,112,135,110,110,147,108,110,107,113,116,123,123,127,126,133,118,115,90,123,99,76,116,130,81,87,127,107,90,130,83,96,96,77,116,112,77,90,141,101,94,115,104,123,98,98,107,136,115,128,125,88,109,112,111,80,76,24,22,10,19,10,6,2,10,2,0,0,0];
    
15.         let total = 120,  idx = 0;
    
16.         let ctx = mplayer.getContext('2d');
    
17.         let w = mplayer.width = 400, h = mplayer.height = 100;
    
18.         let slice = w / total, vmax = Math.max.apply(null, ypData);
    
19.         aud.loop = false;
    
20.         ctx.strokeStyle = 'hsla(0, 80%, 90%, .66)';
    
21.         ctx.fillStyle = 'hsla(0, 70%, 95%, .75)';
    
22.         ctx.font = '14px sans-serif';
    
23.         ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
    
24.         ctx.shadowBlur = 1;
    
25.         ctx.shadowColor = '#000';
    
26.         ctx.fillText('play', 100, 50);
    
27.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
28.         aud.addEventListener('ended', () => { idx = 0; aud.play(); });
    
29.         aud.addEventListener('timeupdate', () => {
    
30.                 draw();
    
31.                 idx ++;
    
32.                 if(idx > ypData.length - 1) idx = 0;
    
33.         });
    
34. 
    
35.         let draw = () => {
    
36.                 let ar = Array(total).fill('0').map( (v,k) => Math.random() * (ypData[idx] * h / vmax));
    
37.                 ctx.clearRect(0,0,w,h);
    
38.                 ctx.beginPath();
    
39.                 Array.from({length: total}).forEach((v,k) => ctx.lineTo(slice*k, h - ar[k]));
    
40.                 ctx.stroke();
    
41.                 ctx.fillText(toMin(aud.currentTime) + ' / ' + toMin(aud.duration), 10, 30);
    
42.         }
    
43.         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;};
    
44. })();
    
45. </script>

复制代码

马黑黑

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

马黑黑

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

马黑黑

上班去了

红影

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

红影

漂亮，像是鹦鹉嘴里吐出来的，漂亮

红影

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

上班前这么点时间就能出新效果，黑黑厉害

梦油

这一大片代码把我给看晕了。

马黑黑

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

忽略它

马黑黑

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

一般般

马黑黑

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

有所同有所不同

马黑黑

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

还可以一看

侃大山

又一个新效果，好看

马黑黑

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

这个相对简单

梦油

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

原因就是因为我不懂。

辫子哥哥

看看很漂亮，但不是我的菜

马黑黑

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

好菜共享

马黑黑

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

不懂可以无视