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

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

素材

机器人眼睛

页面布局

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

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

<div class="tianxian"></div>

.tianxian{
   width: 35px;
   height: 35px;
   border-radius: 50%;
   background: #0e58cc;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   margin: auto;
}
.tianxian::after{
   content: '';
   display: block;
   width: 5px;
   height: 10px;
   border-radius: 12px;
   background: #fff;
   position: absolute;
   top: 10px;
   left: 5px;
   transform: rotateZ(20deg);
}

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

<div class="head">
  <div class="erduo"></div>
  <div class="erduo"></div>
  <div class="face">
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
</div>

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

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输入框的值，并进行播放，添加眼睛动画，并在播放结束的回调移除眼睛动画

$('#btn').click(function () {
  let text = $('#input').val()
  if (text) {
    $('.eye').addClass('shine')
  }
  let u = new window.SpeechSynthesisUtterance()
  u.text = text
  u.lang = 'zh'
  u.rate = 0.7
  u.onend = function () {
    $('.eye').removeClass('shine')
  }
  speechSynthesis.speak(u)
})

动画类：

.shine {
 animation: shine 1s linear infinite;
}
@keyframes shine {
 0%{
   height: 100px;
 }
 100%{
   height: 0px;
 }
}

完整代码：

HTML+CSS

<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }
 
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
  }
  .robot{
    width: 658px;
    height:800px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
  }
  .tianxian{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #0e58cc;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
  }
  .tianxian::after{
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    border-radius: 12px;
    background: #fff;
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotateZ(20deg);
  }
  .gun{
    width: 5px;
    height: 30px;
    background:#0075af ;
    position: absolute;
    left: 0;
    right: 0;
    top: 35px;
    margin: auto;
  }
  .gai{
    width: 60px;
    height: 60px;
    background: #fff;
    box-shadow: -5px -5px 30px 1px #0075af inset;
    position: absolute;
    left: 0;
    right: 0;
    top: 65px;
    margin: auto;
    border-radius: 50%;
  }
  .head{
    width: 370px;
    height: 350px;
    position: absolute;
    left: 0;
    right: 0;
    top: 95px;
    margin: auto;
    border-radius: 70px;
    background: #fff;
    box-shadow: -5px -5px 30px 1px #0075af inset;
  }
  .erduo{
    width: 60px;
    height: 180px;
    background: #0022b0;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border-radius: 60px;
    border-top: 4px solid #0e9df9;
    border-bottom: 4px solid #0e9df9;
    box-shadow: -5px -5px 30px 1px #0075af inset;
  }
  .erduo:nth-child(1) {
    border-left: 4px solid #0e9df9;
    left: -40px;
  }
  .erduo:nth-child(2){
    border-right: 4px solid #0e9df9;
    right: -40px;
    box-shadow: -5px -5px 30px 1px #0075af inset;
  }
  .face{
    width: 288px;
    height: 244px;
    background: #03192f;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 60px;
    box-shadow: -5px -5px 30px 1px #0075af inset;
  }
  .eye{
    width: 30px;
    height: 100px;
    background-image: url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41c21816e3c740eaa43ade57de3eb5a5~tplv-k3u1fbpfcp-watermark.image');
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .eye:nth-child(1){
    left: 60px;
  }
  .eye:nth-child(2){
    right: 60px;
  }
  .trans{
    width:370px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    left: 0;
    right: 0;
    margin: auto;
    top:  600px;
    font-size: 16px;
  }
  #input{
    margin-right: 10px;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    border-bottom: 1px dashed #fff;
    height: 40px;
 
  }
  #btn{
    cursor: pointer;
  }
  .shine {
    animation: shine 1s linear infinite;
  }
  @keyframes shine {
    0%{
      height: 100px;
    }
    100%{
      height: 0px;
    }
  }
</style>
<body>
  
  <div class="robot">
    <div class="tianxian"></div>
    <div class="gun"></div>
    <div class="gai"></div>
    <div class="head">
      <div class="erduo"></div>
      <div class="erduo"></div>
      <div class="face">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
    </div>
  </div>
  <div class="trans">
    <input id="input" type="text">
    <div id="btn">点击朗读</div>
  </div>
</body>

js

$(function () {
 $('#btn').click(function () {
   let text = $('#input').val()
   if (text) {
     $('.eye').addClass('shine')
   }
   let u = new window.SpeechSynthesisUtterance()
   u.text = text
   u.lang = 'zh'
   u.rate = 0.7
   u.onend = function () {
     $('.eye').removeClass('shine')
   }
   speechSynthesis.speak(u)
 })
})