站長資訊網本篇文章手把手帶大家使用CSS+jQuery實現一個文字轉語音機器人，希望對大家有所幫助！
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
素材
-
機器人眼睛
【推薦學習：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
<style> * { 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; } } </style> <body> <div class="robot"> <div class="tianxian"></div> <div class="gun"></div> <div class="gai"></div> <div class="head"> <div class="erduo"></div> <div class="erduo"></div> <div class="face"> <div class="eye"></div> <div class="eye"></div> </div> </div> </div> <div class="trans"> <input id="input" type="text"> <div id="btn">點擊朗讀</div> </div> </body>
登錄后復制
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) }) })
登錄后復制
