Processing記事： 音量を可視化する

音量を可視化する

今回は、Minimライブラリを使って取り込んだ音楽の音量を取得し、ビジュアルに反映するプログラムを作成してきます。
音楽データは、スケッチ＞スケッチフォルダーを開く＞data（ファイルがない方は、「data」という名前の新規ファイルを作る）の中に音楽ファイルを取り込んでください。
もしくは、プログラムを書くエディタ上にドラックすればOKです。

実際に作る！

以下のような、スピーカーをイメージしたものを作りました。ざっくり説明しますと、左右の音量に合わせて四つの円が拡大・縮小します。また、真ん中のつまみで音量の調節もできます。

以下、コードになります。

import ddf.minim.*;

Minim minim;
AudioPlayer player;

void setup()
{
 size( 1000, 800);
 minim=new Minim(this);
 player=minim.loadFile("sample.wav");
 player.loop();
}

void draw()
{

 float volume = map(mouseY, 350, 700, -25, -50);
 float sound_size = map(volume, -25, -30, 1.04, 1 );

 background(0);

 //ボリュームつまみの溝
 stroke(255);
 strokeWeight(5);
 line(width/2, 350, width/2, 700);
 line(width/2-10, 350, width/2+10, 350);
 line(width/2-10, 700, width/2+10, 700);

 //スピーカー
 fill(128, 200, 0);
 stroke(128, 200, 0);
 line(300, 250, 345, 295);
 line(300, 750, 345, 705);
 line(345, 295, 345, 705);
 line(700, 250, 655, 295);
 line(700, 750, 655, 705);
 line(655, 295, 655, 705);
 noStroke();
 rectMode(CORNER);
 rect(50, 250, 250, 500);
 rect(700, 250, 250, 500);

 //マウス位置によってボリュームつまみと曲の音量が変わる
 if (350<mouseY && mouseY<700) {
   rectMode(CENTER);
   rect(width/2, mouseY, 50, 70);//ボリュームつまみ
   player.setGain(volume) ;
 }
 if (mouseY<350) {
   rectMode(CENTER);
   rect(width/2, 350, 50, 70);//ボリュームつまみ
   player . setGain(-25) ;
 }
 if (mouseY>700) {
   rectMode(CENTER);
   rect(width/2, 700, 50, 70);//ボリュームつまみ
   player . setGain(-50) ;
 }

 //音量の可視化
 float radiusL=player.left.level() * 650 * sound_size;//左側の音量
 float radiusR=player.right.level() * 650 * sound_size;//右側の音量
 stroke(0);
 strokeWeight(2);
 fill(128, 200, 0, 200);
 ellipse(175, 625, radiusL, radiusL);
 ellipse(825, 625, radiusR, radiusR);
 ellipse(175, 400, radiusL/1.5, radiusL/1.5);
 ellipse(825, 400, radiusR/1.5, radiusR/1.5);
}

player.left.level()で取り込んだ音楽ファイルの左側の音量、player.right.level()で右側の音量を取得できます。今回は、左側の円二つに左の音量を、右側の円二つに右の音量を対応させています。player.left.level()、player.right.level()に良い感じに数字を掛けた変数を作り、ellipseの半径に当たるパラメータに入れました。

また、player.setGain()で音量を調節することが出来ます。()内はfloatの値です。今回は、mouseYの位置によって音量が変わるようにし、ミキサーのつまみのようなデザインにしました。mouseYの位置が350より小さい時は-25、350～700の間はdrawの冒頭２行のmap関数を使って-25～-50に対応させています。700より大きい場合は-50一定です。ちなみになんでマイナスにしたのかといいますと、ただ単に用意した音楽の音量が大きかったからです。

今回は以上になります。

---

音楽情報バイラルメディアEVENING： https://evening-mashup.com/