js实现二次元虚拟数字人语音问答chatgpt交互代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现二次元虚拟数字人语音问答chatgpt交互代码，使用live2二次元人物结合chatgpt及浏览器的语音交互技术实现可语音聊天的卡通二次元数字人效果代码，可用户抖音虚拟数字人直播互动。

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

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

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


  
<style>
#control {
  position: absolute;
  background: white;
  padding: 20px;
  bottom: 8px;
  left: 65%;
 
  font-size: 18px;
}
#start_button {
  width: 20%;
  color: white;
  border: initial;
  border-left: 1px solid white;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0 50px 50px 0;
  font-weight: 200;
  font-size: 1em;
  transition: all 100ms ease-in-out;
}
</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>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<canvas id=canvas></canvas>

<div id="control">

      <button id="start_button" onclick="startButton(event)">
    <img id="start_img" src="//repo.bfw.wiki/bfwrepo/images/chat/mic.svg" alt="Start"></button>
    
    <div id="final_span">
    请在edge浏览器中运行
    
</div>



    <div id="outresp_span">
    
    
</div>
</div>
 
  
      <script  >
      
      
var create_email = false;
var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  start_button.style.display = 'inline-block';
  var recognition = new webkitSpeechRecognition();
  recognition.lang="zh-CN";
  recognition.continuous = false;
  recognition.interimResults = true;
  recognition.onstart = function() {
    recognizing = true;
    showInfo('info_speak_now');
    start_img.src = '//repo.bfw.wiki/bfwrepo/images/chat/mic_red.png';
  };
  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      start_img.src = '//repo.bfw.wiki/bfwrepo/images/chat/mic.svg';
      showInfo('info_no_speech');
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      start_img.src = '//repo.bfw.wiki/bfwrepo/images/chat/mic.svg';
      showInfo('info_no_microphone');
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        showInfo('info_blocked');
      } else {
        showInfo('info_denied');
      }
      ignore_onend = true;
    }
  };
  recognition.onend = function() {
    recognizing = false;
    if (ignore_onend) {
      return;
    }
    start_img.src = '//repo.bfw.wiki/bfwrepo/images/chat/mic.svg';
    if (!final_transcript) {
      showInfo('info_start');
      return;
    }
    showInfo('');
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
      var range = document.createRange();
      range.selectNode(document.getElementById('final_span'));
      window.getSelection().addRange(range);
    }
    if (create_email) {
      create_email = false;
      createEmail();
    }
  };
  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = "你问："+linebreak(final_transcript);
    chatgpttalk(final_transcript);
    
   
  };
}
function upgrade() {
  start_button.style.visibility = 'hidden';
  showInfo('info_upgrade');
}
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
function capitalize(s) {
  return s.replace(first_char, function(m) { return m.toUpperCase(); });
}


function startButton(event) {
  if (recognizing) {
    recognition.stop();
    return;
  }
  final_transcript = '';
  recognition.lang = "zh-CN";
  recognition.start();
  ignore_onend = false;
  final_span.inner.........完整代码请登录后点击上方下载按钮下载查看