原生JavaScript再网页实现文本转语音功能
作者：bbamx.
1、原理
语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。
Web API中对此有一个主要控制接口 SpeechSynthesis，外加一些处理如何表示要被合成的文本 (也被称为 utterances)，用什么声音来播出 utterances 等工作的相关接口。同样的，许多操作系统都有自己的某种语音合成系统，在这个任务中我们调用可用的 API 来使用语音合成系统。
2、示例
可以直接复制下面代码运行在浏览器中
<!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>开始播放语音</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('当前浏览器不支持文字转语音服务')
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('语音播放结束')
},
function () {
console.log('语音开始播放')
}
)
})
</script>
</html>支持的浏览器
- Firefox 桌面版和移动版。
- Firefox OS 2.5+。
- Chrome 桌面版和安卓版。
注意：如果效果演示失败，大概是由于您当前使用的浏览器不支持语音转文字这个API，请更换浏览器后重试！
3、解析speak函数
接受参数
- text：要转换为语音的文本内容。
- speechRate：语音播放速率。
- lang：语音的语言代码。
- volume：语音的音量。
- pitch：语音的音调。
1、另外，它还接受两个回调函数作为参数：endEvent 和 startEvent。endEvent 在语音播放结束时触发，而 startEvent 在语音播放开始时触发。
2、函数首先检查浏览器是否支持语音合成服务，如果不支持则输出警告信息并返回。然后它检查是否传入了要转换的文本内容，如果没有则直接返回。
3、接着，函数创建了一个 SpeechSynthesisUtterance 对象，该对象表示一段要朗读的文本。
4、然后将传入的参数赋值给这个对象的相应属性，如文本内容、语速、语言、音量和音调。
在设置好 SpeechSynthesisUtterance 对象的属性后，
5、函数设置了两个事件处理程序：onstart 和 onend。onstart 事件处理程序在语音播放开始时触发 startEvent 回调函数，onend 事件处理程序在语音播放结束时触发 endEvent 回调函数。
6、最后，函数通过 speechSynthesis.speak() 方法来开始语音合成，将 SpeechSynthesisUtterance 对象传递给该方法以开始朗读文本，并返回这个 SpeechSynthesisUtterance 对象。
4、方法补充
下面小编为大家整理了一些其他js实现文字转语音的方法，希望对大家有所帮助
1.还有Web Speech API
Web Speech API 是一个浏览器提供的用于语音识别和语音合成的API
包括 SpeechSynthesis语音合成 和 SpeechRecognition语音识别
https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语音合成功能</title>
</head>
<body>
<h1>语音合成功能</h1>
<textarea id="textToSpeak" rows="4" cols="50" placeholder="请输入要朗读的文本..."></textarea><br>
<button id="speakButton">朗读文本</button>
<script>
const textArea = document.getElementById("textToSpeak");
const speakButton = document.getElementById("speakButton");
// 检查浏览器是否支持语音合成
if (!window.speechSynthesis) {
alert("您的浏览器不支持语音合成功能。");
}
// 获取语音列表
const voices = window.speechSynthesis.getVoices();
// 朗读文本
speakButton.addEventListener("click", function () {
const text = textArea.value.trim();
if (text === "") {
alert("请输入文本内容！");
return;
}
console.log("开始朗读文本：", text);
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = "zh-CN"; // 设置语言为中文
utterance.voice = voices.find(voice => voice.lang === "zh-CN"); // 选择中文语音
// 设置语速，取值范围通常在 0.1 到 10 之间，这里设置为 0.8 倍速
utterance.rate = 0.8;
// 设置语调，取值范围一般在 0 到 2 之间，这里设为 1.5
utterance.pitch = 1.5;
// 设置音量，取值范围从 0 到 1，这里设为 0.5
utterance.volume = 0.5;
// 监听朗读结束
utterance.onend = function () {
console.log("朗读结束！");
};
// 开始朗读
window.speechSynthesis.speak(utterance);
});
</script>
</body>
</html>2.不调用第三方包
如果不想调用第三方的语音包，就可以用以下方法实现，只不过原生API生成语音确实有点僵硬，isIe的方法是判断当前浏览器是否有ActiveXObject 对象，ActiveXObject 一般情况下是只有IE浏览器才有的，如果有就实例化一个对象，调用Speak方法就可以了；如果没有就用SpeechSynthesisUtterance这个HTML5新增的API来操作。
具体代码如下，在使用的地方直接调用playVoice()方法就可以了。
function isIe() {
if (!!window.ActiveXObject || "ActiveXObject " in window) {
return true
} else {
return false
}
}
function playVoice() {
let msg = '这是一个文字转语音的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再网页实现文本转语音功能的详细内容，更多关于JavaScript文本转语音的资料请关注脚本之家其它相关文章！