生成AIが表現の世界を再定義し、クリエイティブな可能性を無限に広げつつある現代。そんな中で、一人の開発者が自作の感傷的な楽曲「雨の中の涙のように」のために、Anthropicの生成AI「Claude Code」とM2 MacBook Airを駆使し、歌詞同期ビジュアライザーを開発しました。このプロジェクトは単なるツール作成に留まらず、その過程で直面した技術的課題、特に歌詞と音声の正確な同期の難しさと、それを乗り越えた知見が、今後のローカルAI開発やクリエイティブワークに示唆を与えるものとして注目されています。
本記事では、この革新的なビジュアライザーの開発背景から、具体的な技術的アプローチ、そして歌詞同期という深遠な課題にどのように立ち向かったのかを詳細に解説します。限られたリソースの中で高度なAI処理をローカルで完結させる手法は、多くのクリエイターやエンジニアにとって貴重な情報となるでしょう。
「雨の中の涙のように」：表現の変遷を歌う楽曲
このビジュアライザー開発の出発点となったのは、映画「ブレードランナー」の象徴的なモノローグ「Tears in Rain」にインスパイアされた楽曲「雨の中の涙のように」です。開発者は、生成AIが世の中を席巻する中で、自身が長年見てきた表現の道具たちの記憶が蘇ったと語ります。
シンセサイザーの最初の閃光、活版印刷の衰退、写植の終焉、DTPの勃興、コンピューターミュージックの胎動、Director、Flash、そしてiPhoneの到来。これらの表現の器が時代とともに移り変わり、最後には闇の中へ沈んでいくという感傷的なテーマが歌詞に込められています。ChatGPTとの対話を通じてこの詩が生まれ、その後、AI音楽生成サービスSunoによってフォーク・バラードとして楽曲化されました。
Sunoのバグから生まれた自作ビジュアライザーの必要性
楽曲が完成したものの、Sunoのリリックビデオ機能には歌詞がまともに表示されないバグがあり、歌詞と音楽を同期させて見せるという本来の目的が達成できませんでした。この問題に直面した開発者は、「じゃあ自分で作るか」と決意。自身のM2 MacBook Air（24GBユニファイドメモリ）に常駐する自作エージェンティックAI「mazzaim2air」を基盤として、ビジュアライザー機能の実装に着手しました。
この開発は、以前から取り組んでいた「8GBメモリの限界に挑戦」シリーズの番外編とも言えるもので、3倍のメモリを持つMacBook Airで、より高度なAI処理をローカルで完結させる試みとなりました。
ビジュアライザーの要件と技術スタック
開発されたビジュアライザーには、以下のシンプルな要件が設定されました。
- WAV/MP3ファイルの読み込みと再生
- 波形に合わせたビジュアル表現
- ボーカル、ドラム、ベースにそれぞれ独特なリアクション
- 歌詞の時刻同期表示
- 歌詞の内容に合わせたビジュアルシーンの変化
- 最終的なMP4形式での書き出しとSNS投稿
これらの要件を満たすため、Claude Codeの力を借りて、FastAPIとVanilla JSを組み合わせた構成が採用されました。フロントエンドはCanvas一枚で全てを描画するブラウザ完結型で、Apple Silicon M2 MacBook Airでも余裕で60fpsの描画性能を実現しています。最近のブラウザのCanvas描画性能の高さが、この高速化に大きく貢献しました。
リアルタイム描画を支える帯域分離とシーン変化
ボーカル、ドラム、ベースといった個別の音源に反応するビジュアルを実現するため、正攻法であるステム分離ではなく、WebAudioのAnalyserNode（FFT 2048）を用いた周波数帯域分離という「ズル」が採用されました。
- 20-250 Hz → bass（キックドラム、ベース、低音）
- 250-3000 Hz → vocal（ボーカルの中心帯）
- 3000-12000 Hz → high（シンバル、シビランス、高域シンセ）
これにより、bassはリングの脈動、vocalは文字のグロウ、highはグリッチエフェクトに割り当てられ、音楽に合わせた「それっぽい」反応がリアルタイムで生成されます。ドラムのオンセット検出にはスペクトラルフラックスが用いられ、パーティクル爆発などのエフェクトをトリガーしています。
さらに、歌詞の内容に合わせてビジュアルシーンが変化する機能も実装されました。歌詞に含まれる「シンセ・閃光」「活版・印刷」「DTP・DTM」「Director・Flash・iPhone」「AI・生成」「雨・涙・闇」といったキーワードに対応するビジュアルが用意され、現在再生中の歌詞行とキーワード辞書を照合することで、ダイナミックなシーン切り替えを実現しています。
歌詞同期の深淵：4つの技術的課題と解決策
ビジュアライザーの核となる歌詞同期機能の実装は、想像以上に困難な道のりでした。開発者は4つの大きな「罠」に直面し、そのたびに実装を書き直すことになります。
第1の罠：素朴なスライディング窓マッチの破綻
最初に試みられたのは、Whisperの単語タイムスタンプを文字単位に展開し、ユーザー歌詞の各行を窓スライドさせて類似度を測るという素朴なマッチング方法でした。しかし、この方法は長い歌詞行で破綻。Whisperが1文字でも聞き間違えると、全体スコアがずれ、隣の行のマッチに引っ張られて連鎖的に同期が遅れてしまう問題が発生しました。
第2の罠：Needleman-Wunschによる詰め込み問題
全体最適化が必要だと判断し、バイオインフォマティクスでお馴染みのNeedleman-Wunschアルゴリズムを導入。ユーザー文字列とWhisper文字列を一気にアラインメントする手法に切り替えました。しかし、今度はスコアリングの偏りにより、Whisperが歌の一部を聞き取れていない区間にユーザー歌詞を無理やり詰め込んでしまう「詰め込み」問題が発生。ギャップコストを対称に調整し、マッチした文字の比率が30%未満なら採用しないという閾値を設けることで、この問題は解消されました。
第3の罠：Whisper単語タイムスタンプの限界
文字レベルでは綺麗にアラインできていても、歌唱や持続音の多いフォーク・バラードでは、Whisperが返す単語ごとのタイムスタンプが不自然に詰まることが判明しました。ここで開発者は、単語単位ではなく、Whisperのセグメント単位（自然なフレーズ単位）のstart/end時刻の方が、「実際に歌い始めた瞬間」に近いことに気づきます。各ユーザー行に対してLCS（最長共通部分列）ベースの文字類似度でWhisperのセグメントテキストをマッチさせる方式に切り替えることで、より自然な同期が可能になりました。
第4の罠：Whisperの取りこぼしへの対処
最後の課題は、Whisperが特定の歌詞行を完全に認識できないケースでした。例えば、「Flashの栄光を見た」という行がWhisperの出力から抜け落ちてしまうと、残っていたNeedleman-Wunschのフォールバックが、類似する文字（例：「の」）に偽マッチを作り、不自然な同期を引き起こしていました。この問題に対し、開発者はNeedleman-Wunschフォールバックを完全に外し、Whisperが認識できなかった行は、無理にマッチさせず、前後のアンカー間で正直に線形補間する方針を採用。これにより、フォーク・バラードの自然な歌い回しに収まる、より正確な同期が実現しました。
これらの試行錯誤を経て、最終的な歌詞同期パイプラインは以下のようになりました。
- Demucs (htdemucs) で楽曲からボーカルだけを分離
- faster-whisper (small, int8 CPU) でボーカル音源を日本語ASR、ワード/セグメント単位のタイムスタンプつきで書き起こし
- ユーザー歌詞とWhisperの書き起こしテキストの文字類似度マッチで各行に開始時刻を割り当て
- マッチできなかった行は前後のアンカー間で線形補間
- LRC形式で出力
このパイプラインは、MacBook AirのM2チップ上でint8量子化推論を回すことで、約2分30秒の楽曲を約80秒で処理できる高速性を実現しています。
ローカル完結型MP4書き出しの実現
歌詞同期が確立されたビジュアライザーは、最終的にMP4形式で書き出し、SNSに投稿できる必要があります。このため、クライアント側でCanvasをcaptureStream(30)でキャプチャし、Audio GraphをMediaStreamAudioDestinationNodeで分岐、MediaRecorderで録画する構成が採用されました。
SafariはMP4ネイティブ録画に対応しているためそのまま出力可能ですが、ChromeやFirefoxはWebMしか出力できないため、WebMをサーバーにPOSTし、ffmpegでlibx264 + aac + faststartに再エンコードする経路を別途用意。これにより、「楽曲ロード → 歌詞アライン → 再生 → MP4書き出し → Xに投稿」という一連のワークフローが、全てM2 MacBook Airのローカル環境だけで完結するようになりました。
ローカルAI開発の可能性とクリエイターへの示唆
このプロジェクトは、M2 MacBook Airという限られたリソース（24GBメモリ）の中で、ステム分離、日本語ASR、文字列アラインメント、MP4変換といった高度な処理を全てローカルで完結させた点で、非常に大きな意義を持ちます。Apple Siliconの性能と、int8量子化のような最適化技術、そして開発者の泥臭い試行錯誤が組み合わさることで、APIキーに依存しない、高度なクリエイティブワークが個人の手元で実現できることを証明しました。
特に、歌詞同期の課題解決の過程で得られた教訓は、今後のAI開発全般にも通じるものがあります。
- テキスト類似度マッチの堅牢性： 正解データと対象データがある場合、文字レベルの動的計画法よりもテキスト類似度マッチが誤マッチを減らす。
- 「分からない」と正直に伝える価値： モデルが取りこぼした入力に対して無理に「それっぽい答えを合成する」のではなく、素直に「分からない」と言わせて前後から補間する方が、結果的に正確性が高まる。これはLLMのハルシネーション抑制にも通じる考え方です。
- セグメント単位のタイムスタンプの優位性： ASRモデルにおいて、単語単位よりもセグメント単位のタイムスタンプの方が、歌唱やフレーズのタイミング精度が高い。
これらの知見は、生成AIを単なる「魔法の箱」として使うだけでなく、その内部の挙動を理解し、自らの手でカスタマイズしていくことの重要性を示しています。既存ツールの限界をAIと自作で乗り越えるアプローチは、多くのクリエイターにとって新たな表現の扉を開く可能性を秘めていると言えるでしょう。
こんな人におすすめ
- ローカルAI開発に興味があり、限られたリソースでの最適化手法を学びたいエンジニア。
- 生成AIを活用した新しい表現方法や、既存ツールのカスタマイズに挑戦したいクリエイター。
- 音声認識や自然言語処理におけるテキスト同期の技術的課題とその解決策に関心がある研究者。
- Apple Silicon搭載MacでのAI活用事例を探しているユーザー。
まとめ：ローカルAIが拓く創造のサイクル
生成AIが急速に進化する時代において、自作の感傷的な楽曲のために、Claude CodeとM2 MacBook Airを駆使して歌詞同期ビジュアライザーを開発したこのプロジェクトは、個人の創造性と技術的探求心が融合した好例です。歌詞同期という一見シンプルな課題の裏に潜む複雑な技術的罠を乗り越え、最終的に全てのプロセスをローカル環境で完結させたことは、今後のローカルAI活用の可能性を大きく広げるものです。
「いつかぜんぶ消えていくとしても、そのあいだに自分の手で作ったものは、たぶんちゃんと残ります」という開発者の言葉は、デジタル時代における創造物の価値と、技術を通じて自己表現を追求する意義を深く問いかけます。生成AIが提供する「それっぽい」結果に満足せず、細部にこだわり、自らの手で理想を追求する姿勢こそが、真に価値あるクリエイティブを生み出す原動力となるでしょう。この事例は、AIが個人の創造性をどこまで高められるか、そしてその過程でどのような技術的挑戦が待ち受けているのかを示す、貴重な道標となるはずです。
情報元：techno-edge.net