如何使用CSS+jQuery實(shí)現(xiàn)一個(gè)文字轉(zhuǎn)語(yǔ)音機(jī)器人

這篇“如何使用CSS+jQuery實(shí)現(xiàn)一個(gè)文字轉(zhuǎn)語(yǔ)音機(jī)器人”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“如何使用CSS+jQuery實(shí)現(xiàn)一個(gè)文字轉(zhuǎn)語(yǔ)音機(jī)器人”文章吧。

素材

• 機(jī)器人眼睛

  
  

頁(yè)面布局

機(jī)器人樣式參考了下圖，通過(guò)css拼造型的方式進(jìn)行實(shí)現(xiàn)。部分還原了設(shè)計(jì)圖

• 頭頂部分 頭頂部分是一個(gè)圓+偽類(lèi)after實(shí)現(xiàn)白點(diǎn)

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

整體布局采用絕對(duì)定位布局 利用整個(gè)頭部，實(shí)現(xiàn)耳朵和眼睛的定位

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

• 立體效果 通過(guò)box-shadow 的inset特性，通過(guò)適當(dāng)偏移x,y軸，實(shí)現(xiàn)內(nèi)陰影的立體效果

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

• 文字轉(zhuǎn)語(yǔ)音實(shí)現(xiàn)

基于瀏覽器提供的SpeechSynthesisUtterance Api進(jìn)行實(shí)現(xiàn)

SpeechSynthesisUtterance基本屬性

• SpeechSynthesisUtterance.lang 獲取并設(shè)置話語(yǔ)的語(yǔ)言

• SpeechSynthesisUtterance.pitch 獲取并設(shè)置話語(yǔ)的音調(diào)(值越大越尖銳,越低越低沉)

• SpeechSynthesisUtterance.rate 獲取并設(shè)置說(shuō)話的速度(值越大語(yǔ)速越快,越小語(yǔ)速越慢)

• SpeechSynthesisUtterance.text 獲取并設(shè)置說(shuō)話時(shí)的文本

• SpeechSynthesisUtterance.voice 獲取并設(shè)置說(shuō)話的聲音

• SpeechSynthesisUtterance.volume 獲取并設(shè)置說(shuō)話的音量

SpeechSynthesisUtterance.text基本方法

• speak() 將對(duì)應(yīng)的實(shí)例添加到語(yǔ)音隊(duì)列中

• cancel() 刪除隊(duì)列中所有的語(yǔ)音.如果正在播放,則直接停止

• pause() 暫停語(yǔ)音

• resume() 恢復(fù)暫停的語(yǔ)音

為按鈕添加點(diǎn)擊事件，獲取input輸入框的值，并進(jìn)行播放，添加眼睛動(dòng)畫(huà)，并在播放結(jié)束的回調(diào)移除眼睛動(dòng)畫(huà)

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

動(dòng)畫(huà)類(lèi)：

 .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">點(diǎn)擊朗讀</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)
    })
  })

以上就是關(guān)于“如何使用CSS+jQuery實(shí)現(xiàn)一個(gè)文字轉(zhuǎn)語(yǔ)音機(jī)器人”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。