口型动作同步
181 words
1 min
口型动作同步功能需要模型仅支持 motionsync3
, 在使用此功能之前, 请检查模型是否存在 motionsync3.json
文件. 或者你还可以使用 live2d 官方为演示口型同步所提供的示例模型: kei_vowels_pro
使用AudioBuffer
可以将 AudioBuffer
作为参数, 之后调用 speak
方法, 就可以实现模型的口型动作同步, 你可以借助一个tts服务将一段文本转为 AudioBuffer
.
在这个例子中, 点击说话按钮, 可让模型播放说出输入框的内容
示例代码:
ts
async function tts(text: string) {
const response = await fetch('https://tts.hacxy.cn/tts', {
method: 'POST',
body: JSON.stringify({
voice: 'zh-CN-XiaoxiaoNeural',
text,
}),
headers: {
'Content-Type': 'application/json',
},
}).then(res => res.arrayBuffer());
// 创建 AudioContext 实例
const audioContext = new AudioContext();
// 使用 decodeAudioData 解码 ArrayBuffer
const audioBuffer = await audioContext.decodeAudioData(response);
return audioBuffer;
}
const main = async () => {
const inputEl = document.createElement('input');
inputEl.style.backgroundColor = '#fff';
const buttonEl = document.createElement('a');
buttonEl.className = 'say-button';
buttonEl.innerHTML = '说话';
inputEl.className = 'say-input';
inputEl.value = '这是一段文字, 用于测试口型动作同步';
canvasEl.parentElement?.append(inputEl, buttonEl);
const model = await l2d.create({
path: 'https://model.hacxy.cn/kei_vowels_pro/kei_vowels_pro.model3.json',
motionSync: 'https://model.hacxy.cn/kei_vowels_pro/kei_vowels_pro.motionsync3.json',
scale: 0.3
});
buttonEl.addEventListener('click', async () => {
const audioBuffer = await tts(inputEl.value);
model.speak(audioBuffer);
});
};
main();
使用媒体流
待补充...