生成AI時代には、批評家こそがクリエイターになるべきなんじゃない？　そう考えて8GB MacBook NeoをいじってたらAI VJマシンができちゃった（CloseBox）

前回の記事では、オフィスに置きっぱなしにしているM2 MacBook Airを使い、ビジュアライザーに歌詞同期機能を追加した話を書きました。

「生成AIが、最初からなかったことにするみたいに 新しい世界を始めようとしている」　そんな感傷的な曲ができたから、Claude Codeで歌詞同期ビジュアライザーを作った（CloseBox） | テクノエッジ TechnoEdge

映画「ブレードランナー」のことを考えていました。ネタにしたから、というのもありますが。

https://www.techno-edge.net/article/2026/04/08/4979.html続きを読む »

Whisperで自動文字起こしして、LCS類似度ベースでアラインメントして、シーンキーワード辞書でビジュアルを切り替える、というところまで作り込んで、さらに改修しようとしたら、なぜかリモートアクセス不能に。また1時間かけて行くのもめんどくさい。

「これも欲しい」「これも追加したい」が止まらなくなって、気がついたらビジュアライザーを骨格から作り直していました。今回はその顛末です。

ビジュアライザーの出来としては満足したのですが、今回は別の曲のリリックビデオを作りたくて、そのためには手元で動かせるソフトが必要。じゃあ再びMacBook Neoに登場してもらおうということになりました。

前回は24GBの豊富なメモリを搭載したM2 MacBook Air。それと同等のことが前世代のiPhoneレベルのMacBook Neoでできるのか。

で、今回の曲のテーマですが、生成AIがプロンプトでさまざまなアート作品を作り出せる状況を考えると、その道の専門家であるアーティストだけでなく、いや、それ以上に、その分野の批評家がクリエイターになれるのではないか、という発想から来ました。

というのも、最近、音楽界隈では、生成AIをめぐるアーティスト、生成AI音楽愛好家、そして音楽批評家の間で議論が沸き起こっていて、自分であまりいじっていなさそうなのに、わりと浅い認識のまま論じている批評家がいるのを目にして「なんだかなあ」と思ったりしていました。

いやいや、むしろ今こそ言葉だけで理想の音楽を作っていけるSunoなんかの生成AIを使ってなんか作っちゃってくださいよぜひ、と思ってXに投稿したのがちょいとバズりました。

これをSunoのiPhoneアプリ版にそのまま与え、歌詞を仕上げてもらったら、けっこういい曲ができてしまったのです。

[Verse 1]
スクリーン越しに　流れる作品
指先ひとつで　世界を品評
早撃ちレビュー　いいねの渦
言葉は軽く　でも刺さるナイフ

「つまらないね」って　投げた一行
その裏側に　どんな景色見た？
切り捨てるより　切り取れるなら
その視点こそ　あんたのオリジナル

[Chorus]
批評家こそが　クリエイター
見抜く力は　生み出す力
言葉で描いた　その世界線
もう半分は　あんたの作品だろ？

批評家こそが　クリエイター
欠点探しが　設計図に変わる
語れるってことは　形にできるってことさ
ここからだろ？　出番だよ

[Verse 2]
「もし自分なら」って　脳内リメイク
エンディングを　勝手に書き換える
それ　ただの妄想で　終わらせるの？
それとも一歩　外に出してみる？

好きと嫌いの　境目のノート
びっしり埋めた　違和感のメモ
誰かの弱点　笑う代わりに
自分のスタイル　組み上げてける

[Bridge]
作れないから　語ってるんじゃない
語れるからこそ　作れるんじゃない？
言葉がここまで　分解できるなら
もう一度　組み立てるだけ

[Chorus]
批評家こそが　クリエイター
見抜く力は　生み出す力
言葉で描いた　その世界線
もう半分は　あんたの作品だろ？

批評家こそが　クリエイター
優れた目線は　鋭いペンになる
語れるってことは　形にできるってことさ
この時代に　間に合ったな (hey)

これを新しいビジュアライザーでリリックビデオにして公開したい。でも、手元に動くマシンがない。どうすれば？

記事を読み込ませて開発すればいいのでは。やってみなはれ。心の中のClaude Code翁がそう囁きました。

そうして出来上がったのがこのビデオ。

Suooが拡張してくれた歌詞がいいんですよね。ブリブリのシンセベースもスティービー・ワンダーっぽくて素敵。

さて、これにどうやって視覚効果をつけていこうか、という取り組みです。

サイドバーをスクロール対応に

まずはその前に、MacBook Neoにはすでにビジュアライザーが備わっているため、機能を追加していくと、左側のサイドバーがどんどん長くなっていきます。

Audio Source、Background、Stems、Visualization、Lyrics、Recording……。気がつくと一画面に収まらなくなって、サイドバー全体をスクロールしないと下のほうの設定にアクセスできない。でも、サイドバーをスクロールするとプレビュー動画も一緒に動いてしまって、再生中の確認ができない。

ありがちな失敗です。CSSの基礎を見直して、bodyとhtmlを高さ100%固定+ overflow: hidden に。サイドバーだけが独立してスクロールするようにして、右側のキャンバスは常に同じ位置に固定。WebKit用のスクロールバースタイルもダーク調に統一しました。

地味な修正ですが、これでサイドバーをスクロールしてもプレビューが見えたままになって、ようやく作業が捗るようになりました。ビジュアル制作ツールはプレビューが見えていないと話にならないですからね。

五線譜上に歌声のピッチを描く実験

これがやりたかった機能のひとつです。ボーカルの音高をリアルタイム検出して、五線譜上に音符として表示する。カラオケの音程ガイドみたいなやつです。

実装は意外と素直でした。WebAudioのAnalyserNodeから周波数データを取り出し、80～1000Hzの範囲で最大ピークを探し、放物線補間でサブビン精度に refine。MIDIノート番号への変換は `69 + 12 * log2(freq/440)` の一行で済みます。

問題はここから。最初は本物っぽくしようと、ト音記号、5本の譜線、E G B D F の音名ラベル、加線まで描画したんです。でも実際に動かしてみると、譜面が画面の主役を奪ってしまって、肝心のビジュアルエフェクトと喧嘩する。

それで全部消しました。譜線も、ト音記号も、ラベルも、時間スケールも。残ったのは「ピッチに応じた色相のグラデーションが、画面を右から左に流れていく」だけ。これがかえって良くて、他のシーンと重ねても干渉しない、純粋なピッチの軌跡だけが残る視覚化になりました。

沈黙区間の扱いと「次に繋げる」演出

ピッチ検出には沈黙区間が必ず出てきます。間奏、ブレス、楽器ソロ、無声子音。検出されない瞬間がしょっちゅう発生する。ここをどう扱うかで印象がガラッと変わります。

最初は「途切れたらそのまま」だったんですが、これだと点線がブツブツ途切れて美しくない。かといって、検出されない区間を直線で繋いでしまうと、嘘の音程を表示することになります。

検出フレームを「フレーズ」単位でグループ化。voiced（有声）が連続する区間がひとつのフレーズになります。各フレーズはそれぞれ独立したリボン状の曲線として描画。フレーズ内は midpoint quadratic 補間で滑らかに繋ぎ、ピッチに応じた色相と、時間経過に応じた透明度をブレンドします。

そして、フレーズとフレーズの間。ここは沈黙区間なので主たる線は描きません。代わりに、極細の点線アークを薄く描いて、前のフレーズの末尾から次のフレーズの先頭へとカーブで繋ぎます。`lineDashOffset` を時間でアニメーションさせることで、点線が「流れている」ように見える。

結果として、ピッチが途切れた区間でも視線が自然に次の登場ポイントへ誘導される、不思議と「継続性のある」ビジュアルになりました。これが個人的には今回一番気に入っている部分です。

Stylesと Scenes、全部 3D 化する

前回作ったビジュアライザーには Bars / Wave / Circle / Particles の4スタイルがありました。動いてはいたんですが、なんというか、どれも平面的で、20年前のWinampプラグインみたいな雰囲気だったんです（あれはあれで好きだったんですが）。

「3D化したい」と Claude Code に投げてみたら、思ったより本格的なものが返ってきました。まず共通の `anim3D(t)` というヘルパー関数を作って、Z軸回転、X軸ピッチ、Y軸ヨー、スケール脈動を時間ベースで生成するオシレータを定義。これをすべてのビジュアライザが共有することで、画面全体がひとつのカメラで揺れているような統一感を出します。

ピンホール透視投影の `project3D(x, y, z, cx, cy, focal)` も用意して、各ビジュアライザーは「ローカル3D座標を計算して投影関数に渡す」だけで疑似3Dになる構造にしました。

Bars: 各バーが独自のZ深度で前後に波打つ

64本×4ステムのバーが、それぞれ `sin(i * 0.2 + t * 1.5)` で前後に揺れます。yawとpitchがバー全体の傾きを変え、奥のバーは小さく薄く、手前のバーは大きく濃く描画されます。

Wave: 4本のリボンが3D空間でねじれる

各ステムが独立した深度を持つリボンとして浮遊し、X軸とY軸の回転を組み合わせて常時ねじれます。線幅も遠近で変動。

Circle: 同心円が独立した軸で回る円盤に

各リングが別々の `tiltX` `tiltY` を持って、回転する円盤のような楕円形になります。中央には脈動する放射グラデーションの球。

Particles: トンネルを抜けるパーティクルストリーム

画面奥（Z=-800）から手前（Z=+500）に流れてくる完全な3Dパーティクルシステム。600個までキャップして、画家アルゴリズムでZ順ソートして奥から描画します。

シーンも同じ流れで全部3D化しました。Synth Flashの同心円リング、Ink Printのインクドット、DTM Rollの落下するピアノロール、Vaporwaveの遠近グリッド、AI Binaryの0/1降下、Rainの雨筋。すべてが共通の `anim3D(t)` カメラで揺れます。

Vaporwaveのグリッドは特に気に入っています。本物の3D平面として描画していて、`scroll = (t * 220) % cellSize` でZ方向に流れてくる。よくあるレトロ未来的な「あの感じ」が素直に出せました。

歌詞も3D化、文字単位で3次元空間に飛ばす

スタイルとシーンが3D化したら、当然「歌詞も3Dにしたい」となります。

drawLyricsを書き換えて、歌詞テキストを `Array.from(seg.text)` でコードポイント単位に分割。各文字を独立した3Dオブジェクトとして配置します。

登場時には `entryZ` が `-260 → 0` まで変化して、画面奥から手前に飛び込んでくる。表示中は `breathZ = sin(t * 1.2) * 18` でゆっくり前後に呼吸する。退場時には `exitZ` が `220` まで動いて、後ろに引いていく。

文字ごとには Y方向の波 `sin(t * 4 + i * 0.5)` と Z方向の波 `sin(t * 2 + i * 0.35) * 12` が走るので、各文字が独立したリズムで揺れます。文字ごとの微小な Z軸ロール `sin(t * 2.5 + i * 0.3) * 0.06` も加えて、生命感を出します。

注意したのは「視認性を保つこと」です。スタイルやシーンの3D回転は派手にしましたが、歌詞だけは tilt量を 0.28 / 0.14 と控えめにしました。読めない歌詞ほど無意味なものはありません。

背景パッドだけは2Dで残して、文字平均のZでスケールするように。これで派手に動いても文字の背景に半透明黒が常にあり、どんなビジュアルの上に重ねても歌詞が読めます。

歌詞表示を派手にしたら新しい問題が出た話

さらに歌詞表示まわりを追い込みました。3D化はしたものの、あくまで「控えめな揺らぎ」だったんですよね。Z軸でゆっくり呼吸するくらいで、「派手」という感じではなかった。

もっとガンガン動かしたい。文字が画面外から飛び込んできたり、爆発するように散らばったり、極端に拡大されたりしてほしい。VJ的な歌詞演出が欲しいんです。

6種類のエフェクトモードを実装

drawLyricsを書き直して、エフェクトを切り替えられるようにしました。それぞれの特徴はこんな感じです。

それぞれのエフェクトは fxFn(i, n, lt, dur, intensity, vocal) という共通インタフェースで実装。文字インデックス、文字数、行内ローカル時刻、行の長さ、強度、ボーカル中域エネルギーを受け取って、{x, y, z, scale, rot, alpha} を返します。共通のレンダリングループはこの戻り値を透視投影して描画するだけ。新しいエフェクトを追加するときも fxFn を1つ書くだけで済みます。

Auto モードを選ぶと、行ごとに6種類からランダムで選ばれます。行の開始時刻をシードにした決定論的な乱数なので、同じ行を再生し直しても同じエフェクトに。

intensity スライダーは 0.3～3.0 の範囲で派手さを調節。0.3 でほぼ静止、1.0 で標準、1.5 で派手め、2.0以上で過激、3.0 でステージ演出レベル、という感じで段階的に効きます。

問題その1: 文字が重なって読めない

意気揚々と試したら、すぐ問題が出ました。intensity を上げるほど文字が派手に動くんですが、Explode や Zoom の最中に文字同士が重なって読めなくなる。

原因は単純です。エフェクトで文字を3倍に拡大しても、隣接する文字の中心位置は変わらないので、それぞれが3倍の大きさで描画されると物理的に重なってしまう。

修正は「文字位置を f.scale で広げる」こと。

const spread = Math.max(1, f.scale);
const lx = (restX * (1 - co)) * spread + f.x;
const ly = (restY * (1 - co)) * spread + f.y;

Math.max(1, f.scale) で「縮めはしないが、拡大には追従する」スプレッド係数を作ります。これで文字が3倍になれば中心間隔も3倍に広がり、物理的な重なりが解消されました。Typewriter のように一時的に scale 0 から始まるエフェクトも、max(1, ...) でクランプされて本来の rest 位置に戻ります。

問題その2: 拡大しすぎて画面からはみ出す

文字位置を広げる修正を入れたら、今度は画面幅をはみ出すケースが出てきました。長めの歌詞行を Explode したら、両端の文字が画面の外まで飛んでいく。

これは自動折り返しで対応しました。wrapTextToRows というヘルパーを作って、文字配列を最大幅に応じて複数行に分割します。スペースがあればそこで優先的に改行、なければ文字単位で強制改行。元の文字インデックス origIdx を保持しておくので、行をまたいでもエフェクト関数に渡される i は連番のままで、フライスルーやスパイラルの「文字ごとの位相」が崩れません。

折り返しの閾値はエフェクトの最大スケールから逆算します。

const explodeMaxScale = 0.2 + 1.98 * intensity;
const zoomMaxScale = 1 + 1.2 * intensity;
const maxFxScale = Math.max(1, explodeMaxScale, zoomMaxScale) * a.pulse;
const maxRowWidth = (w * 0.88) / maxFxScale;

Auto モードではどのエフェクトが選ばれるかわからないので、最も派手な Explode の最大スケールを基準に行幅を計算します。intensity 1.5 なら 1行あたり約335px、フォントサイズ48 で7文字程度で改行される。intensity を上げるほど早く改行されて、結果的にどの強度でも画面に収まる仕組みです。

縦方向は lineHeight = fontSize * 1.35 の間隔で行を積みます。3行以上になったら表示位置を少し上にずらして、画面下端からはみ出さないように。

問題その3: 1文字だけの孤立行ができてしまう

折り返しを実装したら、今度はタイポグラフィでお馴染みの問題が出てきました。長い歌詞行が3行に折り返されたとき、最終行が1文字だけ残ることがある。読みづらいし、何より見た目が悪い。

印刷組版でいう「ウィドウ/オーファン」の問題です。これも自動修正することにしました。

wrapTextToRows の末尾にポスト処理を追加。end→start の方向で走査して、意味のある文字が1個しかない行を見つけたら、前の行から最後の文字を引き継ぎます。

意味のある文字判定は半角スペースと全角スペースを除外。移動後の行幅が maxWidth の 110% を超えない範囲で実行します。少しオーバーするくらいは許容しないと、絶対に動かせない行ができてしまうので。

end→start の順で走査することで、前の行が新たに1文字になっても次のイテレーションで処理されます。カスケード対応です。

対称的に、先頭オーファン (1行目が1文字だけ) も start→end で走査して次の行から1文字引っ張ってくる処理も入れました。

歌詞表示まわりは「派手にする → 重なる → 改行する → 1文字残る → 統合する」という4段階の改修になりました。1つの欲望が新しい問題を生んで、それを解決するとまた次の問題が出てくる。もはやVJツールに片足突っ込んでいる状態です。

特に Explode と Zoom は intensity 2.0 あたりで本当に過激になります。歌詞全体が中央から爆発するように散らばって、ちょうど読めるあたりで集合する。Auto モードで AutoVJ と組み合わせると、行が変わるたびにエフェクトが切り替わって、Style と Scene まで自動切替されるので、もはや何が起きているのかわからない情報量になります。

読みやすさと派手さのバランスは難しいんですよね。今回はとりあえず「重ならない・はみ出さない・1文字残らない」の3つを確保したことで、intensity を上げても文字が機能として残っている、というラインは守れたと思います。

それでも?が行頭に来たりと、ちゃんとしたハイフォネーションルールを教えないといけないかなとか考えましたが、とりあえずこのままで。

もっと過激にしたい、けど読めないのは困る。そういう微妙な要求にひとつずつ応えていく作業でした。

AutoVJ、歌詞とビートに合わせてランダム切替

ここまで来るとビジュアルのバリエーションが豊富になってきて、手動で切り替えるのが追いつかなくなりました。

楽をしようと「自動でいい感じに切り替えてくれ」と AutoVJ機能を作りました。

切替判断のロジックはこうです。

歌詞がロードされている場合は、現在の歌詞行が変わったタイミングを監視。2～4行ごと（乱数）に切替を実行します。最低4秒の間隔は保持して、切り替えすぎないように。

歌詞がない場合は、ビート検出の出番。ドラムステムのスペクトラルフラックスからキックを検出し、直近16秒分のキック時刻の中央値間隔から BPM を推定します。8 or 16ビートごと（これも乱数）に切替を実行。ビートも歌詞もない場合は12～20秒のタイマーフォールバック。

`performAutoSwitch(reason)` が呼ばれると、StyleとSceneを両方ランダムに変更します。現在のものとは違うものを選ぶようにしてあるので、同じ画面が続くことはありません。

切替時には簡単なトランジション演出も入れました。`autoVJState.transition` が 1 → 0 に減衰する間、画面に半透明の白フラッシュ、上下から黒のレターボックスバー、中央にピンクのスキャンラインが走ります。約1秒で消えるんですが、これだけで「DJの切り替え」っぽさが出る。

Vキーでオン/オフ切替。聴き入っている間、この機能だけで延々と眺めていられます。

キーボードショートカットを QWERTY 中心に

再生中に手を動かすには、キーボードショートカットが命です。

最初は数字キー1～4でスタイル切替、Shift+1～6でシーン切替にしていたんですが、シーン切替は QWERTY 行に変更して Shift を不要にしました。

現在のショートカット一覧はこんな感じです。

動作中の画面上部に小さなトーストが表示されて、何に切り替わったか一瞬で分かるようにしてあります。VJ操作っぽくて気分が乗ります。

歌詞編集のワークフロー改善

リリックビデオのタイミングを記録するLRCの編集体験も大幅に改善しました。

Auto (Whisper) で文字起こしすると、結果が `[mm:ss.xx]text` 形式でそのままtextareaに書き戻されます。個別行のタイムスタンプを直接編集できる。Apply Lines で再パースして即反映。Export LRC で保存、Import LRC で別の音源にも流用。

LyricsセクションのtextAreaの上には、現在の再生時刻を表示する小窓があります。コピーボタン付き。一時停止中も100ms間隔で更新されるので、シーク後の位置が常に見える。

そして真打ちが「Shift+Enter で現在再生時刻のスタンプを挿入」機能。歌を聴きながら、歌詞を打ち込んで、行が変わる瞬間に Shift+Enter を押すと、その瞬間のタイムスタンプが新しい行として挿入されます。耳コピでLRCを作るのが一気に楽になりました。

ちなみに、`[Verse]` `[Chorus]` `[Bridge]` などのセクションマーカーは自動で除外されます。Whisperの認識結果にも、ユーザー入力にも、LRCインポートにも全部適用。歌詞以外のものをアラインメントの対象にしてはいけない、という原則です。

STEMS音量コントロールのバグを修正

以前のビジュアライザーを作ったときにステム分離をして、それぞれのパート別の音量調整ができるようしていたのですが、その音量スライダーが効かない、という問題が起きていました。

Direct Mode（ステム分離のHDemucsを通さずに直接再生するモード）では4つのstemスロットが同じオブジェクトをエイリアスしていたんです。Vocalsスライダーを動かしてもDrums/Bass/Otherも同時に変わってしまう。

修正としてMaster Volumeスライダーを追加し、すべてのアナライザーを `masterGain → destination` 経由で接続。さらに `audioMode` という状態を導入して、Direct Modeの時は個別stem行を半透明化して操作不可にし、Masterのみが効くようにしました。HDemucsで分離した後はラベルが「HDemucs (4 stems)」に変わって、各stemが独立して動きます。

モード表示バッジが Stems セクションの右上に出るので、今どちらのモードか一目で分かるようになっています。

ピッチ検出はステム分離後のVocalだけに

Staff スタイルのピッチ検出も、最初は混合音から検出していました。これだと楽器の倍音を拾ってしまって、ボーカルじゃない音が表示されることがあります。

修正は単純で、`audioMode === "separated"` を要求するようにしました。HDemucsで分離した後でないと Staff モードは動かない。直接再生モードで Staff を選ぶと「Pitch tracking needs Separate Stems」というメッセージが表示されます。

これでボーカルだけの周波数情報からピッチを検出できるようになって、精度が劇的に上がりました。HDemucsはこういう用途では本当に強い。

録画の自動停止

最後に細かい改善ですが、録画の終了を自動化しました。

これまでは Record Video ボタンを押して録画を開始したら、楽曲が終わっても自分で Stop を押さないといけなかった。MP4変換が始まらないので「あれ?」となります。

AudioBufferSourceNode の `onended` イベントで、再生が終端に達したことを検知。`stopPlayback()` を呼んだ直後に、`isRecording` フラグが立っていれば、600ms後に `stopRecording()` を自動的に呼ぶようにしました。600msの猶予は、最後の音声/映像フレームを MediaRecorder にフラッシュさせるためです。

録画開始 → 楽曲終了 → 自動的にMP4変換が走ってダウンロード、という流れになりました。完全に「ボタンひとつで録画完了」が成立しました。

機能のレイヤーが重なっていく感覚

今回の作業で、ビジュアライザーは前回から本当に別物になりました。歌詞も、ピッチも、シーンも、すべてが3D空間で動いていて、AutoVJ で勝手に切り替わって、録画ボタンを押せば最後まで撮ってくれる。

面白いのは、ひとつの機能を追加するたびに「次にこれが欲しい」という欲望が連鎖的に出てくることです。3D化したから歌詞も3Dにしたい。Auto検出があるから歌詞ベースだけじゃなくビートベースも欲しい。録画ボタンがあるから自動停止も欲しい。

Claude Codeに「これもやって」と投げるだけで実装が降ってくるので、欲望と実装のサイクルがすごく早く回ります。気がついたら週末がひとつ消えていて、ビジュアライザーだけは確実に進化していました。

もちろん、まだやりたいことはあります。AutoVJの切替アルゴリズムをもっと音楽性のあるものにしたい。Staffスタイルにビブラート検出を入れたい。シーンの種類を増やしたい。

これまでは他人が作ったソフトに文句ばかり言ってた編集者・ライターである筆者でもこんなソフトを作れるし、アイデア一発で曲もできます。優れた洞察や批判ができる、言葉という武器を持った批評家の皆さんなら、絶対にいい作品を生み出せると思うのです。

「批評家こそがクリエイター」「ユーザーこそがプログラマー」。そんな時代にぼくらはいるのです。

間に合ってよかったでしょ？

これで終わりにしようと思ったのですが、背景が真っ暗だなと思い、グラデーションを追加。Claude Codeが音に反応するようにしてくれました。いつまで経っても終わりませんな。こりゃ。

※この記事は、Claude Codeに実行させたビジュアライザー改修作業の記録を元に、筆者が修正・加筆したものです。