1. 最簡(jiǎn)單的例子

讓我們來(lái)創(chuàng)建一個(gè)基礎(chǔ)函數(shù)，這個(gè)函數(shù)的參數(shù)為我們想說(shuō)的話或者詞，最后讓我們的瀏覽器說(shuō)出來(lái)。我們將利用在大多數(shù)現(xiàn)代瀏覽器上都可以使用的原生APIspeechSyntehsis。

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

// test
speak('hello world');

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

我們創(chuàng)建的speak()函數(shù)，該函數(shù)以詞句為參數(shù)。我們創(chuàng)建了一個(gè)發(fā)聲對(duì)象，他實(shí)際上是一個(gè)語(yǔ)言請(qǐng)求對(duì)象，其中包含了有關(guān)說(shuō)什么和如何說(shuō)相關(guān)的所有數(shù)據(jù)。

2. 自定義語(yǔ)速和音調(diào)

讓我們做一個(gè)稍微復(fù)雜一點(diǎn)的示例，嘗試修改說(shuō)出來(lái)的單詞的速度和音調(diào)。

/**
 * @param sentence：要說(shuō)的句子
 * @param pitch: 音調(diào)，取值范圍(0 - 2) 默認(rèn)值：1
 * @param rate: 語(yǔ)速，取值范圍(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)
}

在上面的示例中，我們基于原來(lái)函數(shù)增加了音調(diào)和語(yǔ)速2個(gè)參數(shù)。在我們創(chuàng)建了發(fā)聲對(duì)象之后，我們可以直接在發(fā)聲對(duì)象上直接修改某些屬性。但是，目前還不能通過(guò)構(gòu)造函數(shù)或者setter方法來(lái)修改。

pitch(音調(diào))是一個(gè)浮點(diǎn)數(shù)，取值范圍是0到2，默認(rèn)值是1。這個(gè)值的效果可能受到引擎或者聲音的限制。

rate(語(yǔ)速)是一個(gè)浮點(diǎn)數(shù)，取值范圍是0.1到10，默認(rèn)值是1。

現(xiàn)在，如果我們使用簡(jiǎn)單的句子調(diào)用上面的代碼，我們的瀏覽器就會(huì)以正常的語(yǔ)速和音調(diào)說(shuō)出下面的話：

speak('Hello world', 1, 1)

3. 怎么調(diào)整音量

我們也可以像調(diào)整音調(diào)和速度一樣調(diào)整音量，讓我們來(lái)快速了解一下如何實(shí)現(xiàn)

/**
 * @param sentence：要說(shuō)的句子
 * @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。

同樣，目前沒有辦法通過(guò)構(gòu)造函數(shù)或者setter方法來(lái)設(shè)置音量?，F(xiàn)在，我們給這個(gè)函數(shù)傳入自己想要的句子和音量就能聽到想要的結(jié)果了。

4. 常用的函數(shù)

speechSynthesis對(duì)象有一些可以派得上用場(chǎng)的函數(shù)。我們可以暫停、恢復(fù)、甚至取消語(yǔ)言的進(jìn)度。讓我們快速瀏覽一下：

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

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

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

我們也可以通過(guò)speechSynthesis對(duì)象上的paused屬性來(lái)直接判斷該段音頻是否被暫停，它將會(huì)返回一個(gè)布爾值來(lái)表示該段音頻是否被暫停了。

window.speechSynthesis.paused // Boolean

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

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í)，將會(huì)有兩段語(yǔ)音排隊(duì)，并且他們會(huì)按照順序播放。當(dāng)我們獲取pending屬性時(shí)，這個(gè)值將返回true，因?yàn)椋械诙握Z(yǔ)音在等待播放。

注意：如果你只有一段語(yǔ)音，這個(gè)pending屬性將會(huì)一直返回false，因?yàn)闆]有排隊(duì)等待播放的語(yǔ)音。

5. 事件監(jiān)聽

當(dāng)我們使用SpeechSynthesisUtteranceapi時(shí)，我們可以監(jiān)聽?zhēng)讉€(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)

6. 總結(jié)

希望這篇文章足以讓你在瀏覽器里面玩轉(zhuǎn)“合成語(yǔ)音”啦！你現(xiàn)在應(yīng)該掌握了如何開始，停止和暫停語(yǔ)音，以及調(diào)整語(yǔ)音的速率，音調(diào)和音量。

以上就是如何用JavaScript讓你的瀏覽器說(shuō)話的詳細(xì)內(nèi)容，更多關(guān)于JavaScript的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！