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"/>
<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&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0