极客笔记使用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”输入字段中获取文本。之后，每当用户单击提交按钮时，我们使用“textarea”输入字段的文本值初始化SpeechSynthesisUtterance的新对象。此外，我们使用speak（）方法将文本转换为语音，用户可以在输出中观察到。
<html>
<body>
<h3>Text to voice conversion using the Web speech API of Google Chrome</h3>
<div class = "container">
<textarea name = "text" id = "text" cols = "30" rows = "10"> Add text to Speak. </textarea>
<br> <br>
<button id = "speak"> Speak Text </button>
</div>
<script>
// Writing a javascript code to use web speech api to text to voice conversion
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网络语音API的高级用法。在这里，每当用户点击按钮时，它会调用textToVoice()函数，将文本转换为语音。另外，它还会将速度和音调值添加到语音中。
此外，setVoices()函数将不同地区的所有可用语音设置为下拉菜单选项。用户可以从下拉菜单中选择任何语音并更改语音。
接下来，我们添加了恢复、暂停和取消按钮，以执行相应的操作。
<html>
<head>
<style>
textarea {
border: 2px solid green;
width: 500px;
}
.controls {
margin-top: 10px;
}
</style>
</head>
<body>
<h3>Converting the text to voice using the <i> Web speech API </i> of Google Chrome.</h3>
<div class = "container">
<textarea name = "text" id = "text" cols = "30" rows = "10"> Add text to Speak. </textarea>
<div class = "controls">
<label for = "voice-select"> Voice </label>
<select name = "voice" id = "voice-select"> </select>
<br> <br>
<label for = "rate-select"> Rate </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"> Pitch </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">
Speak
</button>
<button id = "pause"> Pause </button>
<button id = "resume"> Resume </button>
<button id = "cancel"> Cancel </button>
</div>
<script>
// Accessing values
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');
// Initialize speech 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 !== '') {
// Creating a new speech object
const textToSpeak = new SpeechSynthesisUtterance(textarea.value);
//If there is an error while speaking, this function
textToSpeak.error = e => {
console.error('Error occurred...');
};
//Select voice from the dropdown
const id = voice_select.selectedIndex;
const selectedVoice =
voice_select.selectedOptions[0].getAttribute('data-name');
// set voice
AllVoices.forEach(voice => {
if (voice.name === selectedVoice) {
textToSpeak.voice = voice;
}
});
// select rate and pitch value
textToSpeak.rate = rateSelect.value;
textToSpeak.pitch = pitchSelect.value;
// speak the text
speeachSynth.speak(textToSpeak);
}
};
// update the values of rate and pitch
rateSelect.addEventListener('change', event => rateval.innerHTML
= (Number.parseFloat(rateSelect.value) * 10) + "");
pitchSelect.addEventListener('change', evt => pitchval.innerHTML
= (Number.parseFloat(pitchSelect.value) * 10) + "");
// call the textToVoice function when the button is clicked
button.addEventListener('click', e => {
e.preventDefault();
textToVoice();
});
// pause the speech
pause.addEventListener('click', e => {
e.preventDefault();
speeachSynth.pause();
});
// resume the speech
resume.addEventListener('click', e => {
e.preventDefault();
speeachSynth.resume();
});
// cancel the speech
cancel.addEventListener('click', e => {
e.preventDefault();
speeachSynth.cancel();
});
</script>
</body>
</html>
用户学习如何使用谷歌Chrome的Web语音API将文本转换为语音。在第一个示例中，我们看到了Web语音API的基本用法；在第二个示例中，我们看到了Web语音API的高级用法。