音楽ビジュアライザーの使い方 — 7種類の波形を透過WebMで書き出す

登場人物

リナ社長 … 高校生なのに会社経営するやり手ギャル。テックにも強くてAI活用が得意。

タクヤ … 入社3年目の男性社員。真面目で少しだけコードが書ける。

「音に合わせて動く飾り、ブラウザだけで作れるよ」

タクヤ「社長、ツールに『音楽ビジュアライザー』が増えてますね。これ何ができるんですか？」

リナ社長「音に合わせて動くアニメーションを”動画素材”として書き出せるやつ。配信画面の飾りとか、SNS動画のワンポイントに重ねて使う想定。しかも全部ブラウザ内で完結するから、読み込んだ曲がサーバーに送られることもないよ」

タクヤ「アップロード不要なんですね。それは安心」

リナ社長「書き出しは背景を透過できるWebMだから、映像の上にそのまま重ねられるのが強み」

タクヤ「最初にモードを選ぶんですよね。『ループ(音声なし)』と『音楽連動』」

リナ社長「ループモードは曲なしで、先頭と末尾がぴったり繋がるシームレスなループ動画を作る。BPMを指定すると拍に合わせて脈動して、尺は拍数の整数倍に自動スナップされるから、何回繰り返しても継ぎ目が出ない」

タクヤ「音楽連動モードは？」

リナ社長「読み込んだ曲の波形と周波数を解析して、その曲に完全同期した動きになる。編集ソフトで同じ曲を同じ位置に置けば、ほんとに音と一致した映像になるよ」

タクヤ「種類、けっこう増えましたね」

リナ社長「今は7つ。バー(イコライザー)、波形ウェーブ、円形・リング、ラジアル・スペクトラム、バースト、パーティクル、心電図。ラジアルは中心円のまわりに放射状のバーが並ぶやつで、バーストは中心の点が拍ごとに破裂して波紋が広がる演出」

タクヤ「心電図って、あのピッてやつですか」

リナ社長「そう。光のヘッドが掃引しながら鼓動の波形を描いて、後ろに残光がフェードする心電図モニター風。ネオンっぽい色にするとかっこよくなる」

タクヤ「設定が左にずらっと並んでて、最初ちょっと迷いました」

リナ社長「よく触るのは本数・感度・太さ・グロー・配色あたりかな。色はカラー1→カラー2のグラデーションでつくよ」

タクヤ「『グロー』って光のにじみですよね。書き出した動画だと、プレビューより線が太くて縁取りが付いて見えたんですけど」

リナ社長「それね。プレビューは画面に合わせて縮小表示されてるけど、書き出しは指定解像度の原寸なの。線の太さもグローのにじみも解像度に比例するから、原寸だとその分くっきり大きく見える。線をシャープにしたいときはグローを0にするといいよ」

タクヤ「なるほど、バグじゃなくて表示サイズの差だったんですね」

タクヤ「『左右/上下ミラー』とか『拍の強さ』っていうのもありますね」

リナ社長「ミラーは描画を対称にコピーするやつ。バーや波形が上下対称になって、ぐっと”作品”っぽくなる。『拍の強さ』はループモードで、拍ごとにどれだけ強く脈動させるかの調整。0でおとなしく、上げるほどビートが効いた動きになるよ」

タクヤ「『感度』との違いは何ですか？」

リナ社長「感度は動き全体の振れ幅の倍率。拍の強さは”拍のメリハリ”だけを足すイメージかな。両方いじって好みのノリに合わせればいいよ」

リナ社長「あとは解像度とFPSを決めて『WebMで書き出し』を押すだけ。録画が走って、終わると自動でダウンロードされる」

タクヤ「透過WebMって、たまに再生できないことがあって」

リナ社長「透過WebMの生成・再生はChrome系ブラウザ推奨。Safariは透過に対応してないから、その場合は背景色を付けて書き出すか、別ブラウザを使ってね」

タクヤ「ツールページから誰でも使えるんですよね。今度の動画で試してみます」

リナ社長「うん、いろんな波形があるから触ってみて〜」