画像・動画生成AI 2026.10.10 読了 4 分

音に合わせる動きは、解析せずフレーム数で合わせた

音を解析する仕組みもありますが、鳴る位置が分かっているなら数で決め打ちするほうが確実でした。

この記事の結論

音に合わせて動かすと、同じ動きでも印象が変わる。解析の仕組みを使う前に、もっと単純な方法で足りるか試した。

音は0.5秒ごと。30fpsなので15フレームごとに棒が跳ねる。音量を上げて確認してください

やったことは割り算だけ

30fpsの動画で、0.5秒ごとに音が鳴る。つまり15フレームごとだ。

const sinceBeat = frame % 15;

いま何フレーム目かを15で割った余りを見れば、直前の音から何フレーム経ったか分かる。余りが0のときがいちばん大きく、そこから小さくしていく。これだけで音と動きが合う。

音を読み込んで波形から拍を探す方法もある。既成の曲に合わせるならそれが要る。

しかし今回は音を自分で作っていて、鳴る位置が最初から分かっている。分かっているものを探し直すのは無駄だった。処理も増えるし、拍の検出を外すこともある。

最初、プレビューを見ながら手で位置を合わせた。6秒の動画では合っているように見えた。

ところが12本の棒を一周させると、最後のほうで明らかにずれた。1フレームのずれが積み重なるからだ。計算で出すようにしたら、何周してもずれなくなった。

音は手元で作った。1200Hzの短い音を0.04秒鳴らして、残りを無音で埋めて0.5秒にする。それを12回つなげて6秒にした。

既成の音源を使うと権利の確認が要るが、自分で作った音ならその心配がない。確認用の音としては十分だった。

音が鳴った瞬間に最大、そこから下がる。下がり方は直線ではなく、最初に速く落ちて最後はゆっくりにした。

直線で下げると機械的に見える。叩いたものが戻る動きは、最初が速い。実物の動き方に寄せると、音と合っている感じが強くなる。

12本すべてを毎回跳ねさせたら、画面全体が揺れて何も見えなくなった。

こうすると、どこで鳴ったかが目で追える。全部動かすと、どれも動いていないのと同じになる。

この動画は音を切っても成立するようにした。棒の動きと色だけで、拍の位置が分かる。

SNSもブログも、音を出さずに見る人のほうが多い。音は足すもので、頼るものではない。音がないと意味が分からない動画は、見られる機会そのものが減る。

音が入ると、書き出したファイルの中身を確認する手順が1つ増える。

見た目だけ確認して公開すると、音が入っていないことに後で気づく。書き出したあとに、音声が入っているかを機械的に確かめるようにした。目で見ても音の有無は分からない。

0.5秒ごとは1分間に120拍にあたる。テンポを変えるなら、フレーム数も一緒に計算し直す。

3つ目が問題で、30fpsでは割り切れないテンポがある。割り切れないテンポを選ぶと、どう書いても少しずつずれる。音を自分で作れるなら、割り切れるテンポにしてしまうのがいちばん簡単だった。

今回は使わなかったが、曲に合わせる場合の方針だけ決めておいた。

拍の位置を先に書き出して、配列で持っておく。その配列を見ながら動きを決める。曲を聞きながら手で合わせるのは、長い曲では現実的でない。

あわせて読む

操作説明は撮り直すより、画面の写真に注釈を重ねたほうが速い — 丸や吹き出しを座標で書くと、何度でも同じ位置に出せます。写真と注釈を一緒に動かすのが要点でした。
文字の出し方を4つ並べて、どれを使うか決めた — 持ち上げ・1文字ずつ・打ち込み・払い。同じ文字で4通り試して、使い分けの基準を決めました。
数字を読み上げるのをやめて、棒の長さにした — カテゴリ別の記事数をグラフにしました。数字を並べるより、長さの差にしたほうが一目で分かります。