【Processing】音量を可視化する

Processing

こんにちは。Evening Music Records株式会社でインターンをさせて頂いている鶴留です。

音量を可視化する

今回は、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の冒頭2行のmap関数を使って-25~-50に対応させています。700より大きい場合は-50一定です。ちなみになんでマイナスにしたのかといいますと、ただ単に用意した音楽の音量が大きかったからです。

今回は以上になります。

音楽情報バイラルメディアEVENING:https://evening-mashup.com/
※ インターンシップの詳細はこちらから:https://evening-mashup.com/home/music-intern 
※ 就職活動に関する情報はこちらから: https://evening-mashup.com/evening-job 

コメント

タイトルとURLをコピーしました