Processing摸索前行（9）-音頻可視化

原創

2020-02-21 11:57

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摸索前行的博客。