live2d实现卡通二次元数字人说话嘴唇与声音同步效果代码-html代码-BFW代码库

live2d实现卡通二次元数字人说话嘴唇与声音同步效果代码

代码语言：html

所属分类：其他

代码描述：live2d实现卡通二次元数字人说话嘴唇与声音同步效果代码，点击说话按钮就可以实现卡通人说话，适合抖音虚拟二次元数字人直播等场景。

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

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

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


  
<style>
body{
    background-image: url('//repo.bfw.wiki/bfwrepo/image/61bb2407955ad.png');
}
#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">
    <button onclick="beginsay();" >点我说话</button>
 
</div>
 
  
      <script  >
       var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
      // 新建分析仪
const analyser = audioCtx.createAnalyser();

// 根据 频率分辨率建立个 Uint8Array 数组备用
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
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,
    transparent: 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.1;

  
  });
 


  const model4 = models[0];



  model4.x = (innerWidth - model4.width) / 2;
 

  // handle tapping

 

  model4.on("hit", hitAreas => {
    if (hitAreas.includes("Body")) {
      
    

      model4.motion("Tap");
    }

    if (hitAreas.includes("head")) {
         model4.motion("Sing");
   

  // model4.internalModel.coreModel.setParameterValueById.........完整代码请登录后点击上方下载按钮下载查看