数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学使用谷歌Chrome浏览器Web Speech API进行文本转语音转换
如今，有声读物比阅读书籍更受读者欢迎，因为他们可以在做任何事情的同时通过收听获取知识。此外，一些网站会在每篇文章中添加音频，因此如果用户不想阅读文章，他们可以收听。
要将普通文本转换为语音，我们需要使用谷歌Chrome浏览器的Web Speech API。在本教程中，我们将学习如何使用谷歌Chrome浏览器的Web Speech API将文本转换为语音。
语法
用户可以按照以下语法使用谷歌Chrome浏览器的Web Speech API进行文本转语音转换。
var synth = window.speechSynthesis; var speechOBj = new SpeechSynthesisUtterance(text); synth.speak(speechOBj);
在上述语法中，我们初始化了SpeechSynthesisUtterance()对象，并将要朗读的文本作为参数传递。之后，我们使用了speak()方法来朗读文本。
示例1
下面的示例演示了谷歌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
下面的示例演示了谷歌Chrome浏览器Web Speech 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 Speech API将文本转换为语音。在第一个示例中，我们看到了Web Speech API的基本用法，在第二个示例中，我们看到了Web Speech API的高级用法。
更新于：2023年4月24日
865 次浏览
广告