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

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!

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


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

Copy after login

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

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

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

Copy after login

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

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!