一、Web Speech 的概念及用法

在開發(fā)業(yè)務(wù)系統(tǒng)時，有時候可能需要使用語音播報(bào)一段文字。

目前文字轉(zhuǎn)語音即語音合成技術(shù)現(xiàn)在已經(jīng)很成熟了，像百度、訊飛等都提供了相關(guān)的服務(wù)，支持將文字轉(zhuǎn)換成各種形式的語音，通常這些服務(wù)都需要付費(fèi)使用，如果對語音要求不高，并且又想節(jié)約成本，那么可以直接使用瀏覽器的語音合成功能。

Web Speech API 使你能夠?qū)⒄Z音數(shù)據(jù)合并到 Web 應(yīng)用程序中。Web Speech API 有兩個部分：SpeechSynthesis 語音合成（文本到語音 TTS）和 SpeechRecognition 語音識別（異步語音識別）。

SpeechSynthesisUtterance是HTML5中新增的API，用于將指定文字合成為對應(yīng)的語音。它包含一些配置項(xiàng)，可以指定如何去閱讀（如語言、音量、音調(diào)等）。

Web Speech API 使 Web 應(yīng)用能夠處理語音數(shù)據(jù)，該項(xiàng) API 包含以下兩個部分：

• 語音識別通過 SpeechRecognition (en-US) 接口進(jìn)行訪問，它提供了識別從音頻輸入（通常是設(shè)備默認(rèn)的語音識別服務(wù)）中識別語音情景的能力。一般來說，你將使用該接口的構(gòu)造函數(shù)來構(gòu)造一個新的 SpeechRecognition (en-US) 對象，該對象包含了一系列有效的對象處理函數(shù)來檢測識別設(shè)備麥克風(fēng)中的語音輸入。SpeechGrammar 接口則表示了你應(yīng)用中想要識別的特定文法。文法則通過 JSpeech Grammar Format (JSGF.) 來定義。
• 語音合成通過 SpeechSynthesis 接口進(jìn)行訪問，它提供了文字到語音（TTS）的能力，這使得程序能夠讀出它們的文字內(nèi)容（通常使用設(shè)備默認(rèn)的語音合成器）。不同的聲音類類型通過 SpeechSynthesisVoice (en-US) 對象進(jìn)行表示，不同部分的文字則由 SpeechSynthesisUtterance (en-US) 對象來表示。你可以將它們傳遞給 SpeechSynthesis.speak() (en-US) 方法來產(chǎn)生語音。

二、Web Speech 的 API 接口

1、SpeechSynthesis

SpeechSynthesis是語音服務(wù)的控制接口；它可以用于獲取設(shè)備上關(guān)于可用的合成聲音的信息，開始、暫停語音，或除此之外的其他命令。

屬性

SpeechSynthesis.paused 只讀
當(dāng)SpeechSynthesis 處于暫停狀態(tài)時， Boolean 值返回 true 。

SpeechSynthesis.pending 只讀
當(dāng)語音播放隊(duì)列到目前為止保持沒有說完的語音時， Boolean 值返回 true 。

SpeechSynthesis.speaking 只讀
當(dāng)語音談話正在進(jìn)行的時候，即使SpeechSynthesis處于暫停狀態(tài)， Boolean 返回 true 。

方法

SpeechSynthesis.cancel()
取消語音播放。

SpeechSynthesis.getVoices()
返回當(dāng)前設(shè)備所有可用聲音的 SpeechSynthesisVoice列表。

SpeechSynthesis.pause()
把 SpeechSynthesis 暫停語音播放。

SpeechSynthesis.resume()
把 SpeechSynthesis 對象置為一個非暫停狀態(tài)：如果已經(jīng)暫停了則繼續(xù)。

SpeechSynthesis.speak()
添加語音到播放列隊(duì)，將會在其他語音播放完后自動播放。

2、SpeechSynthesisUtterance

SpeechSynthesisUtterance 表示一次發(fā)音請求，其中包含了將由語音服務(wù)朗讀的內(nèi)容，以及如何朗讀它（例如：語種、音高、音量）。

屬性

lang：獲取并設(shè)置話語的語言
pitch：獲取并設(shè)置話語的音調(diào)（0-2，值越大越尖銳，越低越低沉）
rate：獲取并設(shè)置說話的速度（0.1-10，值越大語速越快，越小語速越慢）
text：獲取并設(shè)置說話時的文本
voice：獲取并設(shè)置說話的聲音（0-1）
volume：獲取并設(shè)置說話的音量

方法

onboundary：當(dāng)播放至一個詞或句子結(jié)尾時觸發(fā)
onend：語音播放結(jié)束時觸發(fā)
onerror：語音播放錯誤時觸發(fā)
onmark：當(dāng)語音播放至 mark 標(biāo)記時觸發(fā)
onpause：暫停語音播放時觸發(fā)
onresume：恢復(fù)語音播放時觸發(fā)
onstart：開始語音播放時觸發(fā)

三、Web Speech 的 用法

用法演示一

let synth = window.speechSynthesis;
let utterThis = new SpeechSynthesisUtterance('支付寶到賬5元');
synth.speak(utterThis);

用法演示二 html

<input type="text" name="text" id="text">
<button onclick="startAudio()">播放語音</button>

js

function startAudio() {
	// 檢查瀏覽器是否支持Web Speech API  
	if ('speechSynthesis' in window) {  
	    let input = document.getElementById('text')
		// 創(chuàng)建一個新的SpeechSynthesisUtterance對象 
	    let msg = new SpeechSynthesisUtterance(input.value)
	    msg.volume = 5 //音量
	    msg.rate = 1 //語速
	    msg.text = input.value //文字
	    speechSynthesis.speak(msg) //播放語音
	} else {  
	    console.error('瀏覽器不支持Web Speech API');  
	}
}

這個示例會使用默認(rèn)的語音合成引擎（如果有的話）將"輸入框的內(nèi)容"轉(zhuǎn)換為語音。如果瀏覽器支持Web Speech API，你應(yīng)該能夠聽到這句話被讀出來。如果瀏覽器不支持Web Speech API，這個示例會在控制臺輸出一條錯誤消息。

四、擴(kuò)展

除了使用Web Speech API之外，還有使用第三方文字轉(zhuǎn)語音（TTS）庫的方法，例如使用百度文字轉(zhuǎn)語音開放API或iSpeech TTS引擎。

使用百度文字轉(zhuǎn)語音開放API的方法需要調(diào)用其提供的接口，傳入要轉(zhuǎn)換的文字，并設(shè)置語言、語速等參數(shù)。使用iSpeech TTS引擎則需要引入相應(yīng)的JavaScript庫，并使用其提供的API將文字轉(zhuǎn)換為語音。

此外，還可以使用瀏覽器自帶的語音助手或插件來實(shí)現(xiàn)文字轉(zhuǎn)語音的功能，例如Siri、Alexa等。這些工具通常需要用戶進(jìn)行一些設(shè)置和配置，以便能夠正確地將文字轉(zhuǎn)換為語音。

百度文字轉(zhuǎn)語音開放API的調(diào)用示例代碼如下：

var text = '你好，世界！'; // 要轉(zhuǎn)換為語音的文本  
var apikey = '你的API密鑰'; // 百度提供的API密鑰  
var params = {  
    text: text,  
    apikey: apikey,  
    engine: 'paddle', // 選擇語音合成引擎，支持'paddle'和'deepizone'兩種引擎  
    voice: 'zh_cn', // 選擇語音類型，支持'zh_cn'和'en'兩種類型  
    speed: 5, // 語速，取值范圍為0-10，數(shù)字越大語速越快  
    vol: 5, // 音量，取值范圍為0-10，數(shù)字越大音量越大  
    per: 0 // 音色，取值范圍為0-19，不同數(shù)字代表不同音色  
};  
var url = 'http://tts.baidu.com/text2audio?' + $.param(params); // 將參數(shù)拼接成URL  
$.get(url, function(response) { // 發(fā)送GET請求獲取語音數(shù)據(jù)  
    var audio = new Audio(response); // 創(chuàng)建Audio對象并播放語音  
    audio.play();  
});

到此這篇關(guān)于利用Web Speech API之speechSynthesis實(shí)現(xiàn)文字轉(zhuǎn)語音功能的文章就介紹到這了,更多相關(guān)Web Speech API文字轉(zhuǎn)語音內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論