HTML、CSS 和 JavaScript 在线文本到语音转换

HTML：

 <main>  
 <h1 class="title">文字转语音</h1>  
 <div class="text-section">  
 <p class="text-input">输入文字</p>  
 <textarea name="" id="text">  
 </textarea>  
 </div>  
 <div class="text-voice">  
 <p class="text-voice-text">选择语音</p>  
 <select name="" id="voice">  
 <option value="Google US English">谷歌美国英语</option>  
 </select>  
 </div>  
 <button class="submit">转换为语音</button> </main>

CSS：

 @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,[[email protected]](/cdn-cgi/l/email-protection),300;0,400;0,700;1,300&display=swap'); *{  
 font-family: 'Roboto Condensed', sans-serif;  
 box-sizing：边框框；  
 边距：0；  
 填充：0； } 身体{  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 高度：100vh；  
 背景颜色：#D6EFED；  
 } 主要的{  
 背景颜色：#4FDBBA；  
 高度：27rem；  
 宽度：23rem；  
 边界半径：1.25rem；  
 盒子阴影：rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;  
 显示：弯曲；  
 justify-content：空间均匀；  
 对齐项目：居中；  
 弹性方向：列； } 。标题{  
 字体大小：2rem；  
 字体粗细：粗体；  
 颜色：#072227；  
 文字阴影：1px 1px 1px #010;  
 } .文本部分{  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 弹性方向：列；  
 间隙：5px；  
 } .文本输入{  
 白颜色;  
 对齐自我：开始；  
 字体粗细：粗体；  
 } ＃文本{  
 高度：5rem；  
 宽度：18rem；  
 边界半径：0.5rem；  
 盒子阴影：rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;  
 边框：无；  
 调整大小：无；  
 字体大小：.85rem；  
 填充：8px 10px；  
 轮廓：2px 实心 rgba(120, 120, 120, 0.623);  
 } .文本语音{  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 弹性方向：列；  
 } .text-voice-text{  
 字体粗细：粗体；  
 白颜色;  
 对齐自我：开始；  
 边距底部：1rem； } ＃嗓音{  
 高度：2rem；  
 宽度：18rem；  
 盒子阴影：rgb(38, 57, 77) 0px 20px 30px -10px;  
 边界半径：0.35rem；  
 填充：0px 10px；  
 轮廓：2px 实心 rgba(120, 120, 120, 0.623);  
 } 按钮{  
 背景颜色：#072227；  
 白颜色;  
 高度：2.5rem；  
 宽度：18rem；  
 边界半径：0.5rem；  
 保证金：1rem；  
 边框：无；  
 字体大小：1rem；  
 字体粗细：粗体；  
 盒子阴影：rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; } @media（最大宽度：700px）{  
 主要的 {  
 宽度：60vw；  
 } ＃文本{  
 宽度：10rem；  
 } ＃嗓音{  
 宽度：10rem；  
 } 按钮{  
 宽度：10rem；  
 }  
 }

JavaScript：

 const textarea = document.querySelector('#text')  
 让 voicelist = document.querySelector('#voice')  
 让 Speechbtn = document.querySelector('.submit') 让 synth = SpeechSynthesis  
 让 isSpeaking = true 功能语音（）{  
 for (让 synth.getVoices() 的声音) {  
 let option = document.createElement('option')  
 option.text = voice.name  
 voicelist.add(选项)  
 console.log（选项）  
 }  
 } synth.addEventListener('voiceschanged', voicespeech) 功能文本语音（文本）{  
 让 utterance = new SpeechSynthesisUtterance(text)  
 for (让 synth.getVoices() 的声音) {  
 if (voice.name === voicelist.value) {  
 utterance.voice = 声音  
 }  
 }  
 SpeechSynthesis.speak（话语）  
 } //  
 Speechbtn.addEventListener('click', (e) => {  
 e.preventDefault()  
 if (textarea.value != '') {  
 如果（！synth.speaking）{  
 texttospeech(textarea.value)  
 }  
 if (textarea.value.length > 80) {  
 如果（说话）{  
 合成器.resume()  
 isSpeaking = 假  
 Speechbtn.innerHTML = '暂停语音'  
 } 别的 {  
 合成器.pause()  
 isSpeaking = 真  
 Speechbtn.innerHTML = '恢复演讲'  
 }  
 setInterval(() => {  
 if (!synth.speaking && !isSpeaking) {  
 isSpeaking = 真  
 Speechbtn.innerHTML = '转换为语音'  
 }  
 })  
 } 别的 {  
 Speechbtn.innerHTML = '转换为语音'  
 }  
 }  
 })  
 语音（）

HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com

完毕！享受 文字转语音片段

现在下载

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/12406/21300412