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

This article will guide you step by step in using CSSjQueryto 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

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

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

• 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 theSpeechSynthesisUtteranceApi provided by the browser

SpeechSynthesisUtterance basic attributes

• ##SpeechSynthesisUtterance.langGet and set the language of the speech
• SpeechSynthesisUtterance.pitchGets and sets the pitch of the speech (the larger the value, the sharper it is, the lower the value, the deeper it is)
• SpeechSynthesisUtterance.rateGets and sets the speed of speaking (The larger the value, the faster the speech speed, the smaller the speech speed, the slower)
• SpeechSynthesisUtterance.textGet and set the text when speaking
• SpeechSynthesisUtterance.voiceGet and set the speaking voice
• SpeechSynthesisUtterance.volumeGet 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

       

        

        

        
 
 
 
 
 
 
 
       
       

        
        

         点击朗读
        
       

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!