SpeechSynthesisUtteranc+SpeechRecognition实现可语音对话的卡通数字人效果代码-html代码-BFW代码库

SpeechSynthesisUtteranc+SpeechRecognition实现可语音对话的卡通数字人效果代码

代码语言：html

所属分类：其他

代码描述：SpeechSynthesisUtteranc+SpeechRecognition实现可语音对话的卡通数字人效果代码

代码标签： SpeechSynthesisUtteranc SpeechRecognition 可语音对话

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

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

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

  
  
  
  
<style>
body {
  background: #f7daf2;
}

@import url(https://fonts.googleapis.com/css?family=Handlee);
p{
 margin-top:20px;
  text-align:center;
  font-family: 'Handlee', cursive;
  font-size:120%;
}
svg{
  width:246px; 
  margin:20px auto;
  display:block;
}
  svg.speaking .onmouse {
  opacity:0;
}

   a{
  opacity:0;
}
 a:hover + .facebox .mousedown{
  display:none;
}
  a:hover + .facebox .onmouse{
  opacity:1;
}
#output {
  pointer-events: none;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 6vmin;
  width: 80%;
  text-align: center;
  color: white;
  text-transform: uppercase;
  text-shadow: 0 -1px #000, 1px -1px #000, 1px 0 #000, 1px 1px #000, 0 1px #000, -1px 1px #000, -1px 0 #000, -1px -1px #000;
}
</style>

  
</head>

<body >
  <button type="button" onclick="runSpeechRecognition()">点击然后对我说</button>
<svg version="1.1" 
	 	 x="0px" y="0px" width="246.4893px" height="477.99094px" viewBox="0 0 246.4893 477.99094" xml:space="preserve" id="hina">
	<symbol id="face-2_1_" viewBox="-66.62533 -28.70676 133.25066 57.41352" >
		<g >
			<path d="M28.80477,11.41775c-0.6809-0.21727-1.30321,0.50519-0.96291,1.1337c4.04771,7.47583,16.18189,12.38684,22.70195,8.8008
				c4.52904-2.49097,5.83671-4.83552,6.19533-6.18151c0.15086-0.56618-0.31425-1.09924-0.8938-1.01298
				c-2.67316,0.39785-9.15388,2.11638-15.63285,0.71553S31.06913,12.14031,28.80477,11.41775z"/>
			<polygon points="40.85741,20.56427 45.41019,28.70676 45.41019,19.9514 			"/>
			<polygon points="48.43626,20.05684 55.29325,26.38215 52.57341,18.05997 			"/>
			<polygon points="53.34552,17.675 61.05024,18.02522 56.14724,14.87329 			"/>
		</g>
		<g>
			<path d="M-27.98438,11.41775c0.6809-0.21727,1.30321,0.50519,0.96291,1.1337c-4.04771,7.47583-16.18189,12.38684-22.70195,8.8008
				c-4.52904-2.49097-5.83671-4.83552-6.19534-6.18151c-0.15085-0.56618,0.31426-1.09924,0.89381-1.01298
				c2.67316,0.39785,9.15388,2.11638,15.63285,0.71553S-30.24874,12.14031-27.98438,11.41775z"/>
			<polygon points="-40.03702,20.56427 -44.58981,28.70676 -44.58981,19.9514 			"/>
			<polygon points="-47.61587,20.05684 -54.47286,26.38215 -51.75302,18.05997 			"/>
			<polygon points="-52.52514,17.675 -60.22985,18.02522 -55.32685,14.87329 			"/>
		</g>
		
			<path fill="none" stroke="#000000" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M16.91019-26.7481c1,3.5-4,6.25-7.75,6.5s-13.80411,0.28355-15-4.5c-0.75-3,2-3.25,2-3.25"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-60.08981" y1="-0.2481" x2="-44.29207" y2="16.97925"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-50.76456" y1="2.09252" x2="-36.52508" y2="16.00838"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-42.67395" y1="-1.79098" x2="-21.96197" y2="20.86274"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-26.81634" y1="1.12164" x2="-9.98786" y2="23.45174&quo.........完整代码请登录后点击上方下载按钮下载查看