当前位置: 首页 > news >正文

live2d + edge-tts 优雅的实现数字人讲话 ~

震惊!live2d数字人竟开口说话 ~

之前有想做数字人相关项目,查了一些方案。看了一些三方大厂的商用方案,口型有点尴尬,而且很多是采用视频流的方案,对流量的消耗很大。后来了解了live2d 技术,常在博客网页上见到的看板娘就是live2d技术实现的 ~

说下demo的技术实现,核心采用 live2d 的模型[含有开口说话的动作]  + 文本转语音接口 

1、文本转语音接口

这个接口采用前面分享过的edge-tts项目

基于微软TTS,优雅的实现文本转语音-CSDN博客

代码仓库地址

 GitHub edge-ttsicon-default.png?t=N7T8https://github.com/lyz1810/edge-tts

2、前端实现数字人开口说话

2.1 引入 Live2D 必要的 JavaScript 库
    <script src="./js/live2dcubismcore.min.js"></script><script src="./js/live2d.min.js"></script><script src="./js/pixi.min.js"></script><!-- if only Cubism 4 support--><script src="./js/cubism4.min.js"></script><script src="./js/jquery-3.1.1.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.2 创建页面画布和按钮
<canvas id=canvas></canvas>
<div id="control"><div class="label">1、测试说话</div><button id="play">测试音频</button><br/><br/><div class="label">2、调用接口生成音频</div><textarea id="text" style="width:400px;height:300px;">你好,欢迎光临</textarea><br/><br/><button id="start">开始说话</button>
</div><style>#control {position: absolute;top: 50px;left: 50px;color: #ffffff;font-size: 18px;}.label {font-size: 32px;font-weight: 800;}
</style>
2.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.wav"var 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_name=test.mp3&voice=xiaoxiao&text=" + 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的制作成本相对低很多,想商用的话感兴趣可以去查下模型制作教程  ~ 

代码也已开源,仓库地址

live2dSpeekicon-default.png?t=N7T8https://github.com/lyz1810/live2dSpeek

相关文章:

live2d + edge-tts 优雅的实现数字人讲话 ~

震惊&#xff01;live2d数字人竟开口说话 ~ 之前有想做数字人相关项目&#xff0c;查了一些方案。看了一些三方大厂的商用方案&#xff0c;口型有点尴尬&#xff0c;而且很多是采用视频流的方案&#xff0c;对流量的消耗很大。后来了解了live2d 技术&#xff0c;常在博客网页上…...

二进制安装php

下载php二进制包&#xff1a; 官网地址&#xff1a;https://www.php.net/releases/ PHP: Releaseshttps://www.php.net/releases/在里边可以选择自己要下载的包进行下载&#xff1b; 下载完成后进行解压&#xff1a; tar xvzf php-7.3.12.tar.gz 解压后 进入目录进行预编…...

旧版Pycharm支持的python版本记录

版权声明&#xff1a;本文为博主原创文章&#xff0c;如需转载请贴上原博文链接&#xff1a;旧版Pycharm支持的python版本记录-CSDN博客 前言&#xff1a;近期由于打算研究GitHub上一个开源量化交易平台开发框架&#xff0c;但是该框架是基于python3.10的版本开发&#xff0c;所…...

java实现七牛云内容审核功能,文本、图片和视频的内容审核(鉴黄、鉴暴恐、敏感人物)

目录 1、七牛云内容审核介绍 2、查看内容审核官方文档 2.1、文本内容审核 2.1.1、文本内容审核的请求示例 2.1.2、文本内容审核的返回示例 2.2、图片内容审核 2.2.1、请求参数 2.2.2、返回参数 2.3、视频内容审核 3、代码实现 3.1、前期代码准备 3.2、文本内容审核…...

C++面试基础系列-struct

系列文章目录 文章目录 系列文章目录C面试基础系列-struct1.C中struct2.C中struct2.1.同名函数2.2.typedef定义结构体别名2.3.继承 3.总结3.1.C和C中的Struct区别 4.struct字节对齐5.struct与const 关于作者 C面试基础系列-struct 1.C中struct struct里面只能放数据类型&#…...

代码随想录算法训练营 | 动态规划 part05

完全背包 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff08;也就是可以放入背包多次&#xff09;&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 例子&#xff1a; 背包可容纳重…...

英特尔XPU大模型应用创新

...

仿Muduo库实现高并发服务器——socket网络通信模块

本项目就是基于TCP网络通信搭建的。 TCP: 客户端&#xff1a;socket(),connect(). 服务端&#xff1a;socket(),bind(),listen(),accept(). 下面代码就是对原生API网络套接字的封装。需要熟悉原生API网络套接字接口。 下面这段代码&#xff0c;没什么好讲的&#xff0c;就不…...

模型 神经网络(通俗解读)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。仿脑智能&#xff0c;深度学习&#xff0c;精准识别。 1 神经网络的应用 1.1 鸢尾花分类经典问题 神经网络的一个经典且详细的经典应用是鸢尾花分类问题 。主要是通过构建一个神经网络模型来自动区分…...

事务的使用

1.如何使用事务: 1.1.事务的完成过程&#xff1a; 1.步骤1&#xff1a;开启事务2.步骤2&#xff1a;一系列的DML操作3.步骤3&#xff1a;事务结束状态&#xff1a;提交事务(COMMIT)&#xff0c;中止事务&#xff08;事务回滚ROLLBACK&#xff09; 1.2.事务分类&#xff1a; …...

【免费】企业级大模型应用推荐:星环科技无涯·问知

无涯问知是星环科技发布的大模型应用系统&#xff0c;那么我们先简单了解下星环科技吧&#xff01; 星环科技&#xff08;股票代码&#xff1a;688031&#xff09;致力于打造企业级大数据和人工智能基础软件&#xff0c;围绕数据的集成、存储、治理、建模、分析、挖掘和流通等数…...

从〇 搭建PO模式的Web UI自动化测试框架

Page Object模式简介 核心思想 将页面元素和操作行为封装在独立的类中&#xff0c;形成页面对象&#xff08;Page Object&#xff09;。每个页面对象代表应用程序中的一个特定页面或组件。 优点&#xff1a; 代码复用性高 页面对象可以在多个测试用例中复用。 易于维护 …...

在Ubuntu中重装Vscode(没有Edit Configurations(JSON)以及有错误但不标红波浪线怎么办?)

在学习时需要将vscode删除重装&#xff0c;市面上很多方法都不能删干净&#xff0c;删除之后拓展都还在。因此下面的方法可以彻底删除。注意&#xff0c;我安装时使用的是snap方法。 如果你的VScode没有Edit Configurations(JSON)&#xff0c;以及有错误但不标红波浪线的话&…...

Oracle 用户-表空间-表之间关系常用SQL

问题&#xff1a; 当某一个表数据量特别大&#xff0c;突然插入数据一直失败&#xff0c;可能是表空间不足&#xff0c;需要查看表的使用率 用户-表空间-表之间关系&#xff1a;用户可以有多个表空间&#xff0c;表空间可以有多个表&#xff0c;表只能拥有一个表空间和用户 1.…...

家政服务管理系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;管理阿姨管理&#xff0c;家政公司管理&#xff0c;服务项目管理&#xff0c;家政预约管理&#xff0c;评价管理&#xff0c;留言板管理&#xff0c;系统管理 微信端账号功能包括…...

【算法】并查集的介绍与使用

1.并查集的概论 定义&#xff1a; 并查集是一种树型的数据结构&#xff0c;用于处理一些不相交集合的合并及查询问题&#xff08;即所谓的并、查&#xff09;。比如说&#xff0c;我们可以用并查集来判断一个森林中有几棵树、某个节点是否属于某棵树等。 主要构成&#xff1a; …...

Shell——运算符

在 Shell 编程中&#xff0c;运算符用于执行各种类型的操作&#xff0c;如算术运算、字符串比较、文件测试等。以下是 Shell 中常用的运算符分类和示例&#xff1a; 1. 算术运算符 Shell 中使用 expr 或 $(( ... )) 来进行算术运算。 : 加法-: 减法*: 乘法/: 除法%: 取余**:…...

SweetAlert2

1. SweetAlert2 SweetAlert2是一个基于JavaScript的库, 用于在网页上替换标准的警告框(alert), 确认框(confirm)和提示框(prompt), 并提供更加美观和用户友好的界面.需要在项目中引入SweetAlert2, 可以通过CDN链接或者将库文件下载到你的项目中来实现这一点. 通过CDN引入:<…...

c语言中比较特殊的输入函数

目录 一.getchar()函数 1.基本功能 2.使用方法 (1).读取单个字符 (2).读取多个字符&#xff08;直到遇到换行符&#xff09; (3).处理输入中的空白字符 3.返回值 4.应用场景 5.注意事项 二.fgets()函数 1.函数原型 2.工作原理 3.使用示例 (1).从标准输入读取一行…...

Java版自动化测试之Selenium

1. 准备 编程语言&#xff1a;Java JDK版本&#xff1a;17 Maven版本&#xff1a;3.6.1 2. 开始 声明&#xff1a;本次只测试Java的Selenium自动化功能 本次示例过程&#xff1a;打开谷歌游览器&#xff0c;进入目标网址&#xff0c;找到网页的输入框元素&#xff0c;输入指…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...