How to make the model do the lipsync?

[loydcose]

Is it possible for a model to do lipsync? I can't seem to find any lipsync contents on the documentation. Could you guys help me?

Here's my current code:

   const app = new Application({
        view: document.getElementById("canvas") as
          | HTMLCanvasElement
          | undefined,
        autoStart: true,
        resizeTo: window,
        backgroundAlpha: 0,
      })

      const model = await Live2DModel.from(sampleModel3, {
        autoInteract: false,
      })
      const scaleX = innerWidth / model.width
      const scaleY = innerHeight / model.height
      model.scale.set(Math.min(scaleX, scaleY))
      model.x = innerWidth / 2 - model.width / 2

      // can't access speak property, how do i lipsync the model?
      model.speak()

      app.stage.addChild(model)

Lib versions: pixi-live2d-display: 0.4.0 pixi.js: 6.5.2

Thanks a lot!

[liyao1520]

https://github.com/user-attachments/assets/7e692f7e-f64a-44cd-a3a4-187e3df8fd72

This is the effect I achieved，Refer to the official demo，The model needs to be set up and the motionsync3.json file needs to be exported.

https://github.com/Live2D/CubismWebMotionSyncComponents

[liyao1520]

demo https://github.com/liyao1520/live2d-lipsync

[gaochunrong]

https://github.com/Live2D/CubismWebMotionSyncComponents 直接下载集成到live2d web sdk就可以正常显示？具体细节说一下