live2d-web ドキュメント

リップシンク

音量、カスタムドライバー、wLipSync から入力方式を選びます。

音量ドライバー

このヘルパーは、アプリで計測した RMS を滑らかな口の開きに変換します。マイク権限、AudioContext、AudioNode、requestAnimationFrame はアプリ側で管理します。

import { createVolumeLipSync } from 'live2d-web'
 
const driver = createVolumeLipSync()
const detach = character.addLipSync({ driver })
 
// The app owns AudioContext, RMS calculation and scheduling.
driver.sample(rms, elapsedMs)
 
detach()

口入力の競合を避ける

フェイストラッキングとマイクのリップシンクを同時に使う場合は、トラッカーの mouth チャンネルを無効にしてください。wLipSync は別方式の入力として動作し、AudioWorklet に対応した環境が必要です。

1フレームに1回だけサンプリング

アプリが所有する analyser から RMS を一度計算し、sample(rms, elapsedMs) を呼びます。最初の1.5秒は環境ノイズを推定するため、単調増加する時間を渡してください。

const startedAt = performance.now()
function update(now: number) {
  driver.sample(readRms(analyser), now - startedAt)
  requestAnimationFrame(update)
}
requestAnimationFrame(update)

リソースごとに後始末

リップシンクの detach はランタイムの driver だけを外します。animation frame、オーディオノード、AudioContext、すべての MediaStreamTrack はアプリ側で停止します。