Let you use CSS+jQuery to implement a text-to-speech robot

This article will guide you step by step in using CSS jQuery to implement a text-to-speech robot. I hope it will be helpful to everyone!

Material

• Robot eyes

  
  

【Recommended learning: css video tutorial, jQuery video tutorial, web front-end video】

Page layout

The robot style refers to the picture below and is implemented through CSS styling. Partially restored the top part of the design

• The top part of the head is a circle. The pseudo-class after implements the white point

 <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: &#39;&#39;;
    display: block;
    width: 5px;
    height: 10px;
    border-radius: 12px;
    background: #fff;
    position: absolute;
    top: 10px;
    left: 5px;
    transform: rotateZ(20deg);
  }

The overall layout adopts absolute positioning layout Use the entire head to achieve the positioning of ears and eyes

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

• three-dimensional effect Through the inset feature of box-shadow, by appropriately offsetting the x and y axes, the three-dimensional effect of the inner shadow is achieved

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

• Text-to-speech implementation

Based on Implemented by the SpeechSynthesisUtterance Api provided by the browser

SpeechSynthesisUtterance basic attributes

• ##SpeechSynthesisUtterance.lang Get and set the language of the speech
• SpeechSynthesisUtterance.pitch Gets and sets the pitch of the speech (the larger the value, the sharper it is, the lower the value, the deeper it is)
• SpeechSynthesisUtterance.rate Gets and sets the speed of speaking (The larger the value, the faster the speech speed, the smaller the speech speed, the slower)
• SpeechSynthesisUtterance.text Get and set the text when speaking
• SpeechSynthesisUtterance.voice Get and set the speaking voice
• SpeechSynthesisUtterance.volume Get and set the speaking volume

SpeechSynthesisUtterance.textBasic method

• speak() Add the corresponding instance to the voice queue
• cancel() Delete all voices in the queue. If it is playing, stop it directly
• pause() Pause the voice
• resume() Resume the paused voice

Add a click event for the button , get the value of the input box, play it, add eye animation, and remove the eye animation in the callback at the end of playback

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

Animation class:

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

Full code:

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>
  
  

    
    
点击朗读
  

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

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of Let you use CSS+jQuery to implement a text-to-speech robot. For more information, please follow other related articles on the PHP Chinese website!