SpeechSynthesisUtteranc+SpeechRecognition实现鹦鹉学舌模仿你说话的布谷鸟代码-html代码-BFW代码库

SpeechSynthesisUtteranc+SpeechRecognition实现鹦鹉学舌模仿你说话的布谷鸟代码

代码语言：html

所属分类：其他

代码描述：SpeechSynthesisUtteranc+SpeechRecognition实现鹦鹉学舌模仿你说话的布谷鸟代码

代码标签： SpeechSynthesisUtteranc SpeechRecognition 鹦鹉学舌模仿

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

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

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


  
  
<style>
html {
  font-size: 10px;
}
      
body {
  background: #f5f8fa;
  font-family: 'helvetica neue', sans-serif;
  font-weight: 200;
  font-size: 20px;
  margin: 10px;
}
      
.words {
  max-width: 500px;
  margin: 0px auto;
  background: white;
  border-radius: 5px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 1rem 2rem 1rem 5rem;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
  background-size: 100% 3rem;
  position: relative;
  line-height: 3rem;
}
      
p {
  margin: 0 0 3rem 0;
}
      
.words:before {
  content: '';
  position: absolute;
  width: 4px;
  top: 0;
  left: 30px;
  bottom: 0;
  border: 1px solid;
  border-color: transparent #efe4e4;
}
      
.header {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}
      
#parrot {
  width: 40%;
  height: 40%;
  margin: 0;
  padding: 0;
}
      
.page-title {
  color: #777;
  font-size: 1.5em;
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>


  
</head>

<body>
  <div class="header">
  <svg xmlns="http://www.w3.org/2000/svg" width="108.0174mm" height="105.7293mm" viewBox="0 0 382.73871 374.63157" id="parrot"><g id="layer1" transform="translate(-105.55 -167.73)"><ellipse id="path5411" cx="394.7404" cy="96.7592" rx="50" ry="10.7143" transform="rotate(13)" fill="#9f5"/><ellipse id="path5413" cx="70.5797" cy="405.1615" rx="55.7143" ry="12.8571" transform="rotate(-13)" fill="#9f5"/><ellipse id="path5415" cx="35.7923" cy="438.4525" rx="45" ry="11.4286" transform="rotate(-18)" fill="#9f5"/><ellipse id="path5417" cx="-19.3367" cy="473.0833" rx="35.7143" ry="11.4286" transform="rotate(-26)" fill="#9f5"/><rect id="rect5419" width="14.2857" height="92.8571" x="330" y="446.6479" ry="5.0508" fill="#fc0"/><rect id="rect5421" wi.........完整代码请登录后点击上方下载按钮下载查看