带你使用CSS+jQuery实现一个文字转语音机器人
原创本篇文章手把手带大家使用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: ''; 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输入框的值,并进行播放,添加眼睛动画,并在播放结束的回调移除眼睛动画
$('#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
<div class="head"> <div class="erduo"></div> <div class="erduo"></div> <div class="face"> <div class="eye"></div> <div class="eye"></div> </div> </div> 点击朗读
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实现一个文字转语音机器人的详细内容,更多请关注IT视界其它相关文章!