鮮為人知的HTML5語音合成功能

聽一下就會(huì)發(fā)現(xiàn),播放出來的聲音并不是預(yù)先錄制好的音頻資料,而是通過文字識(shí)別后合成的語音
請先戴上耳機(jī),然后將下面的代碼復(fù)制到chrome控制臺(tái)中體驗(yàn)~
let msg = new SpeechSynthesisUtterance("歡迎你閱讀我的博客"); window.speechSynthesis.speak(msg);
看,前端實(shí)現(xiàn)語音合成并不難
今天的主角 Speech Synthesis API
通過上面的例子我們可以猜測到上面調(diào)用的兩個(gè)方法的功能
SpeechSyntehesisUtteranc window.speechSynthesis.speak
當(dāng)然了,語音合成不僅僅包含這兩個(gè)API,but我們先從這兩點(diǎn)入手
SpeechSyntehesisUtteranc
參考:developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc 對(duì)象包含了語音服務(wù)要讀取的內(nèi)容和一些參數(shù),比如語言,音高和音量
SpeechSyntehesisUtteranc() SpeechSynthesisUtterance.lang SpeechSynthesisUtterance.pitch SpeechSynthesisUtterance.rate SpeechSynthesisUtterance.voice SpeechSynthesisUtterance.volume
注意:以上屬性都是 可讀寫 的! 可以把下面這段代碼copy下來嘗試一下,注釋中會(huì)有說明
let msg = new SpeechSynthesisUtterance(); msg.text = "how are you" // 要合成的文本 msg.lang = "en-US" // 美式英語發(fā)音(默認(rèn)自動(dòng)選擇) msg.rate = 2 // 二倍速(默認(rèn)為 1,范圍 0.1~10) msg.pitch = 2 // 高音調(diào)(數(shù)字越大越尖銳,默認(rèn)為 1,范圍 0~2 ) msg.volume = 0.5 // 音量 0.5 倍(默認(rèn)為1,范圍 0~1) window.speechSynthesis.speak(msg);
同時(shí)這個(gè)對(duì)象還可以響應(yīng)一系列事件,可能會(huì)用到的:
- start
- end
- boundary
- pause
- resume
借助這些事件我們可以完成一些簡單的功能,比如英文句子的單詞數(shù)量統(tǒng)計(jì):
let count = 0; // 詞語數(shù)量 let msg = new SpeechSynthesisUtterance(); let synth = window.speechSynthesis; msg.addEventListener('start',()=>{ // 開始閱讀 console.log(`文本內(nèi)容: ${msg.text}`); console.log("start"); }); msg.addEventListener('end',()=>{ // 閱讀結(jié)束 console.log("end"); console.log(`文本單詞(詞語)數(shù)量:${count}`); count = 0; }); msg.addEventListener('boundary',()=>{ // 統(tǒng)計(jì)單詞 count++; });
經(jīng)過嘗試,由于中文沒有用空格將每個(gè)詞語分開,所以會(huì)進(jìn)行自動(dòng)的識(shí)別,比如 歡迎讀者 會(huì)被識(shí)別為 歡迎 和 讀者 兩個(gè)詞語
SpeechSynthesis
參考: developer.mozilla.org/en-US/docs/…
說完了 SpeechSyntehesisUtteranc 我們再來看看 SpeechSynthesis
SpeechSynthesis 的主要作用是對(duì)語音進(jìn)行一系列的控制,比如開始或者暫停
它有三個(gè)只讀屬性,表明了語音的狀態(tài):
SpeechSynthesis.paused SpeechSynthesis.pending
同時(shí)還有一系列方法用來操作語音:
•SpeechSynthesis.speak() 開始讀語音,同時(shí)觸發(fā) start 事件
•SpeechSynthesis.pause() 暫停,同時(shí)觸發(fā) pause 事件
•SpeechSynthesis.resume() 繼續(xù),同時(shí)觸發(fā) resume 事件
•SpeechSynthesis.cancel() 取消閱讀,同時(shí)觸發(fā) end 事件
基于這些操作方法,我們可以進(jìn)一步增強(qiáng)我們的文字閱讀器:
回到最初的起點(diǎn)
讓我們回到最初的起點(diǎn),我們可以基于上面的內(nèi)容猜測一下有些網(wǎng)站中,文章的自動(dòng)閱讀是怎么實(shí)現(xiàn)的
如果這個(gè)網(wǎng)站前端采用了 MVVM 框架(以 Vue 為例),那么文章內(nèi)容是也許存儲(chǔ)在 data 中,可以用來構(gòu)造我們需要的語音合成
當(dāng)然,也有可能文章是通過 ajax 請求得到的,解析請求的數(shù)據(jù),構(gòu)造語音合成對(duì)象
如果文章是直接在 html 中寫死的,這個(gè)時(shí)候就需要對(duì) DOM 進(jìn)行解析,經(jīng)過測試,即便是下面這樣的混亂的結(jié)構(gòu)
<div id="test"> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src="https://www.baidu.com/img/bd_logo1.png" alt=""> 9 </div>
直接通過 innerText 讀取其中的文本,然后構(gòu)造語音合成對(duì)象,也能按照期望順序閱讀(圖片會(huì)被忽略)
當(dāng)然如果我們想要忽略一些特殊的結(jié)構(gòu),比如表格,我們可以花一些精力在解析上,把我們不想要的數(shù)據(jù)或者 DOM 元素篩掉
不管怎樣,我們都能找到合適的解決方案~
閑話
這個(gè)特性,是一個(gè)還在草案中的特性,沒有被廣泛支持
再次強(qiáng)調(diào),這個(gè) API 暫時(shí)還不能應(yīng)用到生產(chǎn)環(huán)境中
目前比較通用的做法是在后端構(gòu)造將文本合成成語音文件的 API(也許是第三方 API),然后在前端作為媒體播放
曾經(jīng)在我迷茫的時(shí)候,我去閱讀一些大牛的文章,讀到一些前輩對(duì)前端開發(fā)的思考。其中有一點(diǎn)令我印象深刻:
前端是最貼近用戶的,一切要從用戶的的角度考慮,無障礙使用也是一個(gè)很重要的課題。雖然做這樣的功能帶來的收益遠(yuǎn)遠(yuǎn)小于其他業(yè)務(wù),但是為了讓產(chǎn)品更好的服務(wù)用戶,多付出一些勞動(dòng)也是值得的,這也是前端開發(fā)的一種精神
總結(jié)
以上所述是小編給大家介紹的鮮為人知的HTML5語音合成功能,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
HTML5實(shí)時(shí)語音通話聊天MP3壓縮傳輸3KB每秒
這篇文章主要介紹了HTML5實(shí)時(shí)語音通話聊天,MP3壓縮傳輸3KB每秒,需要的朋友可以參考下2019-08-28- 這篇文章主要介紹了使用Html5多媒體實(shí)現(xiàn)微信語音功能,需要的朋友可以參考下2019-07-26
- 這篇文章主要介紹了基于Html5實(shí)現(xiàn)的語音搜索功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下2019-05-13
HTML5為輸入框添加語音輸入功能的實(shí)現(xiàn)方法
本文給大家介紹如何使用html5為輸入框添加語音輸入功能,實(shí)現(xiàn)方法很簡單,需要的朋友參考下本文2017-02-06Jquery+html5可設(shè)置鬧鐘并且會(huì)語音提醒的時(shí)鐘特效源碼
Jquery+html5可設(shè)置鬧鐘并且會(huì)語音提醒的時(shí)鐘特效,功能實(shí)現(xiàn)非常簡單,推薦給大家。2015-08-27- 作為一個(gè)專業(yè)的淘寶控,不知道從什么時(shí)候開始發(fā)現(xiàn)淘寶上居然還有語音搜索,好吧,因?yàn)楹闷嫘淖魉钸€是想一探究竟,不過我想仔細(xì)一點(diǎn)的人,都會(huì)發(fā)現(xiàn)在只有在webkit內(nèi)核的瀏覽2014-03-18
- HTML5中有個(gè)語音識(shí)別的標(biāo)簽,利用它可以實(shí)現(xiàn)語音輸入,個(gè)人感覺還是不錯(cuò)的,下面有個(gè)示例及截圖,喜歡的朋友可以參考下2013-11-18
- 谷歌的網(wǎng)站是時(shí)逛時(shí)新啊,今天在他們首頁發(fā)現(xiàn)了HTML5的新玩法——語音搜索??上У氖侵挥衱ebkit核心的瀏覽器才能使用。用法很簡單,只需要在input添加屬性x-webkit-speech即2013-01-03
- 淘寶網(wǎng)的語音搜索也有了一陣子了,但似乎都沒看到相關(guān)的博客或帖子在說這個(gè)如何實(shí)現(xiàn),今天查了點(diǎn)資料,發(fā)現(xiàn)原來實(shí)現(xiàn)是如此簡單,感興趣的朋友可以參考下2013-01-03
- Html5支持語音搜索,可惜的是只有webkit核心的瀏覽器才能使用用法很簡單,只需要在input添加屬性x-webkit-speech即可,感興趣的朋友可以了解下2013-01-03