如何用JavaScript讓你的瀏覽器說話
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)
6. 總結
希望這篇文章足以讓你在瀏覽器裡面玩轉“合成語音”啦!你現在應該掌握瞭如何開始,停止和暫停語音,以及調整語音的速率,音調和音量。
以上就是如何用JavaScript讓你的瀏覽器說話的詳細內容,更多關於JavaScript的資料請關註WalkonNet其它相關文章!