2019プログラミング講座１４：サウンドのビジュアライズ

サウンドの再生

はじめに、サウンドの再生を実行します。サウンドを扱うためにminimというサウンドライブラリを用います。（ライブラリとは、processingなどプログラミング言語の開発環境に様々な機能を追加するプログラムの集まりのようなものだと理解するとよいでしょう。）また、今回はminimを使うためにprocessing バージョン２を使用しますので注意してください。

まず、processingを起動しておきます。次にフリーの音源データをインターネット上から探してデスクトップにダウンロードします。ダウンロードする音源データは必ずmp3形式を選んでください。ダウンロードした音源データの名称をtest.mp3と変更します。

次に、デスクトップにダウンロードした音源データをprocessingで扱えるように追加します。processingのメニューからSketchを選択し、Add File…を選びます。デスクトップから先ほどダウンロードした音源データを選択しopenボタンを押して追加します。

以下のコードを記述して実行ボタンを押すと音源データが再生されます。

import ddf.minim.*; //サウンドライブラリminimの読み込み
 
Minim sound; //minim型変数の宣言
AudioPlayer player;//サウンドデータ格納用変数の用意
 
void setup(){
  size(100, 100);
  sound = new Minim(this); //minim型変数の初期化
  player = sound.loadFile("test.mp3"); //サウンドデータの読み込み
  player.play(); //サウンドデータの再生
}
 
void draw(){
  background(0);
}
 
void stop(){ 
  player.close(); //サウンドデータの終了
  sound.stop(); //minimプログラムの停止
  super.stop(); //プログラムの停止
}

マウスクリックでサウンドを再生する

次にマウスをクリックすることでサウンドが再生されるプログラムを作成してみましょう。（新規でプログラムを作成する場合は、先ほどと同じようにあらかじめ音源データを追加しておきます。）

import ddf.minim.*;
 
Minim sound;
AudioPlayer player;
 
void setup(){
  size(100, 100);
  sound = new Minim(this);
  player = sound.loadFile("test.mp3");
}
 
void draw(){
  background(0);
}
 
void stop(){
  player.close();
  sound.stop();
  super.stop();
}
 
void mousePressed() { //マウスを押下したときに動作する関数
    player.play();
    player.rewind(); //サウンドデータの巻き戻し
}

音量の視覚化

サウンドの音量（ボリューム）とグラフィックスを関連づけてみましょう。

import ddf.minim.*;
 
Minim sound;
AudioPlayer player;
 
void setup(){
  size(400, 400);
  sound = new Minim(this);
  player = sound.loadFile("test.mp3");
}
 
void draw(){
  background(0);
  float d = player.mix.level() * 2000; //サウンドデータの音量を数値化して変数dに代入
  ellipse(width/2, height/2, d, d);
}
 
void stop(){
  player.close();
  sound.stop();
  super.stop();
}
 
void mousePressed() {
    player.play();
    player.rewind();
}

複数のサウンドを再生する

複数のサウンドをマウスクリックで再生するプログラムを作成します。２種類の音源（mp3データ）を用意して、それぞれ、test1.mp3、test2.mp3と名称変更します。２種類の音源データをprocessingに追加します。
準備ができたら、以下のコードを記述しましょう。

import ddf.minim.*;
 
Minim sound;
AudioPlayer player1, player2; //サウンドデータ格納用変数を２種類用意する
 
void setup(){
  size(800, 800);
  sound = new Minim(this);
　//下記で２種類のサウンドデータを読み込む
  player1 = sound.loadFile("test1.mp3"); 
  player2 = sound.loadFile("test2.mp3");
  fill(255); //オブジェクトの塗りの初期設定
}
 
void draw(){
  background(0);
  rect(50, 50, 100, 100);
  rect(200, 50, 100, 100);
  rect(350, 50, 100, 100);
  rect(500, 50, 100, 100);
  float d1 = player1.mix.level() * 2000;
  float d2 = player2.mix.level() * 2000;
  ellipse(width/2, height/2, d1, d1);
  ellipse(width/2, height/2, d2, d2);
}
 
void stop(){
  player1.close();
  player2.close();
  sound.stop();
  super.stop();
}

void mousePressed() {
 if (mouseX > 50 && mouseX < 150 && mouseY > 50 && mouseY < 150) { 
    player1.play(); 
    player1.rewind(); 
}
 if (mouseX > 200 && mouseX < 300 && mouseY > 50 && mouseY < 150) { 
    player1.pause(); 
    player1.rewind(); 
}
 if (mouseX > 350 && mouseX < 450 && mouseY > 50 && mouseY < 150) { 
    player2.play(); 
    player2.rewind(); 
}
 if (mouseX > 500 && mouseX < 600 && mouseY > 50 && mouseY < 150) {
    player2.pause();
    player2.rewind();
  }
}
 
void mouseReleased() {
  fill(255);
}

総合課題２：
上記のサウンド再生ソフトを改良し独自のデザインにする。
ただし以下の機能は全て必ず実装すること。
画面のサイズやボタンの配置は自由とする。
・サウンドデータを３種類以上用意し再生と停止ができるようにする。
・サウンドの音量で独自に用意した画像を変形させる。
・背景画像を用意し配置する。
・ボタンを画像に変更する。