一、Web Speech 的概念及用法

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

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

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

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

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

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

二、Web Speech 的 API 接口

1、SpeechSynthesis

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

屬性

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

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

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

方法

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

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

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

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

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

2、SpeechSynthesisUtterance

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

屬性

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

方法

onboundary：當(dāng)播放至一個(gè)詞或句子結(jié)尾時(shí)觸發(fā)
onend：語(yǔ)音播放結(jié)束時(shí)觸發(fā)
onerror：語(yǔ)音播放錯(cuò)誤時(shí)觸發(fā)
onmark：當(dāng)語(yǔ)音播放至 mark 標(biāo)記時(shí)觸發(fā)
onpause：暫停語(yǔ)音播放時(shí)觸發(fā)
onresume：恢復(fù)語(yǔ)音播放時(shí)觸發(fā)
onstart：開(kāi)始語(yǔ)音播放時(shí)觸發(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()">播放語(yǔ)音</button>

js

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

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

四、擴(kuò)展

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

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

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

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

var text = '你好，世界！'; // 要轉(zhuǎn)換為語(yǔ)音的文本  
var apikey = '你的API密鑰'; // 百度提供的API密鑰  
var params = {  
    text: text,  
    apikey: apikey,  
    engine: 'paddle', // 選擇語(yǔ)音合成引擎，支持'paddle'和'deepizone'兩種引擎  
    voice: 'zh_cn', // 選擇語(yǔ)音類型，支持'zh_cn'和'en'兩種類型  
    speed: 5, // 語(yǔ)速，取值范圍為0-10，數(shù)字越大語(yǔ)速越快  
    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請(qǐng)求獲取語(yǔ)音數(shù)據(jù)  
    var audio = new Audio(response); // 創(chuàng)建Audio對(duì)象并播放語(yǔ)音  
    audio.play();  
});

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

最新評(píng)論