ProcessingでMacのマイク入力を扱う

こんなこと、やります。

ProcessingからMacのマイク入力アクセスへのセキュリティ許可設定
Processingでマイク入力に合わせた、さまざまなアニメーション
音声データの波形表示
FFTで周波数特性のリアルタイム表示

つかうもの
1. Processing
1. ProcessingのSoundライブラリのインストール
マイク入力アクセスへのセキュリティ許可設定
Processingでマイク入力を使ってみよう
1. やること
1. 作業
Processingでマイク入力を使ってみよう
1. マイク入力から音量を取得してみる
1. 音量に合わせて円を描くアニメーション
1. 音量に合わせて縦棒が伸びるアニメーション
1. ピークホールド付きアニメーション
1. マイク入力の波形を表示
1. FFTで周波数特性をリアルタイムで表示

つかうもの

この記事でつかうものを説明します。

Processing

Processingをまだお持ちでない方は、 Processing.org からインストールしてください。こちらでは、macOS上でProcessingバージョン3.4.5を動かしてます。 Processingでの図形描画などのやり方は説明いたしませんので、基礎的な技術は習得してください。

Processingをはじめよう

Amazonで見る楽天市場で見る

ArduinoとProcessingではじめるプロトタイピング入門

Amazonで見る楽天市場で見る

ProcessingのSoundライブラリのインストール

Processingでマイク入力を扱うために、Soundライブラリのインストールを行います。

Processingのメニューから「Sketch」→「Import Library」→「Add Library」へとすすみます。

そこで「sound」で検索し、「The Processing Foundation」のSoundライブラリをインストールします。

マイク入力アクセスへのセキュリティ許可設定

ProcessingからMacのマイク入力へアクセスできるように、セキュリティ許可設定をおこないます。

Processingでマイク入力を使ってみよう

macOSではデフォルトで、Processingから内蔵マイクへアクセスできません。Processingでマイク入力をつかえるように設定しましょう。

やること

Preferenceアプリで「Security & Privacy」→「Privacy」→「Microphone」を表示します。すると次のように、Processingの項目がありませんでした。

Processingをここへ追加するため、次の作業をおこないます。

作業

ターミナルからProcessingを実行します。

shell

$ /Applications/Processing.app/Contents/MacOS/Processing

AudioInを使ったプログラムを実行します。

すると、マイクへのアクセスを許可するアラートが表示されます。「OK」を押して許可します。

プライバシーにProcessingが追加され、Processingでマイク入力を扱えるようになりました。

以降、ターミナル経由でProcessingを立ち上げなくても大丈夫です。

さきほどの「マイク入力から音量を取得してみる」プログラムを再度実行して、マイク入力から音量を取得できるか試してみてください。

Processingでマイク入力を使ってみよう

それでは、macOSのマイク入力をProcessingで扱ってみましょう。

マイク入力から音量を取得してみる

まずは、マイク入力から音量を取得して、値を標準出力してみます。

ソースコード

pde

import processing.sound.*;

AudioIn in;
Amplitude amp;

void setup() {
  in = new AudioIn(this);
  in.start();

  amp = new Amplitude(this);
  amp.input(in);
}

void draw() {
  background(255);

  float a = amp.analyze();
  if(a > 0) {
    println(a);
  }

}

Macで音量が表示されない場合は、最初に説明したマイク入力アクセスへのセキュリティ許可設定が正しくできているかご確認ください。

音量に合わせて円を描くアニメーション

さきほど取得した音量にあわせて、円が大きくなるアニメーションを作ってみます。

ソースコード

pde

import processing.sound.*;

AudioIn in;
Amplitude amp;

void setup() {
  size(400, 300);
  strokeWeight(0);
  background(255);
  frameRate(90);
  
  in = new AudioIn(this);
  in.start();

  amp = new Amplitude(this);
  amp.input(in);
}

void draw() {
  background(255);

  float a = amp.analyze();
  fill(#ff6347);
  circle(width/2, height/2, 1000*a);

}

音量に合わせて縦棒が伸びるアニメーション

サウンドメーターとして一般的な、音量に合わせて縦棒が伸びるアニメーションを作ってみました。

ソースコード

pde

import processing.sound.*;

AudioIn in;
Amplitude amp;
float peakDetector;

void setup() {
  size(400, 300);
  strokeWeight(0);
  background(255);
  frameRate(90);
  
  in = new AudioIn(this);
  in.start();

  amp = new Amplitude(this);
  amp.input(in);
}

void draw() {
  background(255);

  float a = amp.analyze();
  displayBar(a);
}

void displayBar(float a) {
  background(255);
  fill(#00ced1);
  float h = 5000 * a;
  float w = 50;
  float marginBottom = 10;
  rect(width/2 - w/2, height - marginBottom - h, w, h);
}

ピークホールド付きアニメーション

さきほどのサウンドメータに、さらにピークホールドをつけてみました。ピークホールドとは、最大音量を一定時間保持するものです。

ソースコード

pde

import processing.sound.*;

AudioIn in;
Amplitude amp;
float peakDetector = 0;
int limitTime = 90;
int countTime = 0;

void setup() {
  size(400, 300);
  strokeWeight(0);
  background(255);
  frameRate(90);
  
  in = new AudioIn(this);
  in.start();

  amp = new Amplitude(this);
  amp.input(in);
}

void draw() {
  background(255);

  float a = amp.analyze();
  if(a > peakDetector && countTime <= limitTime) {
    peakDetector = a;
    countTime = 0;
  } else if (countTime > limitTime) {
    peakDetector = 0;
    countTime = 0;
  }
  countTime += 1;
  int alpha = (int) (255 * (1.0 - float(countTime) / float(limitTime)));
  //println(alpha);
  displayBar(a, peakDetector, alpha);
}

void displayBar(float a, float peak, float alpha) {
  background(255);
  noStroke();
  fill(208, 208, 208);
  float h = 800 * a;
  float w = 50;
  float marginBottom = 10;
  rect(width/2 - w/2, height - marginBottom - h, w, h);
  
  float peak_h = height - marginBottom - 800 * peak;
  fill(255, 102, 102, alpha);
  rect(width/2 - w/2, peak_h, w, 3);
  
}

マイク入力の波形を表示

オシロスコープのように、マイク入力の音声データの波形を描くアニメーションです。

ソースコード

pde

import processing.sound.*;

AudioIn in;
Amplitude amp;
Waveform waveform;

int samples = 1024;

void setup() {
  size(400, 300);
  strokeWeight(0);
  background(255);
  frameRate(90);
  
  in = new AudioIn(this);
  in.start();

  waveform = new Waveform(this, samples);
  waveform.input(in);
}

void draw() {
  background(255);
  stroke(0);
  strokeWeight(2);
  noFill();

  waveform.analyze();

  beginShape();
  for(int i = 0; i < samples; i++)
  {
    vertex(
      map(i, 0, samples, 0, width),
      map(waveform.data[i], -1, 1, 0, height)
    );
  }
  endShape();
}

サンプル数

samples変数では、一度に描くサンプル数を設定できます。

map関数

map関数は、数値を現在のスケールから別のスケールへ変換します。

cpp

map(変換したい数値, 現在の範囲の下限, 現在の範囲の上限, 変換後の範囲の下限, 変換後の範囲の上限)

FFTで周波数特性をリアルタイムで表示

FFTで周波数特性をリアルタイムで表示します。ただし、周波数はリニアスケールですので、音声データですと見づらいです。対数スケールに変換できればいいのですが、簡単にはいかなそうです。

ソースコード

pde

import processing.sound.*;

FFT fft;
AudioIn in;
int bands = 128;
float[] spectrum = new float[bands];

void setup() {
  size(400, 300);
  background(255);
    
  fft = new FFT(this, bands);
  in = new AudioIn(this, 0);
  
  in.start();
  
  fft.input(in);
}      

void draw() { 
  background(255);
  noStroke();
  fill(208, 208, 208);

  fft.analyze(spectrum);
  float bar_w = width / bands;
  float margin = 10;
  float start_h = height - margin;
  
  for(int i = 0; i < bands; i++){
    float bar_h = height * spectrum[i] * 10;
    rect(bar_w*i + margin, start_h, bar_w, -bar_h);
  } 
}

スポンサー広告