极客教程使用Google Chrome Web Speech API进行文本转语音转换
现在，有声读物更受读者的欢迎，因为他们可以在听的同时进行任何工作来获取知识。此外，一些网站会在每篇文章中添加文章的音频，因此，如果用户不想阅读文章，他们可以听它。
要将普通文本转换为语音，我们需要使用Google Chrome的Web Speech API。在本教程中，我们将学习如何使用Google Chrome的Web Speech API将文本转换为语音。
语法
用户可以按照下面的语法来使用Google Chrome的Web Speech API进行文本转语音转换。
var synth = window.speechSynthesis;
var speechOBj = new SpeechSynthesisUtterance(text);
synth.speak(speechOBj);
在上面的语法中，我们初始化了SpeechSynthesisUtterance（）对象并将文本作为参数传递。之后，我们使用speak（）方法将文本转换为语音。
示例1
下面的示例演示了使用Google Chrome Web Speech API将文本转换为语音的基本用法。我们使用HTML的“textarea”标签接收用户的文本输入。
在JavaScript中，我们从“textarea”输入字段中访问文本。之后，每当用户单击提交按钮时，我们将SpeechSynthesisUtterance的新对象初始化为“textarea”输入字段的文本值。此外，我们使用speak（）方法将文本转换为语音，用户可以在输出中观察到。
<html>
<body>
<h3>使用Google Chrome Web Speech API进行文本转语音转换</h3>
<div class = "container">
<textarea name = "text" id = "text" cols = "30" rows = "10"> 添加文本以阅读。 </textarea>
<br> <br>
<button id = "speak"> 朗读文本 </button>
</div>
<script>
// 编写JavaScript代码使用Web Speech API进行文本转语音转换
var synth = window.speechSynthesis;
var speak = document.getElementById("speak");
speak.addEventListener("click", () => {
var text = document.getElementById("text").value;
var speechOBj = new SpeechSynthesisUtterance(text);
synth.speak(speechOBj);
});
</script>
</body>
</html>
示例2
下面的示例演示了Google Chrome Web Speech API的高级用法。在此示例中，每当用户单击按钮时，它都会调用textToVoice（）函数，将文本转换为语音。还可以向语音添加速率和音高值。
此外，setVoices（）函数将所有不同地区的可用语音设置为下拉菜单选项。用户可以从下拉菜单中选择任何语音并更改语音。
接下来，我们添加了恢复（resume）、暂停（pause）和取消（cancel）按钮以执行相应的操作。
<html>
<head>
<style>
textarea {
border: 2px solid green;
width: 500px;
}
.controls {
margin-top: 10px;
}
</style>
</head>
<body>
<h3>使用 Google Chrome 的 <i>Web speech API</i> 把文本转成语音</h3>
<div class="container">
<textarea name="text" id="text" cols="30" rows="10"> 添加需要转换的文本 </textarea>
<div class="controls">
<label for="voice-select">发音人</label>
<select name="voice" id="voice-select"> </select>
<br> <br>
<label for="rate-select">语速</label>
<input type="range" name="rate" id="rate-select" min="0" max="1" step="0.1" value="1">
<span id="rate-value">10</span>
<br> <br>
<label for="pitch-select">音高</label>
<input type="range" name="pitch" id="pitch-select" min="0" max="2" step="0.1" value="1">
<span id="pitch-value">10</span>
<br> <br>
<button id="btn">
开始转换
</button>
<button id="pause"> 暂停 </button>
<button id="resume"> 继续 </button>
<button id="cancel"> 取消 </button>
</div>
<script>
// 获取元素
const textarea = document.getElementById('text');
const voice_select = document.getElementById('voice-select');
const rateSelect = document.getElementById('rate-select');
const pitchSelect = document.getElementById('pitch-select');
const rateval = document.getElementById('rate-value');
const pitchval = document.getElementById('pitch-value');
let button = document.getElementById('btn');
let pause = document.getElementById('pause');
let resume = document.getElementById('resume');
let cancel = document.getElementById('cancel');
// 初始化语音 API
const speeachSynth = window.speechSynthesis;
let AllVoices = [];
function setVoices() {
AllVoices = speeachSynth.getVoices();
var string_op = "";
AllVoices.forEach(voice => {
var option = voice.name + ' - ' + voice.lang + ' - ';
var new_option = "<option data-name='" + voice.name +
"' data-lang='" + voice.lang + "'>" + option
+ "</option>
";
string_op += new_option;
});
voice_select.innerHTML = string_op;
}
speeachSynth.onvoiceschanged = function () {
setVoices();
};
function textToVoice() {
if (textarea.value !== '') {
// 创建一个新的语音对象
const textToSpeak = new SpeechSynthesisUtterance(textarea.value);
//如果出错
textToSpeak.error = e => {
console.error('Error occurred...');
};
// 从下拉列表中选择发音人
const id = voice_select.selectedIndex;
const selectedVoice =
voice_select.selectedOptions[0].getAttribute('data-name');
// 设置发音人
AllVoices.forEach(voice => {
if (voice.name === selectedVoice) {
textToSpeak.voice = voice;
}
});
// 选择语速和音高
textToSpeak.rate = rateSelect.value;
textToSpeak.pitch = pitchSelect.value;
// 开始转换
speeachSynth.speak(textToSpeak);
}
};
// 更新语速和音高的值并显示
rateSelect.addEventListener('change', event => rateval.innerHTML
= (Number.parseFloat(rateSelect.value) * 10) + "");
pitchSelect.addEventListener('change', evt => pitchval.innerHTML
= (Number.parseFloat(pitchSelect.value) * 10) + "");
// 监听“开始转换”按钮点击事件
button.addEventListener('click', e => {
e.preventDefault();
textToVoice();
});
// 监听“暂停”按钮点击事件
pause.addEventListener('click', e => {
e.preventDefault();
speeachSynth.pause();
});
// 监听“继续”按钮点击事件
resume.addEventListener('click', e => {
e.preventDefault();
speeachSynth.resume();
});
// 监听“取消”按钮点击事件
cancel.addEventListener('click', e => {
e.preventDefault();
speeachSynth.cancel();
});
</script>
</body>
</html>
在这个例子中，用户学习了如何使用Google Chrome的Web speech API将文本转换成语音。在第一个例子中，我们了解了Web speech API的基本用法，而在第二个例子中，我们则看到了Web speech API的高级用法。