带你使用CSS+jQuery实现一个文字转语音机器人

ID:13053 / 打印

本篇文章手把手带大家使用css+jquery实现一个文字转语音机器人，希望对大家有所帮助！

素材

机器人眼睛

【推荐学习：css视频教程、jQuery视频教程、web前端视频】

立即学习“前端免费学习笔记（深入）”；

页面布局

机器人样式参考了下图，通过css拼造型的方式进行实现。部分还原了设计图

头顶部分头顶部分是一个圆+伪类after实现白点

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

整体布局采用绝对定位布局利用整个头部，实现耳朵和眼睛的定位

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

立体效果通过box-shadow 的inset特性，通过适当偏移x,y轴，实现内阴影的立体效果

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

文字转语音实现

基于浏览器提供的SpeechSynthesisUtterance Api进行实现

SpeechSynthesisUtterance基本属性

SpeechSynthesisUtterance.lang 获取并设置话语的语言
SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
SpeechSynthesisUtterance.text 获取并设置说话时的文本
SpeechSynthesisUtterance.voice 获取并设置说话的声音
SpeechSynthesisUtterance.volume 获取并设置说话的音量

SpeechSynthesisUtterance.text基本方法

speak() 将对应的实例添加到语音队列中
cancel() 删除队列中所有的语音.如果正在播放,则直接停止
pause() 暂停语音
resume() 恢复暂停的语音

为按钮添加点击事件，获取input输入框的值，并进行播放，添加眼睛动画，并在播放结束的回调移除眼睛动画

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

动画类：

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

完整代码：

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

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

更多编程相关知识，请访问：编程教学！！

上一篇: 巧用纯CSS实现鼠标点击拖拽效果，让交互更加生动！

下一篇: 【整理总结】这些高级CSS技巧，你会几种？

作者：admin @ 24资源网 2024-10-18

本站所有软件、源码、文章均有网友提供，如有侵权联系308410122@qq.com