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

代码语言：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"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-17.1076" y1="-0.49648" x2="-3.839" y2="19.24462"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-12.57686" y1="-3.73273" x2="5.54612" y2="25.06986"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-2.5445" y1="-2.76185" x2="14.93123" y2="19.89187"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="10.40049" y1="-0.17286" x2="21.0801" y2="19.24462"/>
		
			<path fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M17.84385-2.43823c0.97087,1.2945,13.91586,23.6246,13.91586,23.6246"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="28.52346" y1="0.79802" x2="42.43932" y2="17.30287"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="37.58495" y1="1.44527" x2="47.94094" y2="16.65562"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="47.02832" y1="-0.14373" x2="65.47492" y2="20.89187"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="56.53156" y1="1.79802" x2="65.91666" y2="14.41938"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-65.91666" y1="-0.62836" x2="-57.82605" y2="10.37488"/>
	</symbol>
	<symbol  id="sy-face-1" viewBox="-63.81546 -38.78345 127.63091 77.5669">
		
			<path fill="none" stroke="#000000" stroke-width="0.99213" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M-2.07605-38.28739c0,0,2.5,1.5,4,0"/>
		<g>
			
				<path fill="none" stroke="#000000" stroke-width="2.12598" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M44.85252,25.52073c17.81183,0.77443,22.0402-30.58988,11.41506-39.65068s-24.82814-3.40748-27.92585,6.66008
				S27.04069,24.74631,44.85252,25.52073z"/>
			<path d="M36.23049,28.13903c7.36004,2.62395,16.2908,0.98327,21.40749-2.48622c0.85445-0.57938,1.91046,0.39585,1.39651,1.29118
				c-4.1894,7.29829-15.49186,10.53106-23.80696,2.8386C34.42937,29.0442,35.2063,27.7739,36.23049,28.13903z"/>
			<polygon points="42.61864,33.3295 44.23305,38.78345 45.9196,33.04439 			"/>
			<polygon points="49.69181,32.50666 53.74067,37.13174 52.58223,31.68082 			"/>
			<polygon points="56.05278,29.10166 60.80362,31.94301 58.7878,27.25889 			"/>
			
				<path fill="none" stroke="#000000" stroke-width="2.12598" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M-45.00462,25.52073c-17.81183,0.77443-22.04021-30.58988-11.41506-39.65068s24.82814-3.40748,27.92585,6.66008
				S-27.19279,24.74631-45.00462,25.52073z"/>
			<path d="M-36.38259,28.13903c-7.36004,2.62395-16.2908,0.98327-21.40749-2.48622
				c-0.85445-0.57938-1.91046,0.39585-1.39651,1.29118c4.1894,7.29829,15.49186,10.53106,23.80696,2.8386
				C-34.58148,29.0442-35.35841,27.7739-36.38259,28.13903z"/>
			<polygon points="-42.77075,33.3295 -44.38515,38.78345 -46.0717,33.04439 			"/>
			<polygon points="-49.84391,32.50666 -53.89278,37.13174 -52.73434,31.68082 			"/>
			<polygon points="-56.20489,29.10166 -60.95573,31.94301 -58.9399,27.25889 			"/>
		</g>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-63.1068" y1="-28.40875" x2="-59.54692" y2="-24.20163"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-58.25243" y1="-30.02687" x2="-56.31068" y2="-26.467"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-50.07605" y1="-26.78739" x2="-50.86731" y2="-31.29224"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="63.1068" y1="-28.40875" x2="59.54692" y2="-24.20163"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="58.25243" y1="-30.02687" x2="56.31068" y2="-26.467"/>
		
			<line fill="none" stroke="#FFB98B" stroke-width="1.41732" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50.07605" y1="-26.78739" x2="50.86731" y2="-31.29224"/>
	</symbol>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M203.94801,167.49094c-3.74339,19-12.35976,31.58333-27.33333,38.58333c-14.97359,7-37.86415,10.58334-55.02139,10.58334h-0.62389
	c-17.15723,0-40.71447-3.91667-55.68806-10.91667s-22.92327-19.125-26.66666-38.125"/>
<path fill="#FFFFFF" d="M58.94801,203.15761c21,4.33333,90.33333,12.66666,107.66667,14.66666s-13.33334,20-13.33334,20
	l-99.66666-16C53.61468,221.82426,37.94801,198.82426,58.94801,203.15761z"/>
<path fill="none" stroke="#000000" stroke-width="2.83465" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M143.11469,56.1576c-14.5,25.5-59.50001,43.66667-79.16667,44.33333"/>
<path fill="none" stroke="#000000" stroke-width="2.83465" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M121.28134,59.49094c-13.66666,18-63,44.66666-77.33333,51.33334"/>
<path fill="none" stroke="#000000" stroke-width="2.83465" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M143.28134,57.1576c17,30.33333,53.83334,55.5,53.83334,55.5s17.83333,46.50001-0.83334,76.50001"/>
<path fill="none" stroke="#000000" stroke-width="2.8346.........完整代码请登录后点击上方下载按钮下载查看