做调查问卷能赚钱的网站,网站数据库迁移,集和品牌设计公司官网,可以做图的网站震惊#xff01;live2d数字人竟开口说话 ~
之前有想做数字人相关项目#xff0c;查了一些方案。看了一些三方大厂的商用方案#xff0c;口型有点尴尬#xff0c;而且很多是采用视频流的方案#xff0c;对流量的消耗很大。后来了解了live2d 技术#xff0c;常在博客网页上…震惊live2d数字人竟开口说话 ~
之前有想做数字人相关项目查了一些方案。看了一些三方大厂的商用方案口型有点尴尬而且很多是采用视频流的方案对流量的消耗很大。后来了解了live2d 技术常在博客网页上见到的看板娘就是live2d技术实现的 ~
说下demo的技术实现核心采用 live2d 的模型[含有开口说话的动作] 文本转语音接口
1、文本转语音接口
这个接口采用前面分享过的edge-tts项目
基于微软TTS优雅的实现文本转语音-CSDN博客
代码仓库地址 GitHub edge-ttshttps://github.com/lyz1810/edge-tts
2、前端实现数字人开口说话
2.1 引入 Live2D 必要的 JavaScript 库 script src./js/live2dcubismcore.min.js/scriptscript src./js/live2d.min.js/scriptscript src./js/pixi.min.js/script!-- if only Cubism 4 support--script src./js/cubism4.min.js/scriptscript src./js/jquery-3.1.1.min.js/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/script
2.2 创建页面画布和按钮
canvas idcanvas/canvas
div idcontroldiv classlabel1、测试说话/divbutton idplay测试音频/buttonbr/br/div classlabel2、调用接口生成音频/divtextarea idtext stylewidth:400px;height:300px;你好欢迎光临/textareabr/br/button idstart开始说话/button
/divstyle#control {position: absolute;top: 50px;left: 50px;color: #ffffff;font-size: 18px;}.label {font-size: 32px;font-weight: 800;}
/style2.3 创建了一个 PIXI 渲染器实例用于渲染 Live2D 模型 // 数字人模型const cubism4Model ./assets/kei_vowels_pro/kei_vowels_pro.model3.json;const live2d PIXI.live2d;(async function main() {const app new PIXI.Application({view: document.getElementById(canvas),autoStart: true,resizeTo: window,backgroundColor: 0x333333});const models await Promise.all([live2d.Live2DModel.from(cubism4Model)]);models.forEach((model) {app.stage.addChild(model);const scaleX (innerWidth) / model.width;const scaleY (innerHeight) / model.height;// fit the windowmodel.scale.set(Math.min(scaleX, scaleY));model.y innerHeight * 0.1;draggable(model);});const model4 models[0];console.log(innerWidth)// model4.x innerWidth / 2;// 居中显示model4.x (innerWidth - model4.width) / 2;model4.on(hit, (hitAreas) {if (hitAreas.includes(Body)) {model4.motion(Tap);}if (hitAreas.includes(Head)) {model4.expression();}});})();2.4 创建播放音频函数播放音频 并调用模型开口说话动作
function talk(model, audio) {var audio_link audio; //[Optional arg, can be null or empty] [relative or full url path] [mp3 or wav file] ./Keira.wavvar volume 1; // [Optional arg, can be null or empty] [0.0 - 1.0]var expression 8; // [Optional arg, can be null or empty] [index|name of expression]var resetExpression true; // [Optional arg, can be null or empty] [true|false] [default: true] [if true, expression will be reset to default after animation is over]var crossOrigin anonymous; // [Optional arg, to use not same-origin audios] [DEFAULT: null]model.speak(audio_link, {volume: volume,expression: expression,resetExpression: resetExpression,crossOrigin: crossOrigin})model.speak(audio_link)model.speak(audio_link, {volume: volume})model.speak(audio_link, {expression: expression, resetExpression: resetExpression})}
2.5 测试音频播放并开口说话。点击 测试音频 按钮测试正常播放调用。一切正常 $(#play).click(function () {talk(model4, ./demo.mp3);});
2.6 核心来了让模型根据文字内容开口说话
$(#start).click(function () {console.log($(#text).val());let text $(#text).val().trim();if (text ) {alert(请输入内容);return false;}$(#start).prop(disabled, true);axios.get(http://127.0.0.1:2020/dealAudio?file_nametest.mp3voicexiaoxiaotext text).then(response {console.log(response.data);const audioUrl response.data ?v new Date().getTime();talk(model4, audioUrl);$(#start).prop(disabled, false);}).catch(error {console.error(请求接口失败:, error);$(#start).prop(disabled, false);});});这里调用的接口地址采用的是文章开头提到的 文本转语音助手
输入文字点击开始说话 模型正常说话 ~
live2d的卡通数字人感觉比3D建模的“真人数字人”效果要好很多都是张口说话live2d显的不会那么尴尬 。
live2d的制作成本相对低很多想商用的话感兴趣可以去查下模型制作教程 ~
代码也已开源仓库地址
live2dSpeekhttps://github.com/lyz1810/live2dSpeek
