Help us understand the problem. What is going on with this article?

Processingで音楽に連動する動画が簡単につくれた話

More than 3 years have passed since last update.

はじめに

音楽に合わせて動く動画を作りたいなあと思ったので調べていたところ、Processingで簡単にできてしまうことが分かったので試しに作ってみました。

Minimライブラリで音の取り込み

Minimライブラリを使って、音声シグナルを取込みます。取り込んだ波形シグナルを、FFT(高速フーリエ変換)クラスのメソッドを使って、周波数ごとのシグナルに変換します。

  Minim minim = new Minim(this);
  AudioPlayer player = minim.loadFile("music.mp3",512);

  // フーリエ変換のインスタンスを生成
  FFT fft = new FFT(player.bufferSize(), player.sampleRate());

  // FFTで波形から周波数のスペクトルに変換
  fft.forward(player.mix);
  // ステレオ音声の左右チャネルを分けたい場合は
  // fft.forward(player.left);
  // fft.forward(player.right);

  // スペクトルのサイズを取得
  int specSize =  fft.specSize();
 // i番目の周波数帯の音量を取得
  float volume = fft.getBand(int i);

FFTがしていることは、ざっくりと下のようなイメージです。音声を、音の高さ(周波数帯)ごとに分解して、音量(振幅)のスペクトルに変換しています。
FFT.png

音声シグナルに合わせて動くように描画

変換した音声シグナルに合わせて動くようにProcessingで描画すれば、簡単に連動する動画ができてしまいます。

Processingで動画作成~音楽に合わせてillumination pic.twitter.com/NfiGMhnWlV

— Dminor (@Dminor_) 2016年12月24日

Processingソースは下のように書くだけです!とっても簡単。

import ddf.minim.analysis.*;
import ddf.minim.*;

Minim minim;
AudioPlayer player;
PImage img;
FFT fft;
int specSize;
float volume;

void setup(){
  size(800, 600);

  minim = new Minim(this);
  player = minim.loadFile("music.mp3",512);
  // フーリエ変換のインスタンスを生成
  fft = new FFT(player.bufferSize(), player.sampleRate());
  player.play();
}

void draw(){
  background(0);
  stroke(#FFFFFF);
  img = loadImage("illumination_img.png");
  image(img, 0, 0, width, height);

  // FFTで波形から周波数のスペクトルに変換
  fft.forward(player.mix);
  specSize =  fft.specSize();

  for(int i = 0; i < specSize; i++){
    // イルミネーションを描画
    float h = map(i, 0, specSize, 0, 360);
    volume = fft.getBand(i);
    int ellipse_width = (int)((int)volume * (h/8));

    if(h >= 0 && h <= 360 && ellipse_width >=10){
      int x = (int)random(0,800);
      for(int w = ellipse_width; w > 0; w -= 2){
        fill(#FFFFFF,30);
        ellipse(x, h+510, w,w);
      }  
    }  

    // 周波数帯の最大値を画面幅にマッピング
    float w = map(i, 0, specSize, 0, width);
    // 各周波数帯の音量をlineとして描画
    line(w, height, w, height - volume * 5);      
  }
}


void stop(){
  player.close();
  minim.stop();
  super.stop();
}

終わりに

ProcessingのMinimライブラリを使えば、音楽に連動する動画が簡単につくれることが分かりました。Processingは、Processing.jsとしてjavascriptに移植されていて、HTML5と組み合わせることで、AdobeのAfter Effects上で気軽に扱えるようです(Processing for AE)。映画やテレビ番組の映像加工にも利用されるAfter Effectsと組み合わせることで、更にリッチな動画がつくれそうです。

参考サイト

http://yoppa.org/cuc_proga11/2961.html
http://tasoco.hatenablog.com/entry/2015/04/03/092912

future
ITを武器とした課題解決型のコンサルティングサービスを提供します
http://future-architect.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした