原生JavaScript再網(wǎng)頁(yè)實(shí)現(xiàn)文本轉(zhuǎn)語(yǔ)音功能
1、原理
語(yǔ)音合成 (也被稱(chēng)作是文本轉(zhuǎn)為語(yǔ)音，英語(yǔ)簡(jiǎn)寫(xiě)是 tts) 包括接收 app 中需要語(yǔ)音合成的文本，再在設(shè)備麥克風(fēng)播放出來(lái)這兩個(gè)過(guò)程。
Web API中對(duì)此有一個(gè)主要控制接口 SpeechSynthesis，外加一些處理如何表示要被合成的文本 (也被稱(chēng)為 utterances)，用什么聲音來(lái)播出 utterances 等工作的相關(guān)接口。同樣的，許多操作系統(tǒng)都有自己的某種語(yǔ)音合成系統(tǒng)，在這個(gè)任務(wù)中我們調(diào)用可用的 API 來(lái)使用語(yǔ)音合成系統(tǒng)。
2、示例
可以直接復(fù)制下面代碼運(yùn)行在瀏覽器中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
<div>
<input type="text" />
<button>開(kāi)始播放語(yǔ)音</button>
</div>
</body>
<script>
const btn = document.querySelector('button')
const ipt = document.querySelector('input')
function speak({ text, speechRate, lang, volume, pitch }, endEvent, startEvent) {
if (!window.SpeechSynthesisUtterance) {
console.warn('當(dāng)前瀏覽器不支持文字轉(zhuǎn)語(yǔ)音服務(wù)')
return
}
if (!text) {
return
}
const speechUtterance = new SpeechSynthesisUtterance()
speechUtterance.text = text
speechUtterance.rate = speechRate || 1
speechUtterance.lang = lang || 'zh-CN'
speechUtterance.volume = volume || 1
speechUtterance.pitch = pitch || 1
speechUtterance.onstart = function (e) {
startEvent && startEvent()
}
speechUtterance.onend = function (e) {
endEvent && endEvent()
}
speechSynthesis.speak(speechUtterance)
return speechUtterance
}
btn.addEventListener('click', function () {
if (!ipt.value) return
speak(
{
text: ipt.value,
},
function () {
console.log('語(yǔ)音播放結(jié)束')
},
function () {
console.log('語(yǔ)音開(kāi)始播放')
}
)
})
</script>
</html>支持的瀏覽器
- Firefox 桌面版和移動(dòng)版。
- Firefox OS 2.5+。
- Chrome 桌面版和安卓版。
注意：如果效果演示失敗，大概是由于您當(dāng)前使用的瀏覽器不支持語(yǔ)音轉(zhuǎn)文字這個(gè)API，請(qǐng)更換瀏覽器后重試！
3、解析speak函數(shù)
接受參數(shù)
- text：要轉(zhuǎn)換為語(yǔ)音的文本內(nèi)容。
- speechRate：語(yǔ)音播放速率。
- lang：語(yǔ)音的語(yǔ)言代碼。
- volume：語(yǔ)音的音量。
- pitch：語(yǔ)音的音調(diào)。
1、另外，它還接受兩個(gè)回調(diào)函數(shù)作為參數(shù)：endEvent 和 startEvent。endEvent 在語(yǔ)音播放結(jié)束時(shí)觸發(fā)，而 startEvent 在語(yǔ)音播放開(kāi)始時(shí)觸發(fā)。
2、函數(shù)首先檢查瀏覽器是否支持語(yǔ)音合成服務(wù)，如果不支持則輸出警告信息并返回。然后它檢查是否傳入了要轉(zhuǎn)換的文本內(nèi)容，如果沒(méi)有則直接返回。
3、接著，函數(shù)創(chuàng)建了一個(gè) SpeechSynthesisUtterance 對(duì)象，該對(duì)象表示一段要朗讀的文本。
4、然后將傳入的參數(shù)賦值給這個(gè)對(duì)象的相應(yīng)屬性，如文本內(nèi)容、語(yǔ)速、語(yǔ)言、音量和音調(diào)。
在設(shè)置好 SpeechSynthesisUtterance 對(duì)象的屬性后，
5、函數(shù)設(shè)置了兩個(gè)事件處理程序：onstart 和 onend。onstart 事件處理程序在語(yǔ)音播放開(kāi)始時(shí)觸發(fā) startEvent 回調(diào)函數(shù)，onend 事件處理程序在語(yǔ)音播放結(jié)束時(shí)觸發(fā) endEvent 回調(diào)函數(shù)。
6、最后，函數(shù)通過(guò) speechSynthesis.speak() 方法來(lái)開(kāi)始語(yǔ)音合成，將 SpeechSynthesisUtterance 對(duì)象傳遞給該方法以開(kāi)始朗讀文本，并返回這個(gè) SpeechSynthesisUtterance 對(duì)象。
4、方法補(bǔ)充
下面小編為大家整理了一些其他js實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音的方法，希望對(duì)大家有所幫助
1.還有Web Speech API
Web Speech API 是一個(gè)瀏覽器提供的用于語(yǔ)音識(shí)別和語(yǔ)音合成的API
包括 SpeechSynthesis語(yǔ)音合成 和 SpeechRecognition語(yǔ)音識(shí)別
https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis
實(shí)現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>語(yǔ)音合成功能</title>
</head>
<body>
<h1>語(yǔ)音合成功能</h1>
<textarea id="textToSpeak" rows="4" cols="50" placeholder="請(qǐng)輸入要朗讀的文本..."></textarea><br>
<button id="speakButton">朗讀文本</button>
<script>
const textArea = document.getElementById("textToSpeak");
const speakButton = document.getElementById("speakButton");
// 檢查瀏覽器是否支持語(yǔ)音合成
if (!window.speechSynthesis) {
alert("您的瀏覽器不支持語(yǔ)音合成功能。");
}
// 獲取語(yǔ)音列表
const voices = window.speechSynthesis.getVoices();
// 朗讀文本
speakButton.addEventListener("click", function () {
const text = textArea.value.trim();
if (text === "") {
alert("請(qǐng)輸入文本內(nèi)容！");
return;
}
console.log("開(kāi)始朗讀文本：", text);
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = "zh-CN"; // 設(shè)置語(yǔ)言為中文
utterance.voice = voices.find(voice => voice.lang === "zh-CN"); // 選擇中文語(yǔ)音
// 設(shè)置語(yǔ)速，取值范圍通常在 0.1 到 10 之間，這里設(shè)置為 0.8 倍速
utterance.rate = 0.8;
// 設(shè)置語(yǔ)調(diào)，取值范圍一般在 0 到 2 之間，這里設(shè)為 1.5
utterance.pitch = 1.5;
// 設(shè)置音量，取值范圍從 0 到 1，這里設(shè)為 0.5
utterance.volume = 0.5;
// 監(jiān)聽(tīng)朗讀結(jié)束
utterance.onend = function () {
console.log("朗讀結(jié)束！");
};
// 開(kāi)始朗讀
window.speechSynthesis.speak(utterance);
});
</script>
</body>
</html>2.不調(diào)用第三方包
如果不想調(diào)用第三方的語(yǔ)音包，就可以用以下方法實(shí)現(xiàn)，只不過(guò)原生API生成語(yǔ)音確實(shí)有點(diǎn)僵硬，isIe的方法是判斷當(dāng)前瀏覽器是否有ActiveXObject 對(duì)象，ActiveXObject 一般情況下是只有IE瀏覽器才有的，如果有就實(shí)例化一個(gè)對(duì)象，調(diào)用Speak方法就可以了；如果沒(méi)有就用SpeechSynthesisUtterance這個(gè)HTML5新增的API來(lái)操作。
具體代碼如下，在使用的地方直接調(diào)用playVoice()方法就可以了。
function isIe() {
if (!!window.ActiveXObject || "ActiveXObject " in window) {
return true
} else {
return false
}
}
function playVoice() {
let msg = '這是一個(gè)文字轉(zhuǎn)語(yǔ)音的demo'
console.log(isIe())
if (isIe()) {
let voiceObj = new ActiveXObject("Sapi.SpVoice")
voiceObj.Rate = -1
voiceObj.Volume = 60
voiceObj.Speak(msg, 1)
} else {
let speakMsg = new SpeechSynthesisUtterance(msg)
speakMsg.rate = 1
speakMsg.pitch = 1.5
window.speechSynthesis.speak(speakMsg)
}
}以上就是原生JavaScript再網(wǎng)頁(yè)實(shí)現(xiàn)文本轉(zhuǎn)語(yǔ)音功能的詳細(xì)內(nèi)容，更多關(guān)于JavaScript文本轉(zhuǎn)語(yǔ)音的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了typescript中聲明合并介紹，類(lèi)型合并表明編譯器將合并兩個(gè)分開(kāi)的并且名稱(chēng)相同的聲明，合并之后的聲明擁有兩個(gè)聲明的特點(diǎn)，任意數(shù)量的聲明可以被合并，不僅限兩個(gè)，更多相關(guān)內(nèi)容需要的朋友可以參考下面文章內(nèi)容2022-09-09
使用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的哈希映射功能
哈希表大家應(yīng)該都經(jīng)常用到吧,那么大家有沒(méi)有想過(guò)哈希表是怎么實(shí)現(xiàn)的呢,本文我們就來(lái)從一道簡(jiǎn)單的題目來(lái)了解一下哈希表的簡(jiǎn)單原理和實(shí)現(xiàn)吧2024-02-02
js仿土豆網(wǎng)帶縮略圖的焦點(diǎn)圖片切換效果實(shí)現(xiàn)方法
這篇文章主要介紹了js仿土豆網(wǎng)帶縮略圖的焦點(diǎn)圖片切換效果實(shí)現(xiàn)方法,涉及javascript操作圖片特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問(wèn)題探討及解決
Array沒(méi)有indexOf方法，這樣在一個(gè)數(shù)組中查找某個(gè)元素的索引時(shí)比較麻煩，于是通過(guò)prototype原型擴(kuò)展了Array.prototype.indexOf(),在對(duì)數(shù)組進(jìn)行遍歷的時(shí)候卻出現(xiàn)了問(wèn)題2013-04-04
JavaScript中Promise.try() 的用法小結(jié)
本文主要介紹了JavaScript中Promise.try() 的用法小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
相信不少同學(xué)在面試的時(shí)候經(jīng)常在基礎(chǔ)上就掛掉了，當(dāng)下行情實(shí)屬?lài)?yán)峻，如果我們基礎(chǔ)都沒(méi)有打牢固的話(huà)，實(shí)屬有點(diǎn)面試?yán)速M(fèi)機(jī)會(huì)。本文就來(lái)和大家聊聊JavaScript中的原型&原型鏈，希望對(duì)大家有所幫助2023-02-02
ECMAScript6新增值比較函數(shù)Object.is
這篇文章主要介紹了ECMAScript6新增值比較函數(shù)Object.is的相關(guān)資料,需要的朋友可以參考下2015-06-06
如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范
眾所周知正則表達(dá)式非常強(qiáng)大,下面這篇文章主要給大家介紹了關(guān)于如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
微信小程序自定義彈窗實(shí)現(xiàn)詳解(可通用）
這篇文章主要介紹了微信小程序自定義彈窗實(shí)現(xiàn)詳解(可通用）,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
防止頁(yè)面被iframe(兼容IE,Firefox火狐)
以前發(fā)布的防止被iframe的代碼，容易在火狐瀏覽器下， 不斷的刷新頁(yè)面。所以從網(wǎng)站找到了這篇文章。2010-07-07