带你使用CSS+jQuery实现一个文字转语音机器人

 2672

本篇文章手把手带大家使用CSS+jQuery实现一个文字转语音机器人,希望对大家有所帮助!


带你使用CSS+jQuery实现一个文字转语音机器人


素材

机器人眼睛


带你使用CSS+jQuery实现一个文字转语音机器人


页面布局

机器人样式参考了下图,通过css拼造型的方式进行实现。部分还原了设计图


带你使用CSS+jQuery实现一个文字转语音机器人


头顶部分 头顶部分是一个圆+伪类after实现白点

  1. <div class="tianxian"></div>
  1. .tianxian{
  2.    width: 35px;
  3.    height: 35px;
  4.    border-radius: 50%;
  5.    background: #0e58cc;
  6.    position: absolute;
  7.    left: 0;
  8.    right: 0;
  9.    top: 0;
  10.    margin: auto;
  11. }
  12. .tianxian::after{
  13.    content: '';
  14.    display: block;
  15.    width: 5px;
  16.    height: 10px;
  17.    border-radius: 12px;
  18.    background: #fff;
  19.    position: absolute;
  20.    top: 10px;
  21.    left: 5px;
  22.    transform: rotateZ(20deg);
  23. }

整体布局采用绝对定位布局 利用整个头部,实现耳朵和眼睛的定位

  1. <div class="head">
  2.   <div class="erduo"></div>
  3.   <div class="erduo"></div>
  4.   <div class="face">
  5.     <div class="eye"></div>
  6.     <div class="eye"></div>
  7.   </div>
  8. </div>

立体效果 通过box-shadow 的inset特性,通过适当偏移x,y轴,实现内阴影的立体效果

  1. box-shadow: -5px -5px 30px 1px #0075af inset;

文字转语音实现

基于浏览器提供的SpeechSynthesisUtterance Api进行实现

SpeechSynthesisUtterance基本属性

SpeechSynthesisUtterance.lang 获取并设置话语的语言

SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)

SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)

SpeechSynthesisUtterance.text 获取并设置说话时的文本

SpeechSynthesisUtterance.voice 获取并设置说话的声音

SpeechSynthesisUtterance.volume 获取并设置说话的音量

SpeechSynthesisUtterance.text基本方法

speak() 将对应的实例添加到语音队列中

cancel() 删除队列中所有的语音.如果正在播放,则直接停止

pause() 暂停语音

resume() 恢复暂停的语音

为按钮添加点击事件,获取input输入框的值,并进行播放,添加眼睛动画,并在播放结束的回调移除眼睛动画

  1. $('#btn').click(function () {
  2.   let text = $('#input').val()
  3.   if (text) {
  4.     $('.eye').addClass('shine')
  5.   }
  6.   let u = new window.SpeechSynthesisUtterance()
  7.   u.text = text
  8.   u.lang = 'zh'
  9.   u.rate = 0.7
  10.   u.onend = function () {
  11.     $('.eye').removeClass('shine')
  12.   }
  13.   speechSynthesis.speak(u)
  14. })

动画类:

  1. .shine {
  2.  animation: shine 1s linear infinite;
  3. }
  4. @keyframes shine {
  5.  0%{
  6.    height: 100px;
  7.  }
  8.  100%{
  9.    height: 0px;
  10.  }
  11. }

 

完整代码:

HTML+CSS

  1. <style>
  2.   * {
  3.     margin: 0;
  4.     padding: 0;
  5.     list-style: none;
  6.     box-sizing: border-box;
  7.   }
  8.  
  9.   html,
  10.   body {
  11.     width: 100%;
  12.     height: 100%;
  13.     overflow: hidden;
  14.     background: #000;
  15.   }
  16.   .robot{
  17.     width: 658px;
  18.     height:800px;
  19.     position: absolute;
  20.     left: 0;
  21.     right: 0;
  22.     margin: auto;
  23.     top: 0;
  24.     bottom: 0;
  25.   }
  26.   .tianxian{
  27.     width: 35px;
  28.     height: 35px;
  29.     border-radius: 50%;
  30.     background: #0e58cc;
  31.     position: absolute;
  32.     left: 0;
  33.     right: 0;
  34.     top: 0;
  35.     margin: auto;
  36.   }
  37.   .tianxian::after{
  38.     content: '';
  39.     display: block;
  40.     width: 5px;
  41.     height: 10px;
  42.     border-radius: 12px;
  43.     background: #fff;
  44.     position: absolute;
  45.     top: 10px;
  46.     left: 5px;
  47.     transform: rotateZ(20deg);
  48.   }
  49.   .gun{
  50.     width: 5px;
  51.     height: 30px;
  52.     background:#0075af ;
  53.     position: absolute;
  54.     left: 0;
  55.     right: 0;
  56.     top: 35px;
  57.     margin: auto;
  58.   }
  59.   .gai{
  60.     width: 60px;
  61.     height: 60px;
  62.     background: #fff;
  63.     box-shadow: -5px -5px 30px 1px #0075af inset;
  64.     position: absolute;
  65.     left: 0;
  66.     right: 0;
  67.     top: 65px;
  68.     margin: auto;
  69.     border-radius: 50%;
  70.   }
  71.   .head{
  72.     width: 370px;
  73.     height: 350px;
  74.     position: absolute;
  75.     left: 0;
  76.     right: 0;
  77.     top: 95px;
  78.     margin: auto;
  79.     border-radius: 70px;
  80.     background: #fff;
  81.     box-shadow: -5px -5px 30px 1px #0075af inset;
  82.   }
  83.   .erduo{
  84.     width: 60px;
  85.     height: 180px;
  86.     background: #0022b0;
  87.     position: absolute;
  88.     top: 0;
  89.     bottom: 0;
  90.     margin: auto 0;
  91.     border-radius: 60px;
  92.     border-top: 4px solid #0e9df9;
  93.     border-bottom: 4px solid #0e9df9;
  94.     box-shadow: -5px -5px 30px 1px #0075af inset;
  95.   }
  96.   .erduo:nth-child(1) {
  97.     border-left: 4px solid #0e9df9;
  98.     left: -40px;
  99.   }
  100.   .erduo:nth-child(2){
  101.     border-right: 4px solid #0e9df9;
  102.     right: -40px;
  103.     box-shadow: -5px -5px 30px 1px #0075af inset;
  104.   }
  105.   .face{
  106.     width: 288px;
  107.     height: 244px;
  108.     background: #03192f;
  109.     position: absolute;
  110.     left: 0;
  111.     right: 0;
  112.     top: 0;
  113.     bottom: 0;
  114.     margin: auto;
  115.     border-radius: 60px;
  116.     box-shadow: -5px -5px 30px 1px #0075af inset;
  117.   }
  118.   .eye{
  119.     width: 30px;
  120.     height: 100px;
  121.     background-image: url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41c21816e3c740eaa43ade57de3eb5a5~tplv-k3u1fbpfcp-watermark.image');
  122.     background-size: contain;
  123.     position: absolute;
  124.     top: 0;
  125.     bottom: 0;
  126.     margin: auto;
  127.   }
  128.   .eye:nth-child(1){
  129.     left: 60px;
  130.   }
  131.   .eye:nth-child(2){
  132.     right: 60px;
  133.   }
  134.   .trans{
  135.     width:370px;
  136.     position: absolute;
  137.     display: flex;
  138.     justify-content: center;
  139.     align-items: center;
  140.     color: #fff;
  141.     left: 0;
  142.     right: 0;
  143.     margin: auto;
  144.     top:  600px;
  145.     font-size: 16px;
  146.   }
  147.   #input{
  148.     margin-right: 10px;
  149.     background: transparent;
  150.     border: none;
  151.     outline: none;
  152.     color: #fff;
  153.     border-bottom: 1px dashed #fff;
  154.     height: 40px;
  155.  
  156.   }
  157.   #btn{
  158.     cursor: pointer;
  159.   }
  160.   .shine {
  161.     animation: shine 1s linear infinite;
  162.   }
  163.   @keyframes shine {
  164.     0%{
  165.       height: 100px;
  166.     }
  167.     100%{
  168.       height: 0px;
  169.     }
  170.   }
  171. </style>
  172. <body>
  173.   
  174.   <div class="robot">
  175.     <div class="tianxian"></div>
  176.     <div class="gun"></div>
  177.     <div class="gai"></div>
  178.     <div class="head">
  179.       <div class="erduo"></div>
  180.       <div class="erduo"></div>
  181.       <div class="face">
  182.         <div class="eye"></div>
  183.         <div class="eye"></div>
  184.       </div>
  185.     </div>
  186.   </div>
  187.   <div class="trans">
  188.     <input id="input" type="text">
  189.     <div id="btn">点击朗读</div>
  190.   </div>
  191. </body>

js

  1. $(function () {
  2.  $('#btn').click(function () {
  3.    let text = $('#input').val()
  4.    if (text) {
  5.      $('.eye').addClass('shine')
  6.    }
  7.    let u = new window.SpeechSynthesisUtterance()
  8.    u.text = text
  9.    u.lang = 'zh'
  10.    u.rate = 0.7
  11.    u.onend = function () {
  12.      $('.eye').removeClass('shine')
  13.    }
  14.    speechSynthesis.speak(u)
  15.  })
  16. })


本文网址:https://www.zztuku.com/detail-13281.html
站长图库 - 带你使用CSS+jQuery实现一个文字转语音机器人
申明:本文转载于《掘金社区》,如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐

    Js文件上传前的预览和删除