這篇“如何使用CSS+jQuery實現一個文字轉語音機器人”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何使用CSS+jQuery實現一個文字轉語音機器人”文章吧。
創(chuàng)新互聯(lián)是一家專注于網站制作、成都做網站與策劃設計,站前網站建設哪家好?創(chuàng)新互聯(lián)做網站,專注于網站建設十多年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:站前等地區(qū)。站前做網站價格咨詢:13518219792
機器人眼睛
機器人樣式參考了下圖，通過css拼造型的方式進行實現。部分還原了設計圖
頭頂部分 頭頂部分是一個圓+偽類after實現白點
整體布局采用絕對定位布局 利用整個頭部，實現耳朵和眼睛的定位
立體效果 通過box-shadow 的inset特性，通過適當偏移x,y軸，實現內陰影的立體效果
box-shadow: -5px -5px 30px 1px #0075af inset;
文字轉語音實現
基于瀏覽器提供的SpeechSynthesisUtterance Api進行實現
SpeechSynthesisUtterance.lang 獲取并設置話語的語言
SpeechSynthesisUtterance.pitch 獲取并設置話語的音調(值越大越尖銳,越低越低沉)
SpeechSynthesisUtterance.rate 獲取并設置說話的速度(值越大語速越快,越小語速越慢)
SpeechSynthesisUtterance.text 獲取并設置說話時的文本
SpeechSynthesisUtterance.voice 獲取并設置說話的聲音
SpeechSynthesisUtterance.volume 獲取并設置說話的音量
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
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實現一個文字轉語音機器人”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
