動画とサウンド

メディアを Clip に乗せるためのコンポーネント群。Studio では普通の HTML5 メディアで再生されるが、 書き出し時は別ルート（WebSocket + Canvas）でデコードされる。

<Video>

動画を音声付きで配置する。Studio では <video>、 書き出し時は WebSocket + Canvas で再生されるので、Studio とレンダラで 違う挙動になる場合がある（特に filter 系の合成）。

import { Video } from "../src/lib/video/video"

<Video video="assets/demo.mp4" />

切り出し（trim）

フレーム単位で部分再生できる。

<Video
  video="assets/demo.mp4"
  trim={{ from: 30, duration: 120 }}
/>

波形表示

Studio タイムラインの波形は60秒未満なら自動で表示される。 長尺で出したい時だけ showWaveform を明示する。

<Video video="assets/long.mp4" showWaveform />

Clip との関係

<Clip> の duration を省略すると、Video の長さがそのまま採用される。

<Clip label="Demo"> {/* duration は Video から自動取得 */}
  <Video video="assets/demo.mp4" />
</Clip>

<Img>

画像コンポーネント。レンダラがフレームを撮る前にデコード完了を待つのが 普通の <img> との違い。書き出し時にチラつかない。

import { Img } from "../src/lib/image"

<Img src="assets/intro.png" />

video_length

動画の長さ（フレーム）をその場で取りたい時の関数。

const length = video_length({ path: "assets/demo.mp4" })

<Sound>

Studio で再生しながら、書き出し後の動画にも音を埋め込む。

import { Sound } from "../src/lib/sound/sound"

<Sound sound="assets/music.mp3" trim={{ trimStart: 30 }} />

波形表示の挙動は <Video> と同じ（60秒未満で自動）。

<Sound sound="assets/long-bgm.mp3" showWaveform />

<Character>（画像ベースの口パク）

音量に応じて口を閉じた画像と開いた画像を切り替えるシンプルな立ち絵。 特定の Clip の音にだけ反応させたい時は clipLabel を指定する。

import { Character } from "../src/lib/sound/character"

<Clip label="Voice">
  <Sound sound="assets/voice.mp3" />
</Clip>

<Character
  mouthClosed="assets/char_closed.png"
  mouthOpen="assets/char_open.png"
  threshold={0.12}
  clipLabel="Voice"
/>

• threshold — 開閉判定の音量しきい値（0..1）。立ち絵やキャラのファイルに合わせて調整する。
• clipLabel — 反応させたい Clip の label。同じプロジェクト内で複数キャラを使う時必須。

パスの書き方

• プロジェクト相対のパス（"assets/foo.mp4"）が基本。
• 絶対パス（"~/Videos/example.mp4" や "/Users/...\）も video オブジェクト形式で渡せば動く。
• パスは Studio とレンダラの両方から解決される必要があるので、プロジェクト外を参照すると配布時に困る。基本は assets/ に入れる。