带你使用CSS+jQuery实现一个文字转语音机器人-css教程-PHP中文网

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

青灯夜游

发布： 2022-11-04 19:52:51

转载

2909人浏览过

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

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

素材

机器人眼睛

【推荐学习：css视频教程、jQuery视频教程、web前端视频】

立即学习“前端免费学习笔记（深入）”；

页面布局

机器人样式参考了下图，通过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进行实现

Stable Diffusion

目前最强的开源AI绘画工具

查看详情

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



 
  
    
    
    
    <div class="head">
      <div class="erduo"></div>
      <div class="erduo"></div>
      <div class="face">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
    </div>
  
  
    
    点击朗读

登录后复制

 $(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)
    })
  })

登录后复制

更多编程相关知识，请访问：编程教学！！

以上就是带你使用CSS+jQuery实现一个文字转语音机器人的详细内容，更多请关注php中文网其它相关文章！