Let you use CSS+jQuery to implement a text-to-speech robot-CSS Tutorial-php.cn

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

青灯夜游

Release： 2022-11-04 19:52:51

forward

2562 people have browsed it

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!

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

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

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

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

Copy after login

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>

Copy after login

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;

Copy after login

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

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

Copy after login

Animation class:

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

Copy after login

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>
  
  
    
    点击朗读

Copy after login

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

Copy after login

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!