js实现文字生成语音与骷颅人物嘴巴说话动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：js实现文字生成语音与骷颅人物嘴巴说话动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  


  <link href="https://fonts.googleapis.com/css?family=Finger+Paint" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body{
  overflow:hidden;
  /*font-family: 'Bai Jamjuree', sans-serif;*/
  font-family: 'Finger Paint', cursive;
}
.full-screen {
  background-image: radial-gradient(firebrick, #060606);
  width: 100vw;
  height: 100vh;
  z-index: -100;
  margin-left:-8px;
  cursor:crosshair;
}
#searchBox{
  padding:1em;
  height:10px;
  background-color:#fff;
  position:fixed;
  z-index:60;
  width:100%;
  top:0;
  left:0;
  box-shadow:0 4px 12px rgba(0,0,0,.1),0 4px 24px rgba(0,0,0,.2);
  font-family: 'Finger Paint', cursive;
}
#search{
  border:1px solid rgba(0,0,0,.1);
  border-radius: 6px;
  width: 100%;
  padding: 12px 16px;
  font-size:1em;
}
#userInputYo{
  background: rgba(255,255,255,0.3);
  border: none;
  padding:5px;
  margin-top:5px;
  border-radius:5px;
  width:70vw;
  box-shadow:0px 1px 10px grey;
  text-align:center;
  top:1%;
  left:50%;
  z-index:11;
  position:absolute;
  transform:translate(-50%, 0%);
  height:1.3em;
  font-family: 'Finger Paint', cursive;
}
.eyeArea {
  position:relative;
  z-index:5;
  transform:translate(-50%,-50%);
  left:50%;
  top:25%;
  width:100%;
  height:50%;
}
.eye {
  position:absolute;
  background: #000000;
  /*border: 1.2vw solid rgb(255,255,255);*/
  border-radius: 50%;
  height: 10vw;
  width: 10vw;
  margin-left:-70%;
  margin-top:70%;
  max-height:100px;
  max-width:100px;
  box-shadow:3px 0px 1px rgb(0,0,0,0.3);
}
.eye:after {
  background: firebrick;
  /*border-radius: 50%;*/
  bottom: 52%;
  content: " ";
  height: 33%;
  position: absolute;
  right: 3.33vw;
  width: 3.33vw;
  max-height:33.3px;
  max-width:33.3px;
}
.eye:hover:after {
  -webkit-transition: bottom 1s; /* Safari */
  transition: bottom 0.5s;
  bottom: 33%;
}
.eeye:before { /*twinkle in the eye: not used*/
  background: white;
  /*border-radius: 50%;*/
  bottom: 60%;
  content: " ";
  height: 13%;
  position: absolute;
  right: 3.93vw;
  width: 1.33vw;
  max-height:13.3px;
  max-width:13.3px;
  z-index:6;
}
.eye:active{
  background:linear-gradient( 0deg, white, white 47%, black 47%, black 53%, white 53% );
  transform:rotate(90deg);/*This does nothing. Go figure.*/
}
.eye:active:after{
  background: rgba(0, 0, 0, 0);
}
.eye2 {
  position:relative;
  margin-left:70%;
  margin-top:40%;
  background: #000000;
  left:0vw;
  /*border: 1.2vw solid rgb(255,255,255);*/
  border-radius: 50%;
  height: 10vw;
  width: 10vw;
  top:23%;
  max-height:100px;
  max-width:100px;
  box-shadow:3px 0px 1px rgb(0,0,0,0.3);
}
.eye2:after {
  background: firebrick;
  /*border-radius: 50%;*/
  bottom: 52%;
  content: " ";
  height: 3.33vw;
  position: absolute;
  right: 33%;
  width: 3.33vw;
  max-height:33.3px;
  max-width:33.3px;
}
.eye2:hover:after {
  -webkit-transition: bottom 1s; /* Safari */
  transition: bottom 0.5s;
  bottom: 33%;
}
.eeye2:before { /*twinkle in the eye*/
  background: white;
  /*border-radius: 50%;*/
  bottom: 60%;
  content: " ";
  height: 13%;
  position: absolute;
  right: 3.93vw;
  width: 1.33vw;
  max-height:13.3px;
  max-width:13.3px;
  z-index:6;
}
.eye2:active{
  background:linear-gradient( 0deg, white, white 47%, black 47%, black 53%, white 53% );
}
.eye2:active:after{
  background: rgba(0, 0, 0, 0);
}
.skel {
  width: 25vw;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  opacity:0.4;
}
.skelArea {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  height:50vw;
  max-height:400px;
  max-width:400px;
  display:inline-block;
}
.skelBody {
  position: absolute;
  background: rgb(255,255,255);
  border-radius: 50%;
  z-index: 3;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-right: 1.2vw solid rgb(0,0,0);
  border-top: 1.2vw solid rgb(0,0,0);
  height: 55%;
  max-height:259px;
  width: 29vw;
  max-width:300px;
}
.skelNose {
  position: absolute;
  z-index: 3;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
	height: 0;
	border-left: 2vw solid transparent;
	border-right: 2vw solid transparent;
	border-bottom: 3vw solid #000000;
}
.skelBelly {
  position: absolute;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  z-index: 2;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:rgb(255,255,255);
  border-right: 1.2vw solid rgb(0,0,0);
  border-top: 1.2vw solid rgb(0,0,0);
  height: 15vw;
  width: 12vw;
  overflow: auto;
  max-height:120px;
  max-width:120px;
}
.skelBelly:after {
  position: absolute;
  border-radius: 10%;
  z-index: 2;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:rgb(255,255,255);
  border: 1vw solid rgb(0,0,0);
  height: 7vw;
  width: 12vw;
}
.skelO {
  position: absolute;
  border-radius: 100%;
  border-width: 0;
  border-bottom:solid 1vw black;
  z-index: 4;
  top: 65%;
  left:50%;
  transform: translate(-50%, -50%);
  height: 1vw;
  width: 90%;
}

.skelAaAhAoEhHhIhKUh {
  position: absolute;
  border-radius: 100%;
  border-width: 0;
  border-bottom:solid 3vw black;
  z-index: 4;
  top: 65%;
  left:50%;
  transform: translate(-50%, -50%);
  height: 3.5vw;
  width: 95%;
}
.skelDGNNgSTZ {
  position: absolute;
  border-radius: 100%;
  border-width: 0;
  border-bottom:solid 3vw black;
  z-index: 4;
  top: 65%;
  left:50%;
  transform: translate(-50%, -50%);
  height: 3.5vw;
  width: 95%;
}
.skelDGNNgSTZ:after {
  position: absolute;
  height:2.5vw;
  width:70%;
  right:1vw;
  content: " ";
  border-radius: 20%;
  top: 3.5vw;
  z-index:10;
  background: linear-gradient( 0deg, white, white 45%, black 45%, black 55%, white 55% );
}
.skelDhLTh {
  position: absolute;
  border-radius: 100%;
  border-width: 0;
  border-bottom:solid 3vw black;
  z-index: 4;
  top: 65%;
  left:50%;
  transform: translate(-50%, -50%);
  height: 3.5vw;
  width: 95%;
}
.skelDhLTh:after {
  position: absolute;
  height:3vw;
  width:25%;
  right:3.25vw;
  content: " ";
  border-radius: 40%;
  top: 3.5vw;
  z-index:10;
  background:red;
}
.skelFV {
  position: absolute;
  border-radius: 100%;
  border-width: 0;
  border-bottom:solid 3vw black;
  z-index: 4;
  top: 65%;
  left:50%;
  transform: translate(-50%, -50%);
  height: 3.5vw;
  width: 90%;
}
.skelFV:after {
  position: absolute;
  height:80%;
  width:90%;
  right:5%;
  content: " ";
  border-radius: 100%;
  top: 3.8vw;
  z-index:10;
  background:rgb(255,255,255);
}
.skelBMP {
  position: absolute;
  border-radius: 100%;
  border-width: 0;
  border-bottom:solid 0.7vw black;
  z-index: 4;
  top: 65%;
  left:50%;
  transform: translate(-50%, -50%);
  height: 1vw;
  width: 90%;
}
.skelChErJhRShYZh {
  position: absolute;
  background: black;
  border-radius: 50%;
  z-index: 4;
  top: 65%;
  left:50%;
  transform: translate(-50%, -50%);
  height: 3.5vw;
  width: 70%;
}
.skelAwOwOyUwW {
  position: absolute;
  background: black;
  border-radius: 50%;
  z-index: 4;
  top: 65%;
  left:44%;
  transform: translate(-50%, -50%);
  height: 3vw;
  width: 30%;
}
.skelAeAyEyIy {
  position: absolute;
  border-radius: 100%;
  border-width: 0;
  border-bottom:solid 2vw black;
  z-index: 4;
  top: 65%;
  left:50%;
  transform: translate(-50%, -50%);
  height: 2.5vw;
  width: 90%;
}
#outputArea{
  top:0;
  left:0;
  padding:10px;
  position:absolute;
  background:#ffffff;
  height:100vh;
  width:10vw;
  z-index: 60;
  overflow-y:auto;
  box-shadow: 5px 0px 12px rgb(0,0,0,0.7);
  display:none;
}
.box{
  height:10vh;
  width:11vw;
  display: block;
  position: relative;
  transform:translate(-5%,10%);
}
.box:hover{
  border: 1px solid rgb(82, 0, 46);
  border-radius:15px;
  background:rgb(255,255,255,0.5);
  box-shadow: 0px 10px 5px rgb(0,0,0,0.7);
  cursor:pointer;
}
.cirBut{
  top:1vh;
  left:1vh;
  height:30px;
  width:30px;
  position:fixed;
  border-radius:50%;
  outline:none;
  border:none;
  z-index:61;
  background:rgb(255,255,255);
  cursor:pointer;
  font-family: 'Finger Paint', cursive;
  font-weight:bold;
}
.cirBut:hover{
  box-shadow: 0px 4px 0px #000000;
  -webkit-transition: box-shadow 0.5s; /* Safari */
  transition: box-shadow 0.5s;
}
.cirBut2{
  bottom:1vh;
  left:1vh;
  height:30px;
  position:absolute;
  border-radius:20px;
  outline:none;
  border:solid 2px rgb(255,255,255);
  z-index:61;
  background:rgb(0,0,0);
  cursor:pointer;
  box-shadow: 0px 2px 0px rgb(255,255,255);
  color:white;
  font-family: 'Finger Paint', cursive;
}
.cirBut2:hover{
  box-shadow: 0px 5px 0px rgb(255,255,255);
  -webkit-transition: box-shadow 0.5s; /* Safari */
  transition: box-shadow 0.5s;
}
.cirBut3{
  bottom:1vh;
  right:1vh;
  height:30px;
  position:absolute;
  border-radius:20px;
  outline:none;
  border:none;
  z-index:61;
  background:rgb(194, 90, 149);
  cursor:pointer;
  box-shadow: 0px 2px 2px rgb(255,255,255);
}
.cirBut3:hover{
  box-shadow: 0px 5px 5px rgb(255,255,255);
  -webkit-transition: box-shadow 0.5s; /* Safari */
  transition: box-shadow 0.5s;
}

#gui { 
  position: absolute; 
  top: 47px; 
  left: 5px;
  z-index:20;
}

#cursor {
	position:absolute;
	pointer-events: none;
  z-index:1000;
}
	#cursor:after {
		content: attr(data-after);
		font-size: 2em;
    transform:translate(-50%,-50%);
    z-index:1000;
}
</style>



</head>

<body >

<div id="gui"></div>
<div id="cursor"></div>
<div id="full" class="full-screen" onclick="javascript:resetIt()">
  
  <div id="searchBox"><input onchange="processRITA()" id="userInputYo" type="text" placeholder="Type here..." title="Type words in here and hit enter. The words will be broken down into phonemes in the side menu. Then you can hover over them to change the skeleton's mouth. Click the 'Speak!' button or hit Enter to make the skeleton talk" value="Happy Halloween!"></div>
  <button class="cirBut" onclick="showIt()" title="Shows the phoneme mouths. Hover over them in sequence to make character talk!">💀</button>
  <button class="cirBut2" onclick="speakYou()" title="Animate it!">Speak!</button>
  <div class="skelArea">
    <div class="eyeArea">
    <div class="eye"></div>
    <div class="eye2"></div>
    </div>
    <div class="skelBody"></div>
    <div class="skelNose"></div>
    <div class="skelBelly"></div>
    <div id="skelMouth" class="skelO"></div>
  </div>
  <div id="outputArea"></div>
  <div id="outputArea2"></div>
  
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rita-micro.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script >
// Uses RiTa.js, Dat-GUI, native speech synthesis, and a couple pens lifted from robdimarzo (cursor to emoji) and Kxrl (eye movement).

// declaring variables
var word1 = [""];
var mouthClasses = [];
var mouf = $('#skelMouth');
var.........完整代码请登录后点击上方下载按钮下载查看