Processing摸索前行（9）-音频可视化

processing的优势在于数据可视化，那么利用它来做音频可视化想必也是许多学习processing小伙伴的一种目标，在processing中并没有提供自带的库文件来实现，都是通过第三方的库文件来实现的。最常见的有Sound \Beads\Minim三种，具体用法要参见他们的库文件说明（这些都在官网上有，我不一一列出来）。
这里，我们以为例来实现一个简单的音乐可视化界面。我们大体分为以下几步来实现：
1、播放一个音乐文件（MP3）；
2、获取其音频取值
3、通过图形显示音频值的变化
4、分类音频中的（中高低三种音频）并在图形中分别动态显示
好了，任务明确了，我们来开始第一步:

一、播放一个音乐文件（MP3）
1、sound方式
最简单的方式就是用sound库文件来实现，代码如下：

import processing.sound.*;
SoundFile file;
void setup()
{size(500,200);
background(255);
file=new SoundFile(this,"super star.mp3");
file.play();}
void draw()
{}

非常简单，就只是初始化一个SoundFile对象即可。

2、Minim方式

import ddf.minim.*;Minim minim;
AudioPlayer player;void setup() {size(500,200); minim = new Minim(this);player = minim.loadFile("2005010623271461.mp3");player.play();}void draw() {}

实际调用我们发现，第二种方式的调用速度更快。

二、获取音值
上面的步骤完成为我们这步奠定必要的基础，否则我们就没有信号源了。

import processing.sound.*;
SoundFile file;
Amplitude amp;
AudioIn in;
void setup()
{size(640,360);
background(255);file=new SoundFile(this,"super star.mp3");amp = new Amplitude(this);in = new AudioIn(this);in.start();amp.input(in);file.play();}
void draw()
{println(amp.analyze());
}

我们在最上面的代码基础上增加了两个对象 Amplitude 和AudioIn，这样，我们就可以通过Amplitude的analyze方法获取音值并输出。如下：

其中AudioIn负责从声卡获取声音流，然后通过Amplitude.input来接过声音流，最后用Amplitude .analyze分析出单个的音值点数据。

三、可视化图像的绘制
有了上面两步的基础，其实稍有processing基础的就可以完成图形输出了（不了解基础的可以参看前面的processing博文）。
下面是绘图的代码：

import processing.sound.*;
SoundFile file;
Amplitude amp;
AudioIn in;
float mval;
void setup()
{size(640,360);
background(255);file=new SoundFile(this,"super star.mp3");amp = new Amplitude(this);in = new AudioIn(this);in.start();amp.input(in);file.play();}
void draw()
{fill(255,255,255);noStroke();rect(0,70,10,160); for(int i=0;i<this.width/10;i++){delay(1);mval=amp.analyze();noStroke();fill(255,255,255);rect((i+1)*10,70,10,160); stroke(255,255,255);fill(255,0,0);rect(i*10,250-mval*100000,10,50+mval*100000); println(mval);}}

大致效果如下：

看起来使用analyze方法基本实现了目标，当然，我们如果感兴趣可以继续将上述代码进一步精细化，时间更精细的效果。我们知道，声音包含振幅和频率两个基本因素，而在录制信号的时候还涉及到采样率。实际上，上面的图形仅仅对振幅（也就是声音强度）进行了显示。完整的声音波表，应该是有频率及对应的声音强度组成的图形。我们后面继续探索声音波表的完整图形绘制，请感兴趣的童鞋继续关注后续的processing摸索前行的博客。

Processing摸索前行（9）-音频可视化相关推荐

processing摸索前行（01）
注:本系列教程适合于有一定编程经验的同道阅读参考,如果您还从未接触过编程(尤其偏艺术类的同学)可能需要补习一下基本的编程基础.本系列教程不会对编程基础做过多的讲解和引导,着重在processing的结 ...
android pcm频谱_Android音频可视化
本文作者:熊鋆洋 (网易云音乐大前端团队) 前言音频可视化,顾名思义就是将声音以视觉的方式呈现出来.如何将音频信号绘制出来?如何将声音的变化在视觉上清晰的表现出来,让视觉和听觉上的感受一致?这些在 ...
傅里叶变换音频可视化_Web Audio在音频可视化中的应用
Web Audio在音频可视化中的应用本文有两个关键词:音频可视化和Web Audio.前者是实践,后者是其背后的技术支持. Web Audio 是很大的知识点,本文会将重点放在如何获取音频数据这块 ...
傅里叶变换音频可视化_快速上手网易云音乐可视化
作者:Sanpeier https://juejin.im/post/5dd88289e51d4523564243da 什么是音频可视化音频可视化,顾名思义,就是通过获取音频的波形.频率和其他来自音 ...
傅里叶变换音频可视化_HTML5如何实现音频可视化频谱跳动
本篇教程探讨了HTML5如何实现音频可视化频谱跳动,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> HTML5音频可视化频谱跳动代码 * { ...
html频谱跳动效果,HTML5音频可视化频谱跳动代码
HTML5音频可视化频谱跳动代码 *{ margin:0; padding:0; } #canvas { display: block; background: linear-gradient(135 ...
前端如何查看音频的长度_Android音频可视化
本文作者:熊鋆洋 (网易云音乐大前端团队) 前言音频可视化,顾名思义就是将声音以视觉的方式呈现出来.如何将音频信号绘制出来?如何将声音的变化在视觉上清晰的表现出来,让视觉和听觉上的感受一致?这些在 ...
傅里叶变换音频可视化_H5录音音频可视化-实时波形频谱绘制、频率直方图
这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码,下面 ...
20X01 FCPX插件音频可视化视觉特效 PFS Fcpx Audio Effector
20X01 FCPX插件音频可视化视觉特效 PFS Fcpx Audio Effector [插件简介] FCPX 音频可视化工具 FCPX: Audio Effector 可直接在FCPX软件中 ...

Processing摸索前行（9）-音频可视化

Processing摸索前行（9）-音频可视化相关推荐

最新文章

热门文章