怎么使用JavaScript讓你的瀏覽器說話

這篇文章主要介紹怎么使用JavaScript讓你的瀏覽器說話，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

javascript是一種什么語言

javascript是一種動態類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言，同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能，現在JavaScript也可被用于網絡服務器，如Node.js。

1. 最簡單的例子

讓我們來創建一個基礎函數，這個函數的參數為我們想說的話或者詞，最后讓我們的瀏覽器說出來。我們將利用在大多數現代瀏覽器上都可以使用的原生APIspeechSyntehsis。

function speak(sentence) {
    const utterance = new SpeechSynthesisUtterance(sentence)
    window.speechSynthesis.speak(utterance)
}

// test
speak('hello world');

信不信由你，以上的代碼就是讓大部分瀏覽器說出一句話所需要的一切！讓我們來看看這里具體發生了什么。

我們創建的speak()函數，該函數以詞句為參數。我們創建了一個發聲對象，他實際上是一個語言請求對象，其中包含了有關說什么和如何說相關的所有數據。

2. 自定義語速和音調

讓我們做一個稍微復雜一點的示例，嘗試修改說出來的單詞的速度和音調。

/**
 * @param sentence：要說的句子
 * @param pitch: 音調，取值范圍(0 - 2) 默認值：1
 * @param rate: 語速，取值范圍(0.1 - 10) 默認值：1
 */
function speak(sentence, pitch, rate) {
    const utterance = new SpeechSynthesisUtterance(sentence)

    utterance.rate = rate
    utterance.pitch = pitch

    window.speechSynthesis.speak(utterance)
}

在上面的示例中，我們基于原來函數增加了音調和語速2個參數。在我們創建了發聲對象之后，我們可以直接在發聲對象上直接修改某些屬性。但是，目前還不能通過構造函數或者setter方法來修改。

pitch(音調)是一個浮點數，取值范圍是0到2，默認值是1。這個值的效果可能受到引擎或者聲音的限制。

rate(語速)是一個浮點數，取值范圍是0.1到10，默認值是1。

現在，如果我們使用簡單的句子調用上面的代碼，我們的瀏覽器就會以正常的語速和音調說出下面的話：

speak('Hello world', 1, 1)

3. 怎么調整音量

我們也可以像調整音調和速度一樣調整音量，讓我們來快速了解一下如何實現

/**
 * @param sentence：要說的句子
 * @param volume: 音量，取值范圍(0 - 1) 默認值：0.5
 */
function speak(sentence, volume) {
    const utterance = new SpeechSynthesisUtterance(sentence)

    utterance.volume = volume

    window.speechSynthesis.speak(utterance)
}

修改之前的代碼，我們現在傳入音量參數。音量也是一個浮點數，取值范圍0到1，默認值是0.5。

同樣，目前沒有辦法通過構造函數或者setter方法來設置音量。現在，我們給這個函數傳入自己想要的句子和音量就能聽到想要的結果了。

4. 常用的函數

speechSynthesis對象有一些可以派得上用場的函數。我們可以暫停、恢復、甚至取消語言的進度。讓我們快速瀏覽一下：

const utterance = new SpeechSynthesisUtterance('Hello world');
window.speechSynthesis.speak(utterance);

// 暫停 
window.speechSynthesis.pause();
// 恢復
window.speechSynthesis.resume();
// 取消
window.speechSynthesis.cancel();

上面的代碼將會說出我們想要的句子，并且這段語音會暫停、恢復，最終取消。你也可以在你的瀏覽器里面試一試上面的代碼。

我們也可以通過speechSynthesis對象上的paused屬性來直接判斷該段音頻是否被暫停，它將會返回一個布爾值來表示該段音頻是否被暫停了。

window.speechSynthesis.paused // Boolean

如果還有一些積壓的等待讀出來的句子怎么辦？嗯，還有一個屬性pending，用來檢查是否有任何等待說出來的語音。它返回一個布爾值，指示是否有待處理的語音。

const utterThis = new SpeechSynthesisUtterance('Hello world');
const utterThat = new SpeechSynthesisUtterance('Hello JavaScript');

window.speechSynthesis.speak(utterThis);
window.speechSynthesis.speak(utterThat);
window.speechSynthesis.pending;

執行上面的代碼時，將會有兩段語音排隊，并且他們會按照順序播放。當我們獲取pending屬性時，這個值將返回true，因為，有第二段語音在等待播放。

注意：如果你只有一段語音，這個pending屬性將會一直返回false，因為沒有排隊等待播放的語音。

5. 事件監聽

當我們使用SpeechSynthesisUtteranceapi時，我們可以監聽幾個比較有用的事件。讓我們一起看一下：

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讓你的瀏覽器說話”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！