使用js实现文字转语音
Web Speech API 是一个浏览器提供的用于语音识别和语音合成的API
包括 SpeechSynthesis语音合成 和 SpeechRecognition语音识别
https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis
文字转语音简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>语音合成功能</title> </head> <body> <h1>语音合成功能</h1> <textarea id="textToSpeak" rows="4" cols="50" placeholder="请输入要朗读的文本..."></textarea><br> <button id="speakButton">朗读文本</button> <script> const textArea = document.getElementById("textToSpeak"); const speakButton = document.getElementById("speakButton"); // 检查浏览器是否支持语音合成 if (!window.speechSynthesis) { alert("您的浏览器不支持语音合成功能。"); } // 获取语音列表 const voices = window.speechSynthesis.getVoices(); // 朗读文本 speakButton.addEventListener("click", function () { const text = textArea.value.trim(); if (text === "") { alert("请输入文本内容！"); return; } console.log("开始朗读文本：", text); const utterance = new SpeechSynthesisUtterance(text); utterance.lang = "zh-CN"; // 设置语言为中文 utterance.voice = voices.find(voice => voice.lang === "zh-CN"); // 选择中文语音 // 设置语速，取值范围通常在 0.1 到 10 之间，这里设置为 0.8 倍速 utterance.rate = 0.8; // 设置语调，取值范围一般在 0 到 2 之间，这里设为 1.5 utterance.pitch = 1.5; // 设置音量，取值范围从 0 到 1，这里设为 0.5 utterance.volume = 0.5; // 监听朗读结束 utterance.onend = function () { console.log("朗读结束！"); }; // 开始朗读 window.speechSynthesis.speak(utterance); }); </script> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）