java音频频谱_H5录音音频可视化-实时波形频谱绘制、频率直方图

这篇博客介绍了如何使用纯JS实现H5音频的实时波形和频率直方图可视化,包括Java音频频谱的移植可能性。内容涉及FFT算法、非线性与线性频段划分,以及三种不同类型的音频可视化效果。
摘要由CSDN通过智能技术生成

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

15b2487e167e33fe4ac9179a13118ff4.png

上面这些波形、频率的计算和显示都是由纯js代码编写的,并未用到浏览器专有特性,因此可以方便的移植到其他语言实现,比如移植到Android、IOS原生实现。

FrequencyHistogramView音频可视化频率直方图显示

此功能源码:frequency.histogram.view.js + lib.fft.js 12kb大小源码,音频可视化频率直方图显示;外观为上面Gif图最后一行,可通过参数配置绘制成不同的外观。

此扩展核心算法参考Java开源库jmp123的代码编写的,jmp123版本0.3;直方图我特意优化主要显示0-5khz语音部分,其他高频显示区域较小,不适合用来展示音乐频谱。

要获得PCM频率信息,需要将PCM由时域转换成频域,这里就用到了FFT算法快速傅里叶变换,里面水很深我就没有深入研究了,这里直接用的jmp123里面的FFT实现,纯js代码实现100行不到。我们只管使用就ok了,假设有44100hz采样率的16位PCM数据,取1024个采样数据经过FFT变换后,会输出512个频率信息点

使用jdk16编译 import java.awt.Graphics; import java.awt.GridLayout; import java.io.File; import javax.sound.sampled.AudioFormat; import javax.sound.sampled.AudioInputStream; import javax.sound.sampled.AudioSystem; import javax.sound.sampled.DataLine; import javax.sound.sampled.SourceDataLine; import javax.swing.GroupLayout; import javax.swing.JFrame; /** * */ /** * @author Administrator * */ public class Musicline extends JFrame implements Runnable { private byte[] audioData = null; private int intBytes = 0; private byte[] ml = new byte[1]; private int[] drawl = null; /** Creates new form Musicline */ public Musicline() { initComponents(); Graphics g; g = this.getGraphics(); } public void paint(Graphics g) { g.clearRect(0, 0, 900, 900); // System.out.print(drawl.length); if (audioData != null) { drawl = new int[audioData.length]; for (int i = 0; i < audioData.length; i++) { ml[0] = audioData[i]; // String s=new String(ml); drawl[i] = Math.abs((int) ml[0]); } System.out.println(drawl[0]); for (int i = 0; i < drawl.length - 1; i++) { g.drawLine(i * this.getWidth() / 256, drawl[i] + 100, (i + 1) * this.getWidth() / 256, drawl[i + 1] + 100); } } } /* * (non-Javadoc) * * @see java.lang.Runnable#run() */ public void run() { // TODO Auto-generated method stub while (intBytes != -1) { try { synchronized (this) { this.wait(10); } } catch (InterruptedException ex) { ex.printStackTrace(); } repaint(); } } public void play() { try { AudioInputStream ais = AudioSystem.getAudioInputStream(new File( "F:/perl/key2.wav"));// 获得音频输入流 ais = AudioSystem.getAudioInputStream( AudioFormat.Encoding.PCM_SIGNED, ais); AudioFormat baseFormat = ais.getFormat();// 指定声音流中特定数据安排 System.out.println("baseFormat=" + baseFormat); DataLine.Info info = new DataLine.Info(SourceDataLine.class, baseFormat); System.out.println("info=" + info);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值