13518219792

NEWS

网站建设资讯

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

这篇“如何使用CSS+jQuery实现一个文字转语音机器人”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何使用CSS+jQuery实现一个文字转语音机器人”文章吧。

创新互联是一家专注于网站制作、成都做网站与策划设计,站前网站建设哪家好?创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:站前等地区。站前做网站价格咨询:13518219792

素材

• 机器人眼睛

  

页面布局

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

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

 .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);   }

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

      

               

• 立体效果 通过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

 
  
    
    
    
    
      
      
      
        
        
      
    
  
  
    
    点击朗读
  

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

以上就是关于“如何使用CSS+jQuery实现一个文字转语音机器人”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。