各位开发者大家好!我很高兴向大家介绍我的最新项目:一个简单但功能强大的文本到语音生成器。该项目是深入研究 JavaScript 功能的绝佳方式,特别是在处理用户输入、与 Web Speech API 交互以及动态更新 DOM 方面。无论您是初学者还是想扩展 JavaScript 知识,这个文本转语音生成器都是一个很棒的项目。
文本到语音生成器是一个基于网络的应用程序,允许用户使用浏览器的语音合成功能将文本转换为口语单词。该项目展示了如何创建交互式且可访问的用户界面,同时通过将文本输入转换为语音来提供实时反馈。
以下是项目结构的快速浏览:
Text-to-Speech-Generator/ ├── index.html ├── styles.css └── script.js
要开始该项目,请按照以下步骤操作:
克隆存储库:
git clone https://github.com/abhishekgurjar-in/Text-to-Speech-Generator.git
打开项目目录:
cd Text-to-Speech-Generator
运行项目:
index.html 文件提供了文本转语音生成器的基本结构,包括用于用户输入的文本区域和触发语音合成的按钮。这是一个片段:
8b05045a5be5764f313ed5b9168a17e6 49099650ebdc5f3125501fa170048923 93f0f5c25f18dab9d176bd4f6de5d30e 7c8d9f814bcad6a1d7abe4eda5f773e5 26faf3d1af674280d03ba217d87e9421 b2386ffb911b14667cb8f0f91ea547a7Text to Speech Generator6e916e0f7d1e588d4f442bf645aedb2f af75c476cdb7e6c074ca6da9b40841de 90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 527db218a609cb4e96157e28dc6f988cText to Speech473f0a7621bec819994bb5020d29372a 4883ec0eb33c31828b7c767c806e14c7 6b6c66ef74ba338f97a71f3987055feb40587128eee8df8f03d0b607fe983014 cfc30845dcc69087db4670cfb20dbb15 b12816d86e91ea319e45b86c4a466364Speak Text65281c5ac262bf6d81768915a4a77ac0 d1095aebd35e5e12f65b9db809ed3167Stop65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 ffd6ba4147bda351239915f463e46e38 e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
styles.css 文件设置文本转语音生成器的样式,提供干净且用户友好的布局。以下是一些关键样式:
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: white; } .title { text-align: center; font-size: 40px; margin: 20px; padding: 10px; } .container { margin: 20px; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .text { background-color: rgb(242, 241, 241); color: black; width: 600px; height: 400px; margin: 10px; padding: 5px; border: 1px solid rgba(0, 0, 0, 0.51); display: block; border-radius: 10px; } .buttons { display: flex; } .speak-btn, .stop-btn { width: 200px; height: 40px; margin: 10px; padding: 10px; border: none; color: white; background-color: rgb(63, 63, 255); border-radius: 5px; font-size: 15px; text-align: center; cursor: pointer; } .stop-btn { background-color: rgb(255, 63, 63); } .footer { margin: 50px; text-align: center; }
script.js 文件处理语音合成逻辑,将文本输入转换为语音并管理停止功能。这是一个片段:
document.addEventListener('DOMContentLoaded', function() { const textEl = document.querySelector(".text"); const speakEl = document.querySelector(".speak-btn"); const stopEl = document.querySelector(".stop-btn"); speakEl.addEventListener('click', function() { speakText(textEl.value); }); stopEl.addEventListener('click', function() { stopSpeaking(); }); function speakText(text) { window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); window.speechSynthesis.speak(utterance); } function stopSpeaking() { window.speechSynthesis.cancel(); } });
您可以在此处查看文本转语音生成器的现场演示。
构建这个文本语音生成器是一次愉快且具有教育意义的体验,它加深了我对 JavaScript 的理解,特别是在使用 Web Speech API 创建交互式 Web 应用程序方面。我希望这个项目能够激励您探索 Web 开发的可能性。快乐编码!
这个项目是我增强 Web 开发技能之旅的一部分,重点关注 JavaScript 和 API 集成。
以上是构建文本转语音网站的详细内容。更多信息请关注PHP中文网其他相关文章!