2025-06-25
Featured image of the post
開発ログ DTM

p5.jsでMIDIビジュアライザを自作

お疲れ様です，Massです．

最近，深夜の2時間DTMの映像用に作ったMIDIビジュアライザについて簡単に書きます．

このビジュアライザは，音声ファイル（WAV） と 演奏情報ファイル（MIDI） の2つを読み込んで，音楽に同期した映像をリアルタイムに生成します．

基本的な仕組みは以下の図の通りです． 

graph TD
    subgraph 入力
        A[WAVファイル（曲の音源ファイル）]
        B[MIDIファイル（曲の演奏ファイル）]
    end

    subgraph ビジュアライザ
        C{音楽と映像を同期}
    end

    subgraph 出力
        D[映像付きで音楽を再生]
        E[動画として保存]
    end

    A --> C
    B --> C
    C --> D
    C --> E

ビジュアライザが生成する表現は，主に以下の2種類を実装しています．

ノート・ビジュアライザ

ピアノやギターなどの音程を持つ楽器のMIDIノートを，線で描画する．
発音タイミングで線が現れ，音価（音の長さ）に応じて伸びていく．

リズム・ビジュアライザ

ドラムやパーカッションのリズムに合わせて，対応する画像が一定時間表示される．
現在はGM音源のドラムマップを設定している．

カスタマイズ

また，カスタマイズ用の設定を様々用意しています．

Image in a image block

  • 表示の調整: 背景色，ノートの表示領域・サイズ，プログレスバーの表示領域・サイズなどを，スライダーで変更可能．
  • 表示パートの選択: MIDIファイル内の複数の楽器パート（トラック）から，どれを映像に反映させるかをチェックボックスで個別に選択可能．
  • 動きの演出: ノートのアニメーションの緩急（イージング）を，準備してあるイージング関数から選択可能．
  • 録画機能: 映像を再生と同時に録画して，動画ファイル（.webm形式）として保存可能．

簡単な使い方ガイド

このビジュアライザの基本的な操作手順は，以下の通りです． 

graph LR
    A[ファイル準備 WAVとMIDI] --> B[ファイル読み込み]
    B --> C{表示カスタマイズ}
    C --> D[再生と録画]
    subgraph オプション
        C -- 録画する場合 --> E[録画チェックON]
        E --> D
    end
    D --> F[完成]
1: ファイルの準備

映像にしたい曲のWAV形式の音声ファイルと，MID形式のMIDIファイルを用意．
DAWからそのまま書き出したものを使う．

2: ファイルの読み込み

画面左上の「Load WAV」「Load MIDI」ボタンから，用意したファイルをそれぞれ読み込む．両方のファイルが正常に認識されると，再生ボタンがアクティブになる．

3. 表示のカスタマイズ
Image in a image block

再生の前に，各種設定を調整する．

  • 楽器パートの選択: 画面に表示されるトラックリストの中から，描画したいパートのチェックボックスを有効にする．
    • (notes) は，メロディを線で表示するノート・ビジュアライザに対応．
    • (rhythm) は，リズムに合わせて画像を表示するリズム・ビジュアライザに対応．
  • 表示の調整: 画面に配置されたスライダーで，各種パラメータを調整．
    • 背景色: H, S, Lのスライダーで，背景の色相・彩度・明度を変更．
    • 描画領域: "Region"関連のスライダーで，ノートが表示される領域の位置（X, Y）や大きさ（W, H）を調整．
    • プログレスバー: "Bar"関連のスライダーで，画面右下の進捗バーの位置や大きさを変更．
  • イージング関数の選択: ドロップダウンメニューから，イージング関数を選ぶ．
4. 再生と録画

設定が完了したら，再生を開始する．

  • 再生: Playボタンを押すと，音楽と共にビジュアライゼーションが始まる．再生中は設定UIが非表示になる．もう一度ボタンを押すと停止．
  • 録画: 映像を保存する場合は，再生前にRecordチェックボックスを有効にする．再生が終了した後，録画された動画ファイルが自動的にダウンロードされる．
開発ログ DTM