标签：文本 rgba JavaScript 120 HTML 语音 0px CSS Speechbtn
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
标签：文本,rgba,JavaScript,120,HTML,语音,0px,CSS,Speechbtn 来源： https://www.cnblogs.com/amboke/p/16654839.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。