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" width="52.8571" height="15.7143" x="317.1429" y="526.648" ry="5.0508" fill="#fc0"/><rect ry="5.0508" y="428.0765" x="365.7143" height="92.8571" width="14.2857" id="rect5427" fill="#fc0"/><rect ry="5.0508" y="508.0765" x="352.8571" height="15.7143" width="52.8571" id="rect5429" fill="#fc0"/></g><g id="layer6" transform="translate(-105.55 -167.73)" fill="#fc0"><path id="top-beak" d="M447.8572 235.2196a40.6063 28.0304 0 0 0-40.4328 25.628h80.8633a40.6063 28.0304 0 0 0-40.4305-25.628z"/><path id="bottom-beak"  d="M447.8548 288.0773a40.6063 28.0304 0 0 0 40.433-25.628h-80.8634a40.6063 28.0304 0 0 0 40.4304 25.628z"/></g><g id="layer7" transform="translate(-105.55 -167.73)"><path d="M387.8652 178.077a76.42 135.923 0 0 0-76.419 135.9222 76.42 135.923 0 0 0 1.0386 22.029 131.1688 66.8097 0 0 0-5.6014-.1433 131.1688 66.8097 0 0 0-131.1683 66.8098 131.1688 66.8097 0 0 0 131.1684 66.81 131.1688 66.8097 0 0 0 101..........完整代码请登录后点击上方下载按钮下载查看