本篇文章手把手带大家使用css+jquery实现一个文字转语音机器人，希望对大家有所帮助！
素材
机器人眼睛
【推荐学习：css视频教程、jQuery视频教程、web前端视频】
立即学习“前端免费学习笔记（深入）”；
页面布局
机器人样式参考了下图，通过css拼造型的方式进行实现。部分还原了设计图
头顶部分头顶部分是一个圆+伪类after实现白点
.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); }
整体布局采用绝对定位布局利用整个头部，实现耳朵和眼睛的定位
立体效果通过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输入框的值，并进行播放，添加眼睛动画，并在播放结束的回调移除眼睛动画
$('#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) })
动画类：
.shine { animation: shine 1s linear infinite; } @keyframes shine { 0%{ height: 100px; } 100%{ height: 0px; } }
完整代码：
HTML+CSS
* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; } .robot{ width: 658px; height:800px; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; } .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); } .gun{ width: 5px; height: 30px; background:#0075af ; position: absolute; left: 0; right: 0; top: 35px; margin: auto; } .gai{ width: 60px; height: 60px; background: #fff; box-shadow: -5px -5px 30px 1px #0075af inset; position: absolute; left: 0; right: 0; top: 65px; margin: auto; border-radius: 50%; } .head{ width: 370px; height: 350px; position: absolute; left: 0; right: 0; top: 95px; margin: auto; border-radius: 70px; background: #fff; box-shadow: -5px -5px 30px 1px #0075af inset; } .erduo{ width: 60px; height: 180px; background: #0022b0; position: absolute; top: 0; bottom: 0; margin: auto 0; border-radius: 60px; border-top: 4px solid #0e9df9; border-bottom: 4px solid #0e9df9; box-shadow: -5px -5px 30px 1px #0075af inset; } .erduo:nth-child(1) { border-left: 4px solid #0e9df9; left: -40px; } .erduo:nth-child(2){ border-right: 4px solid #0e9df9; right: -40px; box-shadow: -5px -5px 30px 1px #0075af inset; } .face{ width: 288px; height: 244px; background: #03192f; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 60px; box-shadow: -5px -5px 30px 1px #0075af inset; } .eye{ width: 30px; height: 100px; background-image: url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41c21816e3c740eaa43ade57de3eb5a5~tplv-k3u1fbpfcp-watermark.image'); background-size: contain; position: absolute; top: 0; bottom: 0; margin: auto; } .eye:nth-child(1){ left: 60px; } .eye:nth-child(2){ right: 60px; } .trans{ width:370px; position: absolute; display: flex; justify-content: center; align-items: center; color: #fff; left: 0; right: 0; margin: auto; top: 600px; font-size: 16px; } #input{ margin-right: 10px; background: transparent; border: none; outline: none; color: #fff; border-bottom: 1px dashed #fff; height: 40px; } #btn{ cursor: pointer; } .shine { animation: shine 1s linear infinite; } @keyframes shine { 0%{ height: 100px; } 100%{ height: 0px; } } 点击朗读
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) }) })
更多编程相关知识，请访问：编程教学！！
以上就是带你使用CSS+jQuery实现一个文字转语音机器人的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1624953.html
微信扫一扫 
支付宝扫一扫 
