live2d+live2dcubismcore+pixi实现二次元看板娘数字虚拟直播通过文本生成说话效果代码-html代码-BFW代码库

live2d+live2dcubismcore+pixi实现二次元看板娘数字虚拟直播通过文本生成说话效果代码

代码语言：html

所属分类：其他

代码描述：live2d+live2dcubismcore+pixi实现二次元看板娘数字虚拟直播通过文本生成说话效果代码

代码标签： live2d live2dcubismcore pixi 二次元看板娘数字虚拟主播说话文

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
<style>
#control {
  position: absolute;
  top: 8px;
  left: 24px;
  color: #fff;
  font-size: 18px;
}
</style>

  
  
</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/live2dcubismcore.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/live2d.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.6.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-live2d-display.index.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-live2d-display.extra.js"></script>

<canvas id=canvas></canvas>

<div id="control">
    <a onclick="beginsay();" href="#">开始说话</a>
    <a  onclick="endspeak();" href="#">停止说话</a>
</div>
 
  
      <script  >
    var ssu = new SpeechSynthesisUtterance();
    ssu.pitch=2;
       ssu.rate=0.8;
       // ssu.volume = 100  // 声音的音量

        //ssu.rate = 1 // 语速，数值，默认值是1，范围是0.1到10

        //ssu.pitch = 1.5 // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
      
        

        // lang：使用的语言，字符串（比如："zh-cn"）

        //volume：音量，值在0-1之间（默认是1）

        //rate：语速的倍数，值在0.1-10之间（默认1倍）

        //pitch：音高，值在0-2之间，（默认是1）

        //voiceURI：指定希望使用的声音，字符串

        //既然有属性肯定有方法，该对象还提供了一些事件的回调

        ssu.onstart = (e)=> {
            console.log("开始。。。");
            console.log(e);
        }
        ssu.onend = (e)=> {
            console.log("结束。。。");
            endspeak();
            console.log(e);
        }

const cubism4Model =
"//repo.bfw.wiki/bfwrepo/images/live2dm3/Haru/Haru.model3.json";

const live2d = PIXI.live2d;
let models =[];
(async function main() {
  const app = new PIXI.Application({
    view: document.getElementById("canvas"),
    autoStart: true,
    resizeTo: window,
    backgroundColor: 0xffffff });


   models = await Promise.all([

  live2d.Live2DModel.from(cubism4Model, { autoInteract: false })]);


  models.forEach(model => {
    app.stage.addChild(model);

    const scaleX = innerWidth * 1.2 / model.width;
    const scaleY = innerHeight * 0.8 / model.height;

    // fit the window
    model.scale.set(Math.min(scaleX, scaleY));

    model.y = innerHeight * 0.........完整代码请登录后点击上方下载按钮下载查看