预览:

捕捉声卡输出:

实现音频可视化, 第一步就是获得音频采样, 这里我们选择使用计算机正在播放的音频作为采样源进行处理:

NAudio 中, 可以借助 WasapiLoopbackCapture 来进行捕捉:

WasapiLoopbackCapture cap = new WasapiLoopbackCapture();
cap.DataAvailable += (sender, e) => // 录制数据可用时触发此事件, 参数中包含音频数据
{
float[] allSamples = Enumerable // 提取数据中的采样
.Range(0, e.BytesRecorded / 4) // 除以四是因为, 缓冲区内每 4 个字节构成一个浮点数, 一个浮点数是一个采样
.Select(i => BitConverter.ToSingle(e.Buffer, i * 4)) // 转换为 float
.ToArray(); // 转换为数组
// 获取采样后, 在这里进行详细处理
}
cap.StartRecording(); // 开始录制

分离左右通道:

获取完采样后, 我们还需要对采样进行一点小处理, 因为捕获的数据是分通道的, 一般是左右声道:

// 设定我们已经将刚刚的采样保存到了变量 AllSamples 中, 类型为 float[]
int channelCount = cap.WaveFormat.Channels; // WasapiLoopbackCapture 的 WaveFormat 指定了当前声音的波形格式, 其中包含就通道数
float[][] channelSamples = Enumerable
.Range(0, channelCount)
.Select(channel => Enumerable
.Range(0, AllSamples.Length / channelCount)
.Select(i => AllSamples[channel + i * channelCount])
.ToArray())
.ToArray();

取通道平均值

将采样分为一个个通道的采样后, 我们可以将其合并, 取平均值, 以便于绘制:

// 设定我们已经将分开了的采样保存到了变量 ChannelSamples 中, 类型为 float[][]
// 例如通道数为2, 那么左声道的采样为 ChannelSamples[0], 右声道为 ChannelSamples[1]
float[] averageSamples = Enumerable
.Range(0, AllSamples.Length / channelCount)
.Select(index => Enumerable
.Range(0, channelCount)
.Select(channel => ChannelSamples[channel][index])
.Average())
.ToArray();

绘制时域图象:

处理刚刚的采样后, 你可以直接将其作为数据绘制到窗口中, 这即是时域图象, 这里使用最简单的折线绘制.

// 设定 g 为窗口的 Graphics 对象, windowHeight 为窗口的显示区域高度
// 设定通道采样平均值为 AverageSamples, 类型为 float[]
Point[] points = AverageSamples
.Select((v, i) => new Point(i, windowHeight - v))
.ToArray(); // 将数据转换为一个个的坐标点
g.DrawLines(Pens.Black, points); // 连接这些点, 画线

傅里叶变换:

NAudio 中还提供了快速傅里叶变换的方法, 通过傅里叶变换, 可以将时域数据转换为频域数据, 也就是我们所说的频谱

// 我们将对 AverageSamples 进行傅里叶变换, 得到一个复数数组

// 因为对于快速傅里叶变换算法, 需要数据长度为 2 的 n 次方, 这里进行
float log = Math.Ceiling(Math.Log(AverageSamples.Length, 2)); // 取对数并向上取整
int newLen = (int)Math.Pow(2, log); // 计算新长度
float[] filledSamples = new float[newLen];
Array.Copy(AverageSamples, filledSamples, AverageSamples.Length); // 拷贝到新数组
Complex[] complexSrc = filledSamples
.Select(v => new Complex(){ X = v }) // 将采样转换为复数
.ToArray();
FastFourierTransform(false, log, complexSrc); // 进行傅里叶变换 // 变换之后, complexSrc 则已经被处理过, 其中存储了频域信息

分析频域信息:

对于傅里叶变换的频域信息, 需要稍加处理才可以方便的使用, 首先是提取有用的信息:

// NAudio 的傅里叶变换结果中, 似乎不存在直流分量(这使我们的处理更加方便了), 但它也是有共轭什么的(也就是数据左右对称, 只有一半是有用的)
// 仍然使用刚刚的 complexSrc 作为变换结果, 它的类型是 Complex[] Complex[] halfData = complexSrc
.Take(complexSrc.Length / 2)
.ToArray(); // 一半的数据
float[] dftData = halfData
.Select(v => Math.Sqrt(v.X * v.X + v.Y * v.Y)) // 取复数的模
.ToArray(); // 将复数结果转换为我们所需要的频率幅度 // 其实, 到这里你完全可以把这些数据绘制到窗口上, 这已经算是频域图象了, 但是对于音乐可视化来讲, 某些频率的数据我们完全不需要
// 例如 10000Hz 的频率, 我们完全没必要去绘制它, 取 最小频率 ~ 2500Hz 足矣
// 对于变换结果, 每两个数据之间所差的频率计算公式为 采样率/采样数, 那么我们要取的个数也可以由 2500 / (采样率 / 采样数) 来得出
int count = 2500 / (cap.WaveFormat.SampleRate / filledSamples.Length);
float[] finalData = dftData.Take(count).ToArray();

绘制频域图象:

得到上面分析后的 finalData 后, 我们就可以直接绘制出来了, 这次使用柔和的曲线绘制

// 设定 g 为窗口的 Graphics 对象, height 为窗口高度
PointF[] points = finalData
.Select((v, i) => new PointF(i, height - v))
.ToArray();
g.DrawCurve(Pens.Purple, points); // Graphics 可以直接绘制曲线

更优的绘制:

上面的时域和频域图象, 我们都是一股脑的将数据的索引作为 X 坐标, 窗口高度减去数据值作为 Y 坐标, 有两个突出的问题:

  1. 数据可能无法填满窗口的宽度或者超出窗口的宽度范围
  2. 数据太大时, 也会导致绘制的线条超出窗口高度

第一个问题好解决, 直接使索引所占数据长度的百分比恰好等于 X 坐标相对于窗口宽度的百分比即可:

\[x = index \div dataLength * windowWidth
\]

对于第二个问题, 有两个解决方案, 一是直接为数据加权重, 例如统一乘 0.5, 使数据减小一节, 二就是套一个函数, 例如 log 函数, 毕竟 log 函数在较高自变量的情况下, 因变量的变化趋势越来越小, 我们只需要对这个 log 函数进行稍加处理, 就可以直接应用到数据变换数据上, 使其不超出窗口绘图区域

另外, 我们也可以平滑频谱显示(指动画变换), 它的原理大概是这样:

  1. 例如这次进行傅里叶变换的结果是: {0, 100, 50},

  2. 下一次傅里叶变换的结果是: {100, 0, 0},

  3. 可以得出, 增量为: {100, -100, -50},

    在更新变换结果时, 我们不再直接将新的结果替换旧的结果, 而是在旧的结果的基础上, 加上增量×权重

  4. 例如权重是 0.5 时, 那么实际增量是: {50, -50, -25},

  5. 那么实际新的值是: {50, 50, 25},

  6. 如果下一次变换的结果还是 {100, 0, 0}, 那我们再次从 {50, 50, 25} 向新值逼近, 权重仍然是 0.5, 那么实际增量是: {25, -25, -12.5},

注意到了吗? 这次的增量是上次增量的一半, 这正好是一个减速运动, 而且新值与旧值的差越大, 变化的就越快, 而它们会不断重合, 因而速度不断变慢, 形成减速运动的频谱图.

更多内容:

更多关于 NAudio 的使用, 可以看这篇文章: [C#] NAudio 的各种常见使用方式 播放 录制 转码 音频可视化

项目已开源:

关于本文章涉及的大部分内容, 均在 github.com/SlimeNull/AudioTest 仓库中的 Null.AudioVisualizer 项目中有写. (注释妥当了)


其实音频可视化我老早就想做了, 但是本人数学不是非常的好, 不过最后总算是坚持下来了, 弄出来了啊, 心情老激动了

求个赞, 求个评论~

[C#] 使用 NAudio 实现音频可视化的更多相关文章

  1. [C#] NAudio 库的各种常用使用方式: 播放 录制 转码 音频可视化

    概述 在 NAudio 中, 常用类型有 WaveIn, WaveOut, WaveStream, WaveFileWriter, WaveFileReader 以及接口: IWaveProvider ...

  2. HTML5音频可视化频谱跳动代码

    今天学习到用canvas来写  HTML5音频可视化频谱跳动代码  将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...

  3. 用webAudio和canvas实现音频可视化

    前两天遇到了要显示音频波形图的需求,因为时间紧,就直接用了wavesufer.js,这两天有空,就研究了一下怎么用webAudio实现音频的可视化. 大致流程是对音源进行解析,解析得到的数据是个频谱数 ...

  4. H5录音音频可视化-实时波形频谱绘制、频率直方图

    这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码,下面 ...

  5. vue解决音频可视化播放,使用wavesurfer.js

    vue解决音频可视化播放,使用wavesurfer.js 上效果:   1.安装wavesurfer  npm install wavesurfer.js 2.在页面导入 import WaveSur ...

  6. Web Audio API 实现音频可视化

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 一转眼就已经有三个月没写博客了,毕业季事情确实多,现在也终于完全毕业了,博客还是不能落下.偶尔还是要写一下. 玩HTML5的Audio A ...

  7. Web应用实例:音频可视化

    准备 语言:TypeScript 工具:Visual Studio Code 演示:Audio Visualiazer 小明告诉我,他希望打开一个网页,立即听到他喜欢的音乐,如果有视觉特效就更棒了. ...

  8. python 音频可视化

    代码整理好放在 github 上了: https://github.com/darkchii/visualize bilibili 演示视频:https://www.bilibili.com/vide ...

  9. win api 音频可视化

    暂时记录,改天有时间再完善...其实写好好久了,但以前的代码丢了,重新写一遍.. 原理和 python 的一样,获取输入设备,然后把数据读取到 buffer 中,在绘制出来. 这里要注意两点: 1. ...

随机推荐

  1. web实现时钟效果

    纯原生开发时钟效果,话不多说直接上代码. HTML标签部分 <div class="cricles">         <div class="poin ...

  2. Pyqt5学习笔记(一)

    Python已有的GUI框架: Tkinter(python内嵌的GUI环境,使用TCL实现,易学易用,方便简单创GUI自带无需安装,适用于Unix.Windows和Mac系统组,在Tk8.0的后续版 ...

  3. 让 Java 中 if else 更优雅的几个小技巧

    对于一个高级 crud 工程师‍而言,if else 是写代码时使用频率最高的关键词之一,然而有时过多的 if else 会让我们优雅的 crud 代码显得不那么优雅,并且感到脑壳疼

  4. 五个问题,三大策略,手把手教你定制App性能监控方案

    作者:友盟+U-APM团队 Why? 为什么要做应用性能监控? 首先,我们要知道应用性能监控具体指什么?以及目的: 监控是一套完整的"监视+报警"的系统.对于像我们这样的App开发 ...

  5. SSM-员工管理项目实战-CRUD-增删改查

    SSM-CRUD 一.项目简介 主界面演示 功能点 分页 数据校验 ajax Rest 风格的 URI 技术点 基础框架 - ssm(Spring + SpringMVC + MyBatis) 数据库 ...

  6. springboot的拦截器报错plicationFilterChain.java:193) ~[tomcat-embed-core-9.0.36.jar:9.0.36]

    解决方案: spingboot的拦截器"index.html"少"/",太粗心了

  7. 轻松理解 Java 静态代理/动态代理

    目录 什么是代理模式 定义 代理模式的主要角色 优点 缺点 静态代理 动态代理 JDK原生动态代理 例子 分析 小结 CGLIB动态代理 例子 分析 final类型 其他方案 尾声 理解Java动态代 ...

  8. 封装一个处理 react 异常的最简 ErrorBoundary 组件 🎅

    前言 从 React 16 开始,引入了 Error Boundaries 概念,它可以捕获它的子组件中产生的错误,记录错误日志,并展示降级内容,具体 官网地址. 错误边界避免一个组件错误导致整个页面 ...

  9. OO UNIT 2 个人总结

    第二单元面向对象作业--性感电梯在线吃人 Part 1:单部可捎带电梯 多线程设计策略 本次电梯仅仅只有一部运行,因此,在多线程的设计中难度不大,并且,只需采用一对一的生产者-消费者模型即可解决问题. ...

  10. Leedcode算法专题训练(栈和队列)

    1. 用栈实现队列 232. Implement Queue using Stacks (Easy) Leetcode / 力扣 class MyQueue { Stack<Integer> ...