本帖最后由 chh322 于 2023-11-3 14:41 编辑
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本到语音转换</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>
支持win和苹果
---------------------------
yy.zip
(1.76 KB, 下载次数: 20)
新增手动清空消息模板 | 
发表于 2023-10-31 14:42
