您好,登錄后才能下訂單哦!
這篇文章主要介紹怎么使用JavaScript讓你的瀏覽器說話,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
javascript是一種動態(tài)類型、弱類型的語言,基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言,同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能,現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器,如Node.js。
讓我們來創(chuàng)建一個(gè)基礎(chǔ)函數(shù),這個(gè)函數(shù)的參數(shù)為我們想說的話或者詞,最后讓我們的瀏覽器說出來。我們將利用在大多數(shù)現(xiàn)代瀏覽器上都可以使用的原生APIspeechSyntehsis。
function speak(sentence) { const utterance = new SpeechSynthesisUtterance(sentence) window.speechSynthesis.speak(utterance) } // test speak('hello world');
信不信由你,以上的代碼就是讓大部分瀏覽器說出一句話所需要的一切!讓我們來看看這里具體發(fā)生了什么。
我們創(chuàng)建的speak()函數(shù),該函數(shù)以詞句為參數(shù)。我們創(chuàng)建了一個(gè)發(fā)聲對象,他實(shí)際上是一個(gè)語言請求對象,其中包含了有關(guān)說什么和如何說相關(guān)的所有數(shù)據(jù)。
讓我們做一個(gè)稍微復(fù)雜一點(diǎn)的示例,嘗試修改說出來的單詞的速度和音調(diào)。
/** * @param sentence:要說的句子 * @param pitch: 音調(diào),取值范圍(0 - 2) 默認(rèn)值:1 * @param rate: 語速,取值范圍(0.1 - 10) 默認(rèn)值:1 */ function speak(sentence, pitch, rate) { const utterance = new SpeechSynthesisUtterance(sentence) utterance.rate = rate utterance.pitch = pitch window.speechSynthesis.speak(utterance) }
在上面的示例中,我們基于原來函數(shù)增加了音調(diào)和語速2個(gè)參數(shù)。在我們創(chuàng)建了發(fā)聲對象之后,我們可以直接在發(fā)聲對象上直接修改某些屬性。但是,目前還不能通過構(gòu)造函數(shù)或者setter方法來修改。
pitch(音調(diào))是一個(gè)浮點(diǎn)數(shù),取值范圍是0到2,默認(rèn)值是1。這個(gè)值的效果可能受到引擎或者聲音的限制。
rate(語速)是一個(gè)浮點(diǎn)數(shù),取值范圍是0.1到10,默認(rèn)值是1。
現(xiàn)在,如果我們使用簡單的句子調(diào)用上面的代碼,我們的瀏覽器就會以正常的語速和音調(diào)說出下面的話:
speak('Hello world', 1, 1)
我們也可以像調(diào)整音調(diào)和速度一樣調(diào)整音量,讓我們來快速了解一下如何實(shí)現(xiàn)
/** * @param sentence:要說的句子 * @param volume: 音量,取值范圍(0 - 1) 默認(rèn)值:0.5 */ function speak(sentence, volume) { const utterance = new SpeechSynthesisUtterance(sentence) utterance.volume = volume window.speechSynthesis.speak(utterance) }
修改之前的代碼,我們現(xiàn)在傳入音量參數(shù)。音量也是一個(gè)浮點(diǎn)數(shù),取值范圍0到1,默認(rèn)值是0.5。
同樣,目前沒有辦法通過構(gòu)造函數(shù)或者setter方法來設(shè)置音量?,F(xiàn)在,我們給這個(gè)函數(shù)傳入自己想要的句子和音量就能聽到想要的結(jié)果了。
speechSynthesis對象有一些可以派得上用場的函數(shù)。我們可以暫停、恢復(fù)、甚至取消語言的進(jìn)度。讓我們快速瀏覽一下:
const utterance = new SpeechSynthesisUtterance('Hello world'); window.speechSynthesis.speak(utterance); // 暫停 window.speechSynthesis.pause(); // 恢復(fù) window.speechSynthesis.resume(); // 取消 window.speechSynthesis.cancel();
上面的代碼將會說出我們想要的句子,并且這段語音會暫停、恢復(fù),最終取消。你也可以在你的瀏覽器里面試一試上面的代碼。
我們也可以通過speechSynthesis對象上的paused屬性來直接判斷該段音頻是否被暫停,它將會返回一個(gè)布爾值來表示該段音頻是否被暫停了。
window.speechSynthesis.paused // Boolean
如果還有一些積壓的等待讀出來的句子怎么辦?嗯,還有一個(gè)屬性pending,用來檢查是否有任何等待說出來的語音。它返回一個(gè)布爾值,指示是否有待處理的語音。
const utterThis = new SpeechSynthesisUtterance('Hello world'); const utterThat = new SpeechSynthesisUtterance('Hello JavaScript'); window.speechSynthesis.speak(utterThis); window.speechSynthesis.speak(utterThat); window.speechSynthesis.pending;
執(zhí)行上面的代碼時(shí),將會有兩段語音排隊(duì),并且他們會按照順序播放。當(dāng)我們獲取pending屬性時(shí),這個(gè)值將返回true,因?yàn)?,有第二段語音在等待播放。
注意:如果你只有一段語音,這個(gè)pending屬性將會一直返回false,因?yàn)闆]有排隊(duì)等待播放的語音。
當(dāng)我們使用SpeechSynthesisUtteranceapi時(shí),我們可以監(jiān)聽幾個(gè)比較有用的事件。讓我們一起看一下:
const utterance = new SpeechSynthesisUtterance('Hello world') utterance.addEventListener('start', () => console.log('Utterance start')) utterance.addEventListener('pause', () => console.log('Utterance paused')) utterance.addEventListener('resume', () => console.log('Utterance resumed')) utterance.addEventListener('end', () => console.log('Utterance end')) window.speechSynthesis.speak(utterance)
以上是“怎么使用JavaScript讓你的瀏覽器說話”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。