文字转语音简单方案（Google浏览器下亲测有效）

xuanxiao · 发表于 2023-11-20 16:55:51

支持脱机/局域网环境，无需外部API支持。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本转换语音-ttasp</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#output {
margin-bottom: 20px;
}
#text-input {
width: 80%;
padding: 15px;
font-size: 18px;
margin: 20px auto; /* 居中并且设置上下边距 */
/* 设置文本框为至少5行 */
rows: 5;
}
#convert-button {
padding: 15px 40px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>文本转换语音</h1>
<button id="convert-button">转换语音</button>
<br><br>
<textarea id="text-input" placeholder="请输入文本" rows="5"></textarea>
<div id="output"></div>
<script>
document.getElementById("convert-button").addEventListener("click", function () {
var textInput = document.getElementById("text-input");
var text = textInput.value;
var outputDiv = document.getElementById("output");
// 使用SpeechSynthesis API将文本转换为语音
var utterance = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(utterance);
// 在页面上显示转换的文本
outputDiv.innerText = "转换的语音: " + text;
// 清空输入框
textInput.value = "";
});
</script>
</body>
</html>

复制代码

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)