VOICEVOXからずんだもん動画(字幕と口パク立ち絵)を出力してくれる君つくった
『ずんだもん』などの音声を生成することができることで有名なソフトVOICEVOX
このVOICEVOXにテキスト打ち込んで流し込めば、自動で字幕動画とキャラの口パク立ち絵動画を作ってくれる環境をremotionで構築してみました
VOICEVOXのプロジェクトファイル(*.vvproj)を読み込ませれば自動で字幕動画と立ち絵動画が簡単に作れます
字幕レイヤー
立ち絵レイヤー１
立ち絵レイヤー２
あとは背景と資料スライドを重ねて合成すればよくある解説動画になります
リポジトリはこちら
VOICEVOXとは
無料でつかえる合成音声ソフトウェア
キャラを選んでテキスト打ち込めばお喋りできます
WebAPIも充実していて、プログラムフレンドリー
remotionとは
reactで動画を作れるツールです
画面内の要素をコンポーネントとして定義して、パラメータで制御できます
コードで動画を作る＝自動化やAIとも相性が良いです
今回作ったもの・使い方
で、今回作ったのがこれ
使い方。
-
VOICEVOXにトークを打ち込む
まずはVOICEVOXにトークを打ち込みます
ずんだもんと四国めたんで会話を作ればサンプルの設定をそのまま使い回せます
もちろん設定ファイルを変えれば他の組み合わせでもOK -
プロジェクトファイルを所定の場所に置く
VOICEVOXで『プロジェクトを名前をつけて保存』すると
*.vvprojファイルができあがります
とりあえずサンプルの設定で動かしたい場合は以下の名前で配置してください
public/sample/sample.vvproj
設定ファイルをいじればプロジェクト名や場所は変更可能です -
wavファイルを置く
VOICEVOXで『音声を繋げて書き出し』をするとwavファイルができるので、それを
public/sample/sample.wav
で保存します
この場所も設定ファイルで書き換えられます -
remotion studioを立ち上げる
npm run studio
http://localhost:3000/からアクセスできます
- 動画をエクスポート
左側のCompositionsから以下の3種類の動画を選ぶことができます
- 字幕とすべてのキャラが表示される動画(音声付き)
- 字幕だけが表示される動画
- キャラクターがセリフを喋ってる時だけ口パクする立ち絵動画
Renderボタンを押すと動画が生成できます
背景は透明なので、お好きな背景や資料と合成してお使いください
カスタマイズ
設定ファイルをいじれば色々カスタマイズできるようになっています
画像の差し替え
リポジトリにはサンプルとして雑なずんだもんの絵が同梱されています
これではあんまりなので、坂本アヒルさんのずんだもん立ち絵素材で置き換えて使うことを想定しています。Youtubeでよく見るあのずんだもんです。サンプル画像は坂本アヒルの画像と解像度をぴったり合わせています
坂本アヒルさんのずんだもん立ち絵素材はpsd形式です
これをPSDToolというWebアプリケーションに読み込ませれば表情のバリエーション画像を出力することができます
キャラの差し替え
config.jsonを修正すればキャラを差し替えることができます
人数も1人喋り、2人喋り、3人でも4人でも何人でもOKです
座標もサイズも調整できます
字幕のカスタマイズ
キャラごとに字幕の色をカスタマイズ可能です
フォントはCSSを適用して好きなフォントが適用できます
技術解説・苦労したポイント
*.vvprojファイル
VOICEVOXのプロジェクトファイルの中身はjson形式だったのでかなり使いやすかったです
こんな感じで1文字ごとに細かく時間や読みが入っています
"moras": [
{
"text": "ズ",
"vowel": "u",
"vowelLength": 0.11318320780992508,
"pitch": 5.773038387298584,
"consonant": "z",
"consonantLength": 0.12722793221473694
},
{
"text": "ン",
"vowel": "N",
"vowelLength": 0.09306203573942184,
"pitch": 6.108947277069092
},
{
"text": "ダ",
"vowel": "a",
"vowelLength": 0.09372273832559586,
"pitch": 6.09743070602417,
"consonant": "d",
"consonantLength": 0.042498137801885605
},
設定が複雑になるので今回は実装を見送りましたが、vowel情報も保持しているので、やろうと思えば「あいうえお・ん」の口の形を細かくアニメーションに反映できそうです
"text": "ズ",
"vowel": "u",
発話タイミング
一番苦労したのはここですね...
発話時間 = (prePhonemeLength
+ Σ(アクセント句)
+ Σ(各 mora の consonantLength + vowelLength)
+ (pauseMora があればその vowelLength * pauseLengthScale)
+ postPhonemeLength)
/ speedScale
だいたいこんな感じで発話時間を計算できるんですが、ぴったりこれでうまく算出できる音声と微妙にズレが生じる音声があり、かなり悩みました
このズレの原因は疑問文で、VOICEVOXで「疑問文を自動調整」の設定がONで文中に「？」があると0.15秒追加される仕様がありました
透過動画
このツールは字幕や立ち絵を重ね合わせて使う想定なんですが、普通に動画を出力すると透過になってくれず、出力形式を工夫する必要がありました
webmが透過に対応していたので最初はwebmで出力しようしたのですが、DaVinci ResolveがWebMの読み込みに対応していなかったのでmov形式に落ち着きました
こんな感じの設定です
Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva444p10le");
Config.setCodec("prores");
Config.setProResProfile("4444");
アニメーション
最初CSSでキャラクターのアニメーションを指定していたのですが、これはremotionにおけるアンチパターンでした
remotionは動画のフレームを並列して生成する都合上、CSSアニメーションが動画に綺麗に反映されません
remotionではこんな感じでアニメーションを指定する必要があります
import { useCurrentFrame } from "remotion";
export const FadeIn = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: 'clamp',
});
return (
<div style={{ opacity }}>Hello World!</div>
);
};
remotionをインストールするときにskillsのインストールも進められるので、skillsを入れてAIにそれを読み込ませるとこういった間違いを防げます
感想
自分はソフトウェアエンジニアで動画制作は初心者なので、動画制作は完全にアウェイだと思っていたのですが、プログラムから扱いやすいVOICEVOXとコードで動画を作るremotionの組み合わせは動画制作を『ホーム戦』にしてくれるようなポテンシャルを感じました
remotionはコードで動画を作るのでAIとも相性が良く、かといってSora等で作ったような『いかにもAI』な動画にならずに済むので「こういうのでいいんだよ」な選択肢だなと思います
おまけ
別リポジトリでVOICEVOXの歌唱データから音階にあわせてずんだもんがピョコピョコするやつも作ってみました
Discussion