easy-live2d v0.2.1 发布啦！ 增加了语音 以及 口型同步功能，现在你的Live2D角色 可以在web里说话了！Ciallo～(∠・ω＜ )

easy-live2d

🎉 easy-live2d v0.2.1 发布啦！
📢 全新版本带来了超强口型同步功能！现在你的Live2D角色可以跟着声音栩栩如生地说话了~

🔥 特性亮点：
实时语音控制以及音频口型同步，让角色表情更生动
修复了若干已知BUG
💻 无论你是VTuber还是想给网站添加交互式角色，easy-live2d都能让你轻松实现！

👉 立即体验：stackblitz

---

📖 官方仓库&文档

👉 easy-live2d Github 仓库
👉 easy-live2d 官方文档

---

New Feature: 角色说话（口型同步）

当前音嘴同步 仅支持wav格式

首先确保live2d模型已设置 MouthMovement，没有参考下面方法

前置方法1:

在Live2D模型编辑器 中开启口型同步 设置 MouthMovement

这里方法可以参看 官方文档

前置方法2:

在模型的 xx.model3.json 中 找到 “Groups” 中 那个"Name": "LipSync"的部分，添加："Ids":"ParamMouthOpenY", 参考如下

{"Version": 3,"FileReferences": {"Moc": "xx.moc3","Textures": ["xx.2048/texture_00.png"],"Physics": "xx.physics3.json","DisplayInfo": "xx.cdi3.json","Motions": {"test": [],"idle": []},"Expressions": []},"Groups": [{"Target": "Parameter","Name": "EyeBlink","Ids": []},{"Target": "Parameter","Name": "LipSync","Ids": ["ParamMouthOpenY"]}],"HitAreas": []
}

角色说话

// 播放声音
live2DSprite.playVoice({// 当前音嘴同步 仅支持wav格式voicePath: '/Resources/Huusya/voice/test.wav',
})// 停止声音
// live2DSprite.stopVoice()setTimeout(() => {// 播放声音live2DSprite.playVoice({voicePath: '/Resources/Huusya/voice/test.wav',immediate: true // 是否立即播放: 默认为true，会把当前正在播放的声音停止并立即播放新的声音})
}, 10000)