测试：音频可视化（续）

马黑黑

心如止水

马黑黑

代码

1. <style>
   
2. #papa { margin: auto; position: relative; width: 96%; height: 520px; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
   
3. #tit { position: absolute; left: 0; top: 0; padding: 10px 16px; font: bold 2em sans-serif; color: lightgreen; text-shadow: 1px 2px 4px #000; transition: color .5s; }
   
4. #tit:hover { color: green; }
   
5. </style>
   
6. 
   
7. <div id="papa">
   
8.         <span id="tit">心如止水</span>
   
9. </div>
   
10. <audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1668786727519986.mp3" autoplay loop crossorigin="anonymous"></audio>
    
11. 
    
12. <script>
    
13. (function() {
    
14.         (function(mkPlayer) {let defaults = { player_css: 'left: calc(50% - 100px); bottom: 0;',playerCode: '<canvas id="mplayer" height="200" width="200" style="position: absolute; cursor: pointer;"></canvas>',};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;let ballSize = data.size;mplayer.style.cssText += data.player_css;let context = new AudioContext;let source = context.createMediaElementSource(aud);let analyser = context.createAnalyser();source.connect(analyser);analyser.connect(context.destination);let output = new Uint8Array(361);let length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;let output2 = new Uint8Array(length);let cxt = mplayer.getContext("2d");(function draw() {let ppColor = cxt.createLinearGradient(0,0,mplayer.width-100,mplayer.height);ppColor.addColorStop(0, 'hsl(180,100%,50%)');ppColor.addColorStop(0.8, 'hsl(120,100%,45%)');ppColor.addColorStop(1, 'hsl(60,90%,35%)');analyser.getByteFrequencyData(output);cxt.clearRect(0, 0, mplayer.width, mplayer.height);for (j = 0; j < output.length; j++) {let value = output[j] / 10;cxt.strokeStyle = value > 20 ? "darkgreen" : "green";cxt.beginPath();cxt.lineWidth = 1;cxt.moveTo(100, 100);cxt.lineTo(Math.cos((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100, (- Math.sin((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100));cxt.stroke();cxt.beginPath();cxt.lineWidth = 1;cxt.moveTo(100, 100);cxt.lineTo((Math.sin((j * 0.5) / 180 * Math.PI) * (60 + value) + 100), -Math.cos((j * 0.5) / 180 * Math.PI) * (60 + value) + 100);cxt.stroke();}cxt.beginPath();cxt.lineWidth = 1;cxt.arc(100, 100, 60, 0, 2 * Math.PI, false);cxt.fillStyle = ppColor;cxt.stroke();cxt.fill();analyser.getByteTimeDomainData(output2);let height = 100, width = 120;cxt.beginPath();cxt.strokeStyle = "green";for (j = 0; j < width; j++) {cxt.lineTo(j + 40, 100 - (height / 2 * (output2[output2.length * j / width | 0] / 256 - 0.5)));}cxt.stroke();requestAnimationFrame(draw);})();mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
    
15.         HCPlayer({});
    
16. })();
    
17. </script>

复制代码

红影

哇，这个漂亮。开饭了，等吃完来学习

红影

这次记得鼠标去划拉一下，嗯，字体颜色变了

红影

仔细看了，没看懂。里面有好多数学公式，什么正玄余弦的，不知道派什么用途的

红影

外围的短线太密了，如果稀疏点是不是更好？

马黑黑

红影 发表于 2022-12-4 19:05
外围的短线太密了，如果稀疏点是不是更好？

试过，太细的话，像中年男子

马黑黑

红影 发表于 2022-12-4 19:05
仔细看了，没看懂。里面有好多数学公式，什么正玄余弦的，不知道派什么用途的

画线用的，需要角度，很多线按一定角度排列起来，就形成了环圈外环的变幻；“心电图”样式的波状动态图也用到正弦余弦函数。

红影

马黑黑 发表于 2022-12-4 19:10
试过，太细的话，像中年男子

哈哈，这比喻，看得笑喷

红影

马黑黑 发表于 2022-12-4 19:44
画线用的，需要角度，很多线按一定角度排列起来，就形成了环圈外环的变幻；“心电图”样式的波状动态图也 ...

嗯嗯，那心电图的形状特别好看

马黑黑

红影 发表于 2022-12-4 20:00
嗯嗯，那心电图的形状特别好看

波状示意图挺好的

马黑黑

红影 发表于 2022-12-4 19:59
哈哈，这比喻，看得笑喷

需要疏一点的话，在第一个 for 语句里加个条件：

for(....) {
    if(j % 2 === 0) {
        /* 原来的完整代码
    }
}

如果觉得还太紧密，2 改为 3

小辣椒

黑黑这个是新产品

小辣椒

昨天那个我小圆球修改了尺寸，但看见这个我又想做这个了。。。。

马黑黑

小辣椒 发表于 2022-12-4 21:04
黑黑这个是新产品

晚上好

马黑黑

小辣椒 发表于 2022-12-4 21:05
昨天那个我小圆球修改了尺寸，但看见这个我又想做这个了。。。。

见异思迁

小辣椒

这个频谱好漂亮的，小巧精致，我要做个合适的图图

马黑黑

小辣椒 发表于 2022-12-4 21:06
这个频谱好漂亮的，小巧精致，我要做个合适的图图

支持

红影

马黑黑 发表于 2022-12-4 20:43
波状示意图挺好的

是的，特别好看。